用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
}
}