底部获取demo链接
先看看效果
jygank.gif
第一步 圆弧绘制
圆弧部分我们用一个简单的贝塞尔曲线就可以完成，在view类里的drawRect绘制
//渐变layer
var gradientLayer:CAGradientLayer?
//其实百分比
let start : CGFloat = 0.15
//结束百分比
let end : CGFloat = 0.85
//刻度数组
let labelArray = ["0","差","20","较差","40","一般","60","良好","80","优秀","100"]
//刻度数
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 方法通过循环创建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)
//根据锚点旋转
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下面循环
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)
}
大功告成！
完成
