用CGContext繪圖
創(chuàng)建CGContext上下文
var context: CGContext?
制造CGContext環(huán)境
通過(guò)UIView的子類的drawRect:在上下文中繪制及刻,該方法系統(tǒng)已準(zhǔn)備好一個(gè)cgcontext抒抬,并放置在上下文棧頂早芭,rect形參就是context的尺寸大小
override func draw(_ rect: CGRect) {
????????????//獲取上下文
????????????context = UIGraphicsGetCurrentContext()
????????????//設(shè)置背景透明
????????????context?.setFillColor((backgroundColor?.cgColor)!)
????????????//填充大小
????????????context?.fill(rect)
????????????//繪制刻度
????????????setLineMark()
}
繪圖
func setLineMark() {
????????????//給刻度標(biāo)記繪制不同的顏色
????????????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畫線
創(chuàng)建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)
效果圖:
這里需要注意一點(diǎn)轩缤,如果將第二個(gè)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)
效果圖:
兌換的同時(shí)呜象,將clockwise置為false:
path.addArc(withCenter: center2!, radius: 0, startAngle: pi * ((pi - angle)/pi), endAngle: pi * (angle/pi), clockwise: false)
效果圖:
addArc是添加圓弧曲線的滓彰,startAngle和endAngle是起始位置,clockwise為是否是順時(shí)針,而且可以通過(guò)上面幾個(gè)圖可以看出看尼,一個(gè)path畫出來(lái)的線是一筆完成的递鹉。
除此之外,畫線方式還有很多藏斩,兩點(diǎn)之點(diǎn)畫線:
path.move(to: CGPoint(x: 0 , y: 0)) //起始位置
path.addLine(to: CGPoint(x: 100 , y: 100))
創(chuàng)建三次貝爾曲線:
open func addCurve(to endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint)
參數(shù):endPoint->終點(diǎn)
controlPoint1->控制點(diǎn)1
controlPoint2->控制點(diǎn)2
創(chuàng)建二次貝爾曲線:
open func addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint)
虛線:
open func setLineDash(_ pattern: UnsafePointer?, count: Int, phase: CGFloat)
添加動(dòng)畫
創(chuàng)建動(dòng)畫:
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")
如果想要在動(dòng)畫結(jié)束后做些什么躏结,需要用到CAAnimationDelegate:
animation.delegate = self
動(dòng)畫結(jié)束的回調(diào):
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
????????????//flag動(dòng)畫是否完成
????????????if flag {
????????????eyelinerLayer.fillColor = UIColor.white.cgColor
????????????}
}