iOS圆角view的Swift实现（利用Core Graphics绘制）

2023-02-24 11:08:57

因为app的列表用用到了圆形图片的头像，所以去探究并思考了一下这个问题。首先这个问题有两个方向的解决方案：

把图片弄成圆形的。
把ImageView弄成圆形的。

这两个解决方案如果只在前端解决的话，我比较推荐第二种方案类型的。因为在列表中，修改的ImageView是可以参与Cell的重用的。但是第一种方案也有特殊的，因为图片存储如果用的阿里云、七牛等的成熟的图片存储，传个参数就可以返回圆角的图片，非常方便。

第二种方案的解决方式也有很多种，这篇简书文章就介绍的很棒。其中第三种我不是很支持这么做的，因为这种是需要本地对每张图片进行处理，虽然比前两种带来的离屏渲染稍微好点，但是资源消耗也很大。文章中的第四种方法很好，但是实现方式我不是很喜欢，看她的实现方式是弄了一个图片覆盖上了，不具备通用性。下面我提供一个第四种方式的个人比较喜欢的实践。

这个实践的主要原理是自定义一个透明的view，这个view利用Core Graphic画一个矩形和圆角矩形（或者圆形）的path，然后设置两套path之间的填充色为环境色，就可以了。具体代码如下：

import UIKit

class MaskCornerView: UIView {

    var cornerRadius: CGFloat = 0.0

    var superBackgroundColor = UIColor.white

    // Only override draw() if you perform custom drawing.

    // An empty implementation adversely affects performance during animation.

    override func draw(_ rect: CGRect) {

        // Drawing code

        let shortestEdge = min(self.bounds.width, self.bounds.height)//边长稍短的边

        let radius = max(min((shortestEdge / 2.0), cornerRadius), (shortestEdge / 2.0))//默认半径为稍短边的一半，防止负数或者过大的cornerRadius设置

        let context = UIGraphicsGetCurrentContext()

        //以坐上角为原点，顺时针画矩形的path

        context?.move(to: CGPoint(x: self.bounds.minX, y: self.bounds.minY))

        context?.addLine(to: CGPoint(x: self.bounds.maxX, y: self.bounds.minY))

        context?.addLine(to: CGPoint(x: self.bounds.maxX, y: self.bounds.maxY))

        context?.addLine(to: CGPoint(x: self.bounds.minX, y: self.bounds.maxY))

        context?.addLine(to: CGPoint(x: self.bounds.minX, y: self.bounds.minY))

        context?.closePath()

        //以左上角往右偏移一个半径长度的点为原点，顺时针画圆角矩形

        context?.move(to: CGPoint(x: radius, y: self.bounds.minY))

        context?.addLine(to: CGPoint(x: (self.bounds.maxX - radius), y: self.bounds.minY))

        context?.addArc(tangent1End: CGPoint(x: self.bounds.maxX, y: self.bounds.minY), tangent2End: CGPoint(x: self.bounds.maxX, y: self.bounds.minY + radius), radius: radius)

        context?.addLine(to: CGPoint(x: self.bounds.maxX, y: (self.bounds.maxY - radius)))

        context?.addArc(tangent1End: CGPoint(x: self.bounds.maxX, y: self.bounds.maxY), tangent2End: CGPoint(x: self.bounds.maxX - radius, y: self.bounds.maxY), radius: radius)

        context?.addLine(to: CGPoint(x: radius, y: self.bounds.maxY))

        context?.addArc(tangent1End: CGPoint(x: self.bounds.minX, y: self.bounds.maxY), tangent2End: CGPoint(x: self.bounds.minX, y: self.bounds.maxY - radius), radius: radius)

        context?.addLine(to: CGPoint(x: self.bounds.minX, y: radius))

        context?.addArc(tangent1End: CGPoint(x: self.bounds.minX, y: self.bounds.minY), tangent2End: CGPoint(x: radius, y: self.bounds.minY), radius: radius)

        context?.closePath()

        context?.setFillColor(superBackgroundColor.cgColor)//设置填充色

        context?.fillPath(using: .evenOdd)//设置使用奇偶填充的方式

    }

