底部獲取demo鏈接
先看看效果
jygank.gif
第一步 圓弧繪制
圓弧部分我們用一個簡單的貝塞爾曲線就可以完成萨咕，在view類里的drawRect繪制
//漸變layer
var gradientLayer:CAGradientLayer?
//其實百分比
let start : CGFloat = 0.15
//結束百分比
let end : CGFloat = 0.85
//刻度數(shù)組
let labelArray = ["0","差","20","較差","40","一般","60","良好","80","優(yōu)秀","100"]
//刻度數(shù)
let lineNum = 100
//繪制貝塞爾曲線的圓心统抬，半徑，起始角度危队，結束角度等
let circlePath = UIBezierPath.init(arcCenter: CGPoint.init(x: rect.size.width/2, y: rect.size.height/2), radius: (rect.size.width - lineWidth)/2, startAngle: CGFloat(Double.pi / 4 + Double.pi / 2), endAngle: CGFloat(Double.pi / 4), clockwise: true)
//繪制半圓layer
let bgLayer = CAShapeLayer.init()
bgLayer.frame = self.bounds
bgLayer.fillColor = UIColor.clear.cgColor
bgLayer.lineWidth = lineWidth
bgLayer.strokeColor = UIColor.lightGray.cgColor
bgLayer.strokeStart = start
bgLayer.strokeEnd = end
bgLayer.lineCap = CAShapeLayerLineCap.round
bgLayer.path = circlePath.cgPath
self.layer.addSublayer(bgLayer)
通過上一步我們已經有了一個灰色的半圓弧形了
灰色半圓
第二步 繪制漸變
//繪制漸變layer
gradientLayer = CAGradientLayer.init()
let GradientLayer = CAGradientLayer.init()
GradientLayer.frame = CGRect.init(x: 0, y: 0, width: rect.size.width, height: rect.size.height)
GradientLayer.colors = [UIColor.yellow.cgColor,UIColor.orange.cgColor,UIColor.red.cgColor]
GradientLayer.locations = [0,0.6]
GradientLayer.startPoint = CGPoint.init(x: 0.2, y: 0)
GradientLayer.endPoint = CGPoint.init(x: 1, y: 0)
gradientLayer?.addSublayer(GradientLayer)
gradientLayer?.mask = bgLayer;
self.layer.addSublayer(gradientLayer!)
完成漸變的半圓弧形
漸變半圓
第三步 添加刻度文字以及指針
func creatLabel(title:String,Score:CGFloat) {
let label = UILabel.init(frame: CGRect.init(x: 0, y: 0, width: 23, height: 15))
label.font = UIFont.systemFont(ofSize: 10)
label.textAlignment = NSTextAlignment.center
label.text = title
label.textColor = UIColor.black
self .addSubview(label)
let size = self.frame.size;
//DEGREES_TO_RADIANS(angle) \((angle) / 180.0 * M_PI)
let centerX = size.width/2 - (size.width/2 - 24)*cos(Score*CGFloat(200/self.labelArray.count)/180.0*CGFloat.pi)
let centerY = size.width/2 - (size.width/2 - 24)*sin(Score*CGFloat(200/self.labelArray.count)/180.0*CGFloat.pi)
label.center = CGPoint.init(x: centerX, y: centerY)
let endAngle = Score*CGFloat(200/self.labelArray.count)-90 //這個90是斗出來的聪建。。
label.transform = CGAffineTransform.init(rotationAngle: (endAngle/180.0*CGFloat.pi))
}
//在init 方法通過循環(huán)創(chuàng)建label
override init(frame: CGRect) {
super.init(frame: frame)
let imageWH:CGFloat = 64
let PointerImageView = UIImageView.init(frame: CGRect.init(x: (frame.size.width - imageWH)/2, y: (frame.size.height - imageWH)/2, width: imageWH, height: imageWH))
PointerImageView.image = UIImage.init(named: "zhizhen")
self .addSubview(PointerImageView)
PointerImageView.backgroundColor = UIColor.clear
//0 0 是左上 1 1 是右下 錨點
PointerImageView.layer.anchorPoint = CGPoint.init(x: 0.5, y: 0.8)
//根據(jù)錨點旋轉
PointerImageView.transform = CGAffineTransform.init(rotationAngle: CGFloat(CGFloat.pi * -0.5) + CGFloat(CGFloat.pi)*0.9)
//0.9是百分比 90%
for i in 0..<self.labelArray.count {
self.creatLabel(title: self.labelArray[i], Score: CGFloat(i))
}
}
看看效果
指針和文字
第四步 添加刻度
//在creatlabel下面循環(huán)
for i in 0...lineNum {
self.creatLine(i: i)
}
func creatLine(i:Int) {
let 刻度 = lineNum
//每個的角度
let perAngle = CGFloat.pi / CGFloat(刻度)
//起始角度
let startAngel = CGFloat(CGFloat.pi + perAngle * CGFloat(i))
//結束角度
let endAngel = startAngel + perAngle/5;
//繪制路徑
let tickPath = UIBezierPath.init(arcCenter: CGPoint.init(x: self.frame.size.width/2, y: self.frame.size.height/2), radius: 90, startAngle: startAngel, endAngle: endAngel, clockwise: true)
let perLayer = CAShapeLayer.init()
//每五個來一個長刻度
if i%5 == 0 {
perLayer.strokeColor = UIColor.blue.cgColor
perLayer.lineWidth = 10
}else{
perLayer.strokeColor = UIColor.lightGray.cgColor
perLayer.lineWidth = 5
}
perLayer.path = tickPath.cgPath
self.layer .addSublayer(perLayer)
}
大功告成茫陆！
完成
