Swift3.0之UIBezierPath和CAShapeLay

首先了解UIBezierPath和CAShapeLayer之间的关系

1.CAShapeLayer继承CALayer,可以使用CALayer的全部属性.
2.CAShapeLayer需要配合贝塞尔曲线使用, CAShapeLayer需要贝塞尔曲线的path
3.使用CAShapeLayer与贝塞尔曲线可以实现不在view的drawRect方法中画出一下想要的图形, drawRect 是属于Core Graphics框架走CPU,比较耗性能. CAShapeLayer属于Core Animation框架,走GPU,动画渲染直接提交给手机GPU.
备注:
drawRect是UIView的方法，重写此方法可以完成绘制图形功能

绘图的关键就是用CAShapeLayer创建的对象去获取UIBezierPath绘制的路径

1.绘制折线图

1.png

代码中有详细备注,这里就不一一赘述

        //创建路径
        let linePath = UIBezierPath()
        //起点
        linePath.move(to: CGPoint.init(x: 30, y: 30))
        //添加其他点
        linePath.addLine(to: CGPoint.init(x: 150, y: 150))
        linePath.addLine(to: CGPoint.init(x: 180, y: 20))
        
        
        //设施路径画布
        let lineShape = CAShapeLayer()
        lineShape.frame = CGRect.init(x: 10, y: 10, width: 350, height: 400)
        //宽度
        lineShape.lineWidth = 2
        //线条之间点的样式
        lineShape.lineJoin = kCALineJoinMiter
        //线条结尾的样式
        lineShape.lineCap = kCALineCapSquare
        //路径颜色
        lineShape.strokeColor = UIColor.red.cgColor
        //获取贝塞尔曲线的路径
        lineShape.path = linePath.cgPath
        //填充色
        lineShape.fillColor = UIColor.clear.cgColor
        //把绘制的图放到layer上
        self.view.layer.addSublayer(lineShape)

2.绘制三角形

2.png

和绘制折线图类似,添加闭合路径的功能即可

        //创建路径
        let linePath = UIBezierPath()
        //起点
        linePath.move(to: CGPoint.init(x: 30, y: 30))
        //添加其他点
        linePath.addLine(to: CGPoint.init(x: 160, y: 160))
        linePath.addLine(to: CGPoint.init(x: 140, y: 50))
        //闭合路径
        linePath.close()
        
        //设施路径画布
        let lineShape = CAShapeLayer()
        lineShape.frame = CGRect.init(x: 0, y: 0, width: 350, height: 400)
        lineShape.lineWidth = 2
        lineShape.lineJoin = kCALineJoinMiter
        lineShape.lineCap = kCALineCapSquare
        lineShape.strokeColor = UIColor.red.cgColor
        lineShape.path = linePath.cgPath
        lineShape.fillColor = UIColor.clear.cgColor
        self.view.layer.addSublayer(lineShape)

3.绘制五角形

3.png

原理和绘制三角形类似,坐标计算好,把路径闭合即可

        //创建路径
        let linePath = UIBezierPath()
        //起点
        linePath.move(to: CGPoint.init(x: 100, y: 0))
        //添加其他点
        linePath.addLine(to: CGPoint.init(x: 200, y: 40))
        linePath.addLine(to: CGPoint.init(x: 160, y: 140))
        linePath.addLine(to: CGPoint.init(x: 40, y: 140))
        linePath.addLine(to: CGPoint.init(x: 0, y: 40))
        
        //闭合路径
        linePath.close()
        
        //设施路径画布
        let lineShape = CAShapeLayer()
        lineShape.frame = CGRect.init(x: 0, y: 0, width: 350, height: 400)
        lineShape.lineWidth = 2
        lineShape.lineJoin = kCALineJoinMiter
        lineShape.lineCap = kCALineCapSquare
        lineShape.strokeColor = UIColor.red.cgColor
        lineShape.path = linePath.cgPath
        lineShape.fillColor = UIColor.clear.cgColor
        self.view.layer.addSublayer(lineShape)

4.绘制圆和椭圆

4.gif

宽度和高度一样就是圆不一样就是椭圆,哈哈,就是这么简单,这里使用了CABasicAnimation添加绘制的动画

        //椭圆
        //        let linePath = UIBezierPath.init(ovalIn: CGRect.init(x: 0, y: 0, width: 260, height: 200))
        //圆
        let linePath = UIBezierPath.init(ovalIn: CGRect.init(x: 0, y: 0, width: 200, height: 200))
        
        let lineShape = CAShapeLayer()
        lineShape.frame = CGRect.init(x: 0, y:0, width: 260, height: 200)
        lineShape.lineWidth = 2
        lineShape.strokeColor = UIColor.red.cgColor
        lineShape.path = linePath.cgPath
        lineShape.fillColor = UIColor.clear.cgColor
        self.view.layer.addSublayer(lineShape)
        //添加动画
        let pathAnimation = CABasicAnimation.init(keyPath: "strokeEnd")
        pathAnimation.duration = 1
        pathAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut)
        pathAnimation.fromValue = 0
        pathAnimation.toValue = 1
        lineShape.add(pathAnimation, forKey: "strokeEndAnimation")

5.绘制矩形

5.png

        //创建路径
        let linePath = UIBezierPath.init(rect: CGRect.init(x: 50, y: 50, width: 200, height: 200))
        
        let shapeLayer = CAShapeLayer()
        shapeLayer.frame = CGRect.init(x: 0, y:0, width: 300, height: 200)
        shapeLayer.path = linePath.cgPath
        shapeLayer.lineWidth = 2
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        self.view.layer.addSublayer(shapeLayer)

6.绘制圆角图形

6.png

有时候需求中会有需要上下圆角,或者某个角使用圆角,原理就是这. byRoundingCorners后面的参数可设置4个方向的角

        //四个角都是圆角
        //        let path = UIBezierPath.init(roundedRect: CGRect.init(x: 50, y: 50, width: 200, height: 200), cornerRadius: 25)
        //可设置某个角是圆角
        let path = UIBezierPath.init(roundedRect: CGRect.init(x: 50, y: 50, width: 200, height: 200), byRoundingCorners: UIRectCorner.topLeft, cornerRadii: CGSize.init(width: 50, height: 0))
        
        let shapeLayer = CAShapeLayer()
        shapeLayer.frame = CGRect.init(x: 0, y:0, width: 300, height: 300)
        shapeLayer.path = path.cgPath
        shapeLayer.lineWidth = 2
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.fillColor = UIColor.orange.cgColor
        self.view.layer.addSublayer(shapeLayer)

有系需要代码的可以点后面的链接下载,本人菜鸟一只欢迎提意见
git地址,点击下载