    override init(frame: CGRect) {

        super.init(frame: frame)

        self.backgroundColor = UIColor.clear

    }

    required init?(coder aDecoder: NSCoder) {

        super.init(coder: aDecoder)

        self.backgroundColor = UIColor.clear

    }

}

代码的主要注释在代码中已经写了。下面主要放一张图展示一下addLine和addArc地方的代码吧。

开始点移动到P1，画直线到P2，以P2-P3-P4的圆角举例，func addArc(tangent1End: CGPoint, tangent2End: CGPoint, radius: CGFloat)的两个参数tangent1End为P3，tangent2End为P4就可以画出这个圆角了（几指明切线的点）。

上面这个MaskCornerView只需要放到你需要制造圆角的view上，并与之等大小就可以了可以配置参数（默认圆形，cornerRadius比较小的时候就是圆角矩形），并且支持IB布局该MaskCornerView。这样在重用的cell里面只是相当于添加了一个view，对性能几乎没有啥影响，所以流畅度很高。不信你写个demo用Instruments看一下就知道了。

下面再附上我当初是用的裁剪图片的方式的代码（添加UIImage的Category就可以了）：

- (UIImage *)compressToSize:(CGSize)viewsize {

    CGFloat imgHWScale = self.size.height / self.size.width;

    CGFloat viewHWScale = viewsize.height/viewsize.width;

    CGRect rect = CGRectZero;

    if (imgHWScale>viewHWScale) {

        rect.size.height = viewsize.width*imgHWScale;

        rect.size.width = viewsize.width;

        rect.origin.x = 0.0f;

        rect.origin.y =  (viewsize.height - rect.size.height)*0.5f;

    } else {

        CGFloat imgWHScale = self.size.width/self.size.height;

        rect.size.width = viewsize.height*imgWHScale;

        rect.size.height = viewsize.height;

        rect.origin.y = 0.0f;

        rect.origin.x = (viewsize.width - rect.size.width)*0.5f;

    }

    UIGraphicsBeginImageContext(viewsize);

    [self drawInRect:rect];

    UIImage *newimg = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return newimg;

}

- (UIImage *)circleImage {

    CGFloat radius = MIN(self.size.width, self.size.height);

    CGSize size = CGSizeZero;

    UIImage *squareImage;

    if (self.size.width == self.size.height) {

        size = CGSizeMake(self.size.width, self.size.width);

        squareImage = self;

    } else {

        size = CGSizeMake(radius, radius);

        squareImage = [self compressToSize:CGSizeMake(radius, radius)];

    }

    //1.开启图片图形上下文:注意设置透明度为非透明

    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);

    //2.开启图形上下文

    CGContextRef ref = UIGraphicsGetCurrentContext();

    //3.绘制圆形区域(此处根据最小边来设置)

    CGFloat x = (self.size.width < self.size.height) ? 0 : ABS(self.size.width - self.size.height) / 2;

    CGFloat y = (self.size.width < self.size.height) ? ABS(self.size.width - self.size.height) / 2 : 0;

    CGRect rect = CGRectMake(x, y, radius, radius);

    CGContextAddEllipseInRect(ref, rect);

    //4.裁剪绘图区域

    CGContextClip(ref);

    //5.绘制图片

    [squareImage drawInRect:rect];

    //6.获取图片

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    //7.关闭图形上下文

    UIGraphicsEndImageContext();

    return image;

}

宗旨就是先把图片弄成正方形的，然后再切圆角。这样特别麻烦，需要把切图的过程放到个其它线程里面，然后图片切好后再获取主线程给UIImageView赋值，而且子线程的开销也比较大。

因为这次内容很简单，就不提供demo了。

参考链接：

[译]绘制中间镂空的图形的方法

 iOS设置shadow*带来的离屏渲染

 iOS设置圆角的四种方法

码农公寓

相关文章