web-dev-qa-db-ja.com

角が丸い破線

私はこのようなビューの周りに丸い角を持つ破線を描画しようとしています：

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()
    }
}

結果は次のとおりです。

enter image description here

コーナーに問題があることがわかりますが、それを修正する方法はありますか？

更新：@ Jon Roseの使用 answerDashedLineViewは次のようになります：

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
    }
}
swiftcore-graphicsuibezierpath
10
sash

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);

ボーナスとして、lineDashPhaseを含むCAShapeLayerのほとんどすべてのプロパティはアニメート可能です。これは、ダッシュがボックス内を移動しているように見せることができることを意味します。

17
Jon Rose