带圆角的虚线

Question

我试图在这样的视图周围绘制带圆角的虚线:

class DashedLineView: UIView {

    override func draw(_ rect: CGRect) {

        let path = UIBezierPath(roundedRect: rect, cornerRadius: 8)

        UIColor.clear.setFill()
        path.fill()

        UIColor.red.setStroke()
        path.lineWidth = 3

        let dashPattern : [CGFloat] = [3, 3]
        path.setLineDash(dashPattern, count: 2, phase: 0)
        path.stroke()
    }
}

结果是:

你可以看到角落有问题,任何想法如何修复它？

更新: 使用@Jon Rose 答案 DashedLineView现在看起来像这样:

class DashedLineView: UIView {

    private let borderLayer = CAShapeLayer()

    override func awakeFromNib() {

        super.awakeFromNib()

        borderLayer.strokeColor = UIColor.red.cgColor
        borderLayer.lineDashPattern = [3,3]
        borderLayer.backgroundColor = UIColor.clear.cgColor
        borderLayer.fillColor = UIColor.clear.cgColor

        layer.addSublayer(borderLayer)
    }

    override func draw(_ rect: CGRect) {

        borderLayer.path = UIBezierPath(roundedRect: rect, cornerRadius: 8).cgPath
    }
}

Answer 1

我在使用CAShapeLayer方面有很好的经验.例如:

let rect = CGRect.init(origin: CGPoint.init(x: 20, y: 100), size: CGSize.init(width: 200, height: 100))
let layer = CAShapeLayer.init()
let path = UIBezierPath(roundedRect: rect, cornerRadius: 8)
layer.path = path.cgPath;
layer.strokeColor = UIColor.red.cgColor;
layer.lineDashPattern = [3,3];
layer.backgroundColor = UIColor.clear.cgColor;
layer.fillColor = UIColor.clear.cgColor;
self.view.layer.addSublayer(layer);

作为奖励,几乎所有CAShapeLayer的属性都是可动画的lineDashPhase,这意味着你可以让它看起来像破折号在盒子周围移动.