使用CAShapeLayer绘制一条线

Question

我想展示一条像这样的线：

这是我的代码：

import UIKit

@IBDesignable
class ProgressView: UIView {

    let π = CGFloat(M_PI)
    var levelProgress: CGFloat = 0.0 {
        didSet {
            self.fgLayer.strokeEnd = levelProgress
        }
    }

    let bgLayer = CAShapeLayer()
    let fgLayer = CAShapeLayer()

    @IBInspectable var bgColor: UIColor = UIColor.black.withAlphaComponent(0.3) {
        didSet {
            configure()
        }
    }

    @IBInspectable var fgColor: UIColor = UIColor.white {
        didSet {
            configure()
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        setup()
        configure()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()

        setup()
        configure()
    }

    func setup() {
        bgLayer.lineWidth = 4.0
        bgLayer.fillColor = nil
        bgLayer.strokeEnd = 1
        layer.addSublayer(bgLayer)
        fgLayer.lineWidth = 4.0
        fgLayer.fillColor = nil
        fgLayer.strokeEnd = 0.0
        layer.addSublayer(fgLayer)
    }

    func configure() {
        bgLayer.strokeColor = bgColor.cgColor
        fgLayer.strokeColor = fgColor.cgColor
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        setupShapeLayer(shapeLayer: bgLayer)
        setupShapeLayer(shapeLayer: fgLayer)
    }

    private func setupShapeLayer(shapeLayer: CAShapeLayer) {
        shapeLayer.frame = self.bounds
        let linePath = UIBezierPath()
        linePath.move(to: self.frame.origin)
        linePath.addLine(to: CGPoint(x: self.frame.origin.x + self.frame.width, y: self.frame.origin.y))
        shapeLayer.path = linePath.cgPath
    }

}

但是运行后，它没有显示任何内容。

- Khuong

---

你已经编写了创建线条的代码，但是你是否将其添加为UIView的子视图层？ - Jitendra Modi

不需要了，我已经添加了。 - Twitter khuong291

Answer 1

问题在于设置了错误的UIBezierPath起始点和结束点。应该像这样设置：

private func setupShapeLayer(shapeLayer: CAShapeLayer) {
    shapeLayer.frame = self.bounds
    let linePath = UIBezierPath()
    linePath.move(to: CGPoint(x: 0, y: 0))
    linePath.addLine(to: CGPoint(x: self.frame.width, y: 0))
    shapeLayer.path = linePath.cgPath
}

- Khuong