带圆角的虚线

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 这意味着您可以让它看起来像破折号在盒子周围移动。

带圆角的虚线

Dashed line with rounded corners

core-graphics

uibezierpath

swift