如何在iOS中将方形图像蒙版成圆角图像？

Question

如何将方形图像掩盖成圆角图像？

Answer 1

您可以使用CoreGraphics为此代码段创建圆角矩形的路径:

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight)
{
    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, 1);
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1);
    CGContextClosePath(context);
    CGContextRestoreGState(context);
}

然后调用CGContextClip(context); 将其剪辑到矩形路径.现在,任何完成的绘图(包括绘制图像)都将被剪裁为圆角矩形.

举个例子,假设"image"是一个UIImage,这是在drawRect:方法中:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
addRoundedRectToPath(context, self.frame, 10, 10);
CGContextClip(context);
[image drawInRect:self.frame];
CGContextRestoreGState(context);

Answer 2

这是iPhone 3.0及更高版本中提供的更简单的方法.每个基于视图的对象都有一个关联的图层.每个图层都可以设置一个角半径,这将为您提供所需的内容:

UIImageView * roundedView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"wood.jpg"]];
// Get the Layer of any view
CALayer * layer = [roundedView layer];
[layer setMasksToBounds:YES];
[layer setCornerRadius:10.0];

// You can even add a border
[layer setBorderWidth:4.0];
[layer setBorderColor:[[UIColor blueColor] CGColor]];

要使用这些方法,您可能需要添加:

#import <QuartzCore/QuartzCore.h>

Answer 3

我意识到这是旧闻,但只是把它煮了一点:

这里有两个可能的问题:(1)如何将圆角应用于将在屏幕上显示的UIView(例如UIImageView),以及(2)如何屏蔽方形图像(即UIImage) )生成带圆角的新图像.

对于(1),最简单的方法是使用CoreAnimation并设置view.layer.cornerRadius属性

 // Because we're using CoreAnimation, we must include QuartzCore.h
 // and link QuartzCore.framework in a build phases 
 #import <QuartzCore/QuartzCore.h> 

 // start with an image 
 UIImage * fooImage = [UIImage imageNamed:@"foo.png"];
 // put it in a UIImageView
 UIView * view = [UIImageView alloc] initWithImage:fooImage];
 // round its corners. This mask now applies to the view's layer's *background*
 view.layer.cornerRadius = 10.f
 // enable masksToBounds, so the mask applies to its foreground, the image
 view.layer.masksToBounds = YES;

对于(2),最好的方法是使用UIKit图形操作:

// start with an image 
UIImage * fooImage = [UIImage imageNamed:@"foo.png"];
CGRect imageRect = CGRectMake(0, 0, fooImage.size.width, fooImage.size.height);
// set the implicit graphics context ("canvas") to a bitmap context for images
UIGraphicsBeginImageContextWithOptions(imageRect.size,NO,0.0);
// create a bezier path defining rounded corners
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:10.f];
// use this path for clipping in the implicit context
[path addClip];
// draw the image into the implicit context
[fooImage drawInRect:imageRect];
// save the clipped image from the implicit context into an image 
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
// cleanup
UIGraphicsEndImageContext();

问题(2)的棘手之处在于您可能认为可以使用CoreAnimation中的view.layer.mask属性执行整个操作.但是你不能因为CALayer renderInContext:方法,你用来从被遮罩的层生成UIImage,似乎忽略了掩码.更糟糕的是,文档renderInContext:没有提到这一点,只暗示了OSX 10.5的行为.

一些进一步的上下文:上面的方法(2)是使用UIKit的包装更基本的CoreGraphics功能.您可以直接使用CoreGraphics调用执行相同的操作 - 这就是所选答案正在执行的操作 - 但是您需要从曲线和线手动构建圆角rect bezier路径,并且还需要补偿CoreGraphics使用的事实绘制相对于UIKit的翻转坐标系.