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

因为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地方的代码吧。
MaskCornerView
开始点移动到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设置圆角的四种方法

posted @ 2017-11-01 18:30 ysk_china 阅读(2000) 评论(0) 编辑收藏举报

刷新页面返回顶部

ysk_china

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

公告