如何在 CAShapeLayer 的角上绘制 4 条虚线？ [关闭]

Question

我已经圆了矩形：

let rect = UIBezierPath(roundedRect: frame, cornerRadius: cornerRadius)

我需要在这个绘图路径的每个角落添加 4 条虚线

预期结果：

我需要在 swift 5 中添加到这条路径，因为通过这条路径我为视图绘制了通用掩码

我将这条路径用于 CAShapeLayer，我只需要这条破折号用于这个 CAShapeLayer

Answer 1

嘿，所以我决定发疯并为您正在寻找的 UIView 创建一个扩展名。如下：

extension UIView {

    private struct Properties {

        static var _radius: CGFloat = 0.0
        static var _color: UIColor = .red
        static var _strokeWidth: CGFloat = 1.0
        static var _length: CGFloat = 20.0

    }

    private var radius: CGFloat {
        get {
            return Properties._radius
        }
        set {
            Properties._radius = newValue
        }
    }

    private var color: UIColor {
        get {
            return Properties._color
        }
        set {
            Properties._color = newValue
        }
    }

    private var strokeWidth: CGFloat {
        get {
            return Properties._strokeWidth
        }
        set {
            Properties._strokeWidth = newValue
        }
    }

    private var length: CGFloat {
        get {
            return Properties._length
        }
        set {
            Properties._length = newValue
        }
    }

    func drawCorners(radius: CGFloat? = nil, color: UIColor? = nil, strokeWidth: CGFloat? = nil, length: CGFloat? = nil) {
        if let radius = radius {
            self.radius = radius
        }
        if let color = color {
            self.color = color
        }
        if let strokeWidth = strokeWidth {
            self.strokeWidth = strokeWidth
        }
        if let length = length {
            self.length = length
        }
        createTopLeft()
        createTopRight()
        createBottomLeft()
        createBottomRight()
    }

    private func createTopLeft() {
        let topLeft = UIBezierPath()
        topLeft.move(to: CGPoint(x: strokeWidth/2, y: radius+length))
        topLeft.addLine(to: CGPoint(x: strokeWidth/2, y: radius))
        topLeft.addQuadCurve(to: CGPoint(x: radius, y: strokeWidth/2), controlPoint: CGPoint(x: strokeWidth/2, y: strokeWidth/2))
        topLeft.addLine(to: CGPoint(x: radius+length, y: strokeWidth/2))
        setupShapeLayer(with: topLeft)
    }

    private func createTopRight() {
        let topRight = UIBezierPath()
        topRight.move(to: CGPoint(x: frame.width-radius-length, y: strokeWidth/2))
        topRight.addLine(to: CGPoint(x: frame.width-radius, y: strokeWidth/2))
        topRight.addQuadCurve(to: CGPoint(x: frame.width-strokeWidth/2, y: radius), controlPoint: CGPoint(x: frame.width-strokeWidth/2, y: strokeWidth/2))
        topRight.addLine(to: CGPoint(x: frame.width-strokeWidth/2, y: radius+length))
        setupShapeLayer(with: topRight)
    }

    private func createBottomRight() {
        let bottomRight = UIBezierPath()
        bottomRight.move(to: CGPoint(x: frame.width-strokeWidth/2, y: frame.height-radius-length))
        bottomRight.addLine(to: CGPoint(x: frame.width-strokeWidth/2, y: frame.height-radius))
        bottomRight.addQuadCurve(to: CGPoint(x: frame.width-radius, y: frame.height-strokeWidth/2), controlPoint: CGPoint(x: frame.width-strokeWidth/2, y: frame.height-strokeWidth/2))
        bottomRight.addLine(to: CGPoint(x: frame.width-radius-length, y: frame.height-strokeWidth/2))
        setupShapeLayer(with: bottomRight)
    }

    private func createBottomLeft() {
        let bottomLeft = UIBezierPath()
        bottomLeft.move(to: CGPoint(x: radius+length, y: frame.height-strokeWidth/2))
        bottomLeft.addLine(to: CGPoint(x: radius, y: frame.height-strokeWidth/2))
        bottomLeft.addQuadCurve(to: CGPoint(x: strokeWidth/2, y: frame.height-radius), controlPoint: CGPoint(x: strokeWidth/2, y: frame.height-strokeWidth/2))
        bottomLeft.addLine(to: CGPoint(x: strokeWidth/2, y: frame.height-radius-length))
        setupShapeLayer(with: bottomLeft)
    }

    private func setupShapeLayer(with path: UIBezierPath) {
        let shapeLayer = CAShapeLayer()
        shapeLayer.strokeColor = color.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineWidth = strokeWidth
        shapeLayer.path = path.cgPath
        layer.addSublayer(shapeLayer)
    }

}

然后您可以在任何UIView 上使用它。因此，一旦您创建了一个视图，就可以按如下方式使用它：

let myView = UIView(frame: CGRect(x: 50, y: 50, width: 300, height: 300))
myView.drawCorners(radius: 30.0, color: .red, strokeWidth: 10.0, length: 30)

这就是您需要做的所有事情！蓝色背景上的输出如下：