可可绘制带圆角和阴影的图像

Posted 2023-02-25

【中文标题】可可绘制带圆角和阴影的图像

【英文标题】：Cocoa draw image with rounded corners and shadow

【发布时间】：2011-01-08 19:12:25

【问题描述】：

我正在尝试使用具有圆角和阴影的核心图形绘制图像。这是我的代码的 sn-p：

CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 2, shadowColor);    
CGContextAddPath(context, path);
CGContextClip(context);
CGContextDrawImage(context, rect, image);

我遇到的问题是创建圆角的剪裁也剪裁了阴影。由于图像可能在某些区域是透明的，因此我不能简单地在图像下方绘制带有阴影的圆角矩形。我想我需要先将圆形应用于图像，然后将生成的图像绘制到屏幕上并添加阴影。有人知道怎么做吗？

谢谢！

【参考方案1】：

好的，假设你有一个 UIView 子类，它有一个实例变量 image，它是一个 UIImage，那么你可以像这样执行你的 drawRect: 函数......

- (void)drawRect:(CGRect)rect 
    [super drawRect:rect];

    CGRect _bounds = [self bounds];
    CGColorRef aColor;
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Create a path
    CGRect insetRect = CGRectInset(_bounds, kBSImageButtonBorder, kBSImageButtonBorder);
    CGRect offsetRect = insetRect; offsetRect.origin = CGPointZero;

    UIGraphicsBeginImageContext(insetRect.size);
    CGContextRef imgContext = UIGraphicsGetCurrentContext();
    CGPathRef clippingPath = [UIBezierPath bezierPathWithRoundedRect:offsetRect cornerRadius:CORNER_RADIUS].CGPath; 
    CGContextAddPath(imgContext, clippingPath);
    CGContextClip(imgContext);  
    // Draw the image
    [image drawInRect:offsetRect];
    // Get the image
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    // Setup the shadow
    aColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.5f].CGColor;
    CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 2.0f), 2.0f, aColor);     

    // Draw the clipped image in the context
    [img drawInRect:insetRect];

我自己对 Quartz 编程有点陌生，但这应该会给你你的图像，以矩形为中心，减去一个边框，有一个角半径，一个 2.f 点阴影在它下面 2.f 点。希望对您有所帮助。

【参考方案2】：

这是一个使用 Daniel Thorpe 的回答来圆角图像角落的功能，以防你像我一样来到这里，只是在寻找一种方法来做到这一点。

+ (UIImage *) roundCornersOfImage:(UIImage *)image toRadius:(float)radius 

    // create image sized context
    UIGraphicsBeginImageContext(image.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    // add rounded rect clipping path to context using radius
    CGRect imageBounds = CGRectMake(0, 0, image.size.width, image.size.height);
    CGPathRef clippingPath = [UIBezierPath bezierPathWithRoundedRect:imageBounds cornerRadius:radius].CGPath;
    CGContextAddPath(context, clippingPath);
    CGContextClip(context);

    // draw the image
    [image drawInRect:imageBounds];

    // get the image
    UIImage *outImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return outImage;

【参考方案3】：

您可以将 imageView 与图层一起使用，图层具有设置阴影和边框的属性，方法如下：

    self.imageView = [[NSImageView alloc] initWithFrame:NSMakeRect(0,0,60,60)];
    self.imageView.image = [NSImage imageNamed:@"yourImageName"];
    self.imageView.wantsLayer = YES;
    self.imageView.layer.cornerRadius = 10;
    //make the shadow and set it
    NSShadow* shadow = [[NSShadow alloc] init];
    shadow.shadowBlurRadius = 2;
    shadow.shadowOffset = NSMakeSize(2, -2);
    shadow.shadowColor = [NSColor blackColor];
    self.imageView.shadow = shadow;

希望这会有所帮助，这也比使用 drawRect 覆盖要快得多