我正在尝试将图像添加到分组 UITableView 中的表格单元格,但图像的角没有被剪裁。剪裁这些的最佳方法是什么(除了在 Photoshop 中剪裁它们?表格内容是动态的。)
例如,表格中的第一个图像只需要将左上角修圆即可。
我正在尝试将图像添加到分组 UITableView 中的表格单元格,但图像的角没有被剪裁。剪裁这些的最佳方法是什么(除了在 Photoshop 中剪裁它们?表格内容是动态的。)
例如,表格中的第一个图像只需要将左上角修圆即可。
这是我的解决方案,可以使用一些重构:
void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight, BOOL top, BOOL bottom)
{
float fw, fh;
if (ovalWidth == 0 || ovalHeight == 0) {
CGContextAddRect(context, rect);
return;
}
CGContextSaveGState(context);
CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGContextScaleCTM (context, ovalWidth, ovalHeight);
fw = CGRectGetWidth (rect) / ovalWidth;
fh = CGRectGetHeight (rect) / ovalHeight;
CGContextMoveToPoint(context, fw, fh/2);
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 0);
NSLog(@"bottom? %d", bottom);
if (top) {
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 3);
} else {
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 0);
}
if (bottom) {
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 3);
} else {
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 0);
}
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 0);
CGContextClosePath(context);
CGContextRestoreGState(context);
}
- (UIImage *)roundCornersOfImage:(UIImage *)source roundTop:(BOOL)top roundBottom:(BOOL)bottom {
int w = source.size.width;
int h = source.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextBeginPath(context);
CGRect rect = CGRectMake(0, 0, w, h);
addRoundedRectToPath(context, rect, 4, 4, top, bottom);
CGContextClosePath(context);
CGContextClip(context);
CGContextDrawImage(context, CGRectMake(0, 0, w, h), source.CGImage);
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
return [UIImage imageWithCGImage:imageMasked];
}
实现这些功能,然后indexPath
在cellForRowAtIndexPath
委托方法中检查以确定要圆哪个角。
if (indexPath.row == 0) {
cell.imageView.image = [self roundCornersOfImage:coverImage roundTop:YES roundBottom:NO];
} else if (indexPath.row == [indexPath length]) {
cell.imageView.image = [self roundCornersOfImage:coverImage roundTop:NO roundBottom:YES];
} else {
cell.imageView.image = coverImage;
}
如果您很高兴将所有四个图像角都变圆,那么您可以在创建单元格时执行以下操作:
cell.imageView.layer.masksToBounds = YES;
cell.imageView.layer.cornerRadius = 10.0;
如果您还想从边界插入图像,我在 UIImage 上描述了一个简单的类别来执行此操作。
没有内置的标准方法可以做到这一点,但在您自己的代码中做到这一点并不难。有关如何在网络上的 UIImage 上圆角的示例,请参见例如http://blog.sallarp.com/iphone-uiimage-round-corners/。
一些添加/更改,希望对某人有所帮助:
1) roundTop 和 roundBottom impl 略有变化。
2)在单独的类中创建了一个类方法,因此重用更容易,而不是到处复制/粘贴。
一、新班级详情:
#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>
@interface RoundedImages : NSObject {
}
+(UIImage *)roundCornersOfImage:(UIImage *)source roundTop:(BOOL)top roundBottom:(BOOL)bottom;
@end
及其实现:
#import "RoundedImages.h"
@implementation RoundedImages
void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight, BOOL top, BOOL bottom)
{
float fw, fh;
if (ovalWidth == 0 || ovalHeight == 0) {
CGContextAddRect(context, rect);
return;
}
CGContextSaveGState(context);
CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGContextScaleCTM (context, ovalWidth, ovalHeight);
fw = CGRectGetWidth (rect) / ovalWidth;
fh = CGRectGetHeight (rect) / ovalHeight;
CGContextMoveToPoint(context, fw, fh/2);
if (top) {
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 3);
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 3);
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 0);
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 0);
} else {
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 0);
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 0);
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 3);
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 3);
}
CGContextClosePath(context);
CGContextRestoreGState(context);
}
+(UIImage *)roundCornersOfImage:(UIImage *)source roundTop:(BOOL)top roundBottom:(BOOL)bottom {
int w = source.size.width;
int h = source.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextBeginPath(context);
CGRect rect = CGRectMake(0, 0, w, h);
//addRoundedRectToPath(context, rect, 4, 4, top, bottom);
addRoundedRectToPath(context, rect, 5, 5, top, bottom);
CGContextClosePath(context);
CGContextClip(context);
CGContextDrawImage(context, CGRectMake(0, 0, w, h), source.CGImage);
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
//return [UIImage imageWithCGImage:imageMasked];
UIImage *image = [UIImage imageWithCGImage:imageMasked];
CGImageRelease(imageMasked);
return image;
}
@end
要在另一个类中使用(例如,视图控制器):
#import "RoundedImages.h"
...后来我们像这样使用它...
UIImageView *imageView = nil;
UIImage *img = [UIImage imageNamed:@"panel.png"];
if (indexPath.row == 0) {
imageView = [[UIImageView alloc]initWithImage:[RoundedImages roundCornersOfImage:img roundTop:YES roundBottom:NO]];
}
else if (indexPath.row == ([choices count]-1))
{
imageView = [[UIImageView alloc]initWithImage:[RoundedImages roundCornersOfImage:img roundTop:NO roundBottom:YES]];
}
else {
imageView = [[UIImageView alloc]initWithImage:img];
}
cell.backgroundColor = [UIColor clearColor];
imageView.clipsToBounds = NO;
cell.backgroundView = imageView;
cell.backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
[cell.backgroundView addSubview:imageView];
[imageView release];
请注意,上面的“选择”只是我在此页面上使用的一个可变数组,其中包含 tableview 的数据。
我应该补充一点,上面的用法片段在您的 cellForRowAtIndexPath 方法中使用,并且“cell”是一个 uitableviewcell。
无论如何,对我来说就像一个冠军。
如果您只想显示圆角,则有内置的方法。把图片放在一个 UIImageView 中,然后设置 UIImageView 图层的cornerRadius。您还需要告诉 UIImageView 剪辑到边界,但这会给您带来圆角。
UIImageView *myImageView = [[UIImageView alloc] initWithImage:...];
[myImageView setClipsToBounds:YES];
[[myImageView layer] setCornerRadius:5.0f];