利用CGContext绘图和CAShapeLayer画线

用CGContext绘图

创建CGContext上下文

var context: CGContext?

制造CGContext环境

通过UIView的子类的drawRect:在上下文中绘制，该方法系统已准备好一个cgcontext，并放置在上下文栈顶，rect形参就是context的尺寸大小

override func draw(_ rect: CGRect) {

            //获取上下文

            context = UIGraphicsGetCurrentContext()

            //设置背景透明

            context?.setFillColor((backgroundColor?.cgColor)!)

            //填充大小

            context?.fill(rect)

            //绘制刻度

            setLineMark()

}

绘图

func setLineMark() {

            //给刻度标记绘制不同的颜色

            context?.setStrokeColor(UIColor(red: 1, green: 0, blue: 0, alpha:             0.8).cgColor)

            context?.setLineCap(.square)

            context?.setLineWidth(3)

            context?.strokePath()

            context?.move(to: CGPoint(x: 0 , y: 0))

            context?.addLine(to: CGPoint(x: 100, y: 100))

}

CAShapeLayer画线

创建CAShapeLayer

var eyelinerLayer = CAShapeLayer()

eyelinerLayer.lineWidth = 1 // 线宽

eyelinerLayer.strokeColor = UIColor.red.cgColor //线色

eyelinerLayer.fillColor = UIColor.clear.cgColor //填充色

绘制路径

let path = UIBezierPath()

let pi = CGFloat(M_PI)

path.addArc(withCenter: CGPoint(x: frame.width/2, y: frame.height), radius: 0, startAngle: -pi * ((pi - angle)/pi), endAngle: -pi * (angle/pi), clockwise: true)

path.addArc(withCenter: CGPoint(x: frame.width/2, y: 0), radius: 0, startAngle: pi * (angle/pi), endAngle: pi * ((pi - angle)/pi), clockwise: true)

eyelinerLayer.path = path.cgPath

layer.addSublayer(eyelinerLayer)

效果图：

这里需要注意一点，如果将第二个addArc的startAngle和endAngle兑换：

path.addArc(withCenter: center2!, radius: 0, startAngle: pi * ((pi - angle)/pi), endAngle: pi * (angle/pi), clockwise: true)

效果图：

若将clockwise置为false

path.addArc(withCenter: center2!, radius: 0, startAngle: pi * (angle/pi), endAngle: pi * ((pi - angle)/pi), clockwise: false)

效果图：

兑换的同时，将clockwise置为false：

path.addArc(withCenter: center2!, radius: 0, startAngle: pi * ((pi - angle)/pi), endAngle: pi * (angle/pi), clockwise: false)

效果图：

addArc是添加圆弧曲线的，startAngle和endAngle是起始位置，clockwise为是否是顺时针，而且可以通过上面几个图可以看出，一个path画出来的线是一笔完成的。

除此之外，画线方式还有很多，两点之点画线：

path.move(to: CGPoint(x: 0 , y: 0)) //起始位置

path.addLine(to: CGPoint(x: 100 , y: 100))

创建三次贝尔曲线：

open func addCurve(to endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint)

参数：endPoint->终点

controlPoint1->控制点1

controlPoint2->控制点2

创建二次贝尔曲线：

open func addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint)

虚线：

open func setLineDash(_ pattern: UnsafePointer?, count: Int, phase: CGFloat)

添加动画

创建动画：

let animation = CABasicAnimation(keyPath: "strokeEnd")

animation.fromValue = 0

animation.toValue = 1

animation.duration = 2.0

animation.isRemovedOnCompletion = true

animation.fillMode = kCAFillModeForwards

eyelinerLayer.add(animation, forKey: "kClockAnimation")

如果想要在动画结束后做些什么，需要用到CAAnimationDelegate：

animation.delegate = self

动画结束的回调：

func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {

            //flag动画是否完成

            if flag {

            eyelinerLayer.fillColor = UIColor.white.cgColor

            }

}