iOS 带刻度，渐变，圆弧的刻度尺

底部获取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..

看看效果

指针和文字

第四步 添加刻度

//在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)
        
    }

大功告成！

完成

demo地址:https://github.com/PZXforXcode/PZXInstrumentView