iOS开发给图片设置圆角的正确姿势2019-02-12

在iOS开发中经常会用到给一组图片设置圆角，尤其是设置一个ImageView的左上角和右上角的圆角，那么这种问题应该怎么做呢？我去百度了很多资料大都是这么干的：

   UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"1"];
    dispatch_async(dispatch_get_main_queue(), ^{
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.backImageView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(4,4)];
        //创建 layer
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
        maskLayer.frame = self.backImageView.bounds;
        //赋值
        maskLayer.path = maskPath.CGPath;
        self.backImageView.layer.mask = maskLayer;
    });

这种方法本质上是用遮罩层 mask 来实现，因此无可避免的会导致离屏渲染，在collectionView滚动上产生了卡顿现象。

忘掉这种写法吧，下面介绍正确的高效设置圆角的姿势。

这种做法的原理是手动画出圆角。虽然我们都知道，为普通的视图直接设置 cornerRadius 属性即可。但万一不可避免的需要使用 masksToBounds，就可以使用下面这种方法，它的核心代码如下：

UIImageView * imageA = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
UIImage *imageA = [self wl_drawRectWithRoundedCorner:5  roundRect: imageA.bounds images:smallImage];

- (UIImage *)wl_drawRectWithRoundedCorner:(CGFloat)radius  roundRect:(CGRect)rect images:(UIImage *)image{
    
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);// 高120、宽213
    CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);
    CGContextAddPath(UIGraphicsGetCurrentContext(), [UIBezierPath bezierPathWithRoundedRect:imageRect byRoundingCorners:UIRectCornerTopRight | UIRectCornerTopLeft cornerRadii:CGSizeMake(radius, radius)].CGPath);
    CGContextClip(UIGraphicsGetCurrentContext());

    [image drawInRect:imageRect];
    CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathFillStroke);
    UIImage *lastImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return lastImage;
    
}

这个方法返回的是 UIImage，也就是说我们利用 Core Graphics 自己画出了一个圆角矩形。除了一些必要的代码外，最核心的就是 CGContextAddArcToPoint 函数。它中间的四个参数表示曲线的起点和终点坐标，最后一个参数表示半径。调用了四次函数后，就可以画出圆角矩形。最后再从当前的绘图上下文中获取图片并返回。
此时在collectionView上产生了卡顿现象解决了。

推荐文章：https://blog.csdn.net/u012479911/article/details/50772261