具有进度的自定义进度视图

Question

我正在尝试创建以下进度视图。

我已经编写了以下代码来制作此视图，

class SeggyProgressView: UIView {

    //--------------------------------------------------
    // MARK:- Variables
    //--------------------------------------------------

    var arrPointsRange                  = [0, 500, 1000, 1500, 2000, 2500, 3000]
    var currenPoint                     = 1586


    //--------------------------------------------------
    // MARK:- Init Methods
    //--------------------------------------------------

    init() {
        super.init(frame: .zero)
        self.setupView()
    }

    //--------------------------------------------------

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setupView()
    }

    //--------------------------------------------------

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupView()
    }


    //--------------------------------------------------
    // MARK:- Custom Methods
    //--------------------------------------------------

    func setupView() {

        let path = UIBezierPath()

        // Add first point to x=10 and y=1/4 of view
        let x: CGFloat = 50
        var lineYPoint = self.bounds.height / 4

        // Add starting point
        path.move(to: CGPoint(x: x, y: lineYPoint))

        // Calculate line width
        let lineWidth = (self.bounds.width - (x * 2) - CGFloat(10 * (self.arrPointsRange.count - 2))) / CGFloat(self.arrPointsRange.count - 2)

        // Keep it to store x value of
        var lineXPoint = lineWidth

        // Enumerated on point range to draw above lines and haf circle
        for (index, _) in arrPointsRange.enumerated() {

            if index < (self.arrPointsRange.count - 2) {

                lineXPoint += lineWidth

                path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))

                let arcCenterX = lineXPoint + 10

                path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 8, startAngle: CGFloat(180.0).toRadians(), endAngle: CGFloat(0.0).toRadians(), clockwise: true)
            }
        }

        lineXPoint += lineWidth

        // Draw line line for above
        path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))

        var arcCenterX = lineXPoint + 10

        // draw full circle
        path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 10, startAngle: CGFloat(210.0).toRadians(), endAngle: CGFloat(150.0).toRadians(), clockwise: true)

        lineYPoint += 10

        // Enumerate to draw below line and half circle
        for (index, _) in arrPointsRange.enumerated() {

            if index < (self.arrPointsRange.count - 2) {

                lineXPoint -= lineWidth

                path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))

                let arcCenterX = lineXPoint - 10

                path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 8, startAngle: CGFloat(0.0).toRadians(), endAngle: CGFloat(180.0).toRadians(), clockwise: true)
            }
        }

        lineXPoint -= lineWidth

        // Draw first below line
        path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))

        arcCenterX = lineXPoint - 10

        let y = lineYPoint - 5

        // Draw first full circle
        path.addArc(withCenter: CGPoint(x: arcCenterX, y: y), radius: 10, startAngle: CGFloat(30).toRadians(), endAngle: CGFloat(300).toRadians(), clockwise: true)

        path.close()

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.strokeColor = UIColor.darkGray.cgColor
        shapeLayer.lineWidth = 3
        shapeLayer.fillColor = UIColor.orange.cgColor

        self.layer.addSublayer(shapeLayer)
    }
}


extension CGFloat {
    func toRadians() -> CGFloat {
        return self * CGFloat(Double.pi) / 180.0
    }
}

但是我不能完全按照上面的方法做，我有以下输出。

有人知道如何解决此问题吗？