如何在CAShapeLayer的角上绘制4条虚线?

时间:2019-04-25 09:05:18

标签: ios swift iphone core-graphics

我对rect取整:

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

我需要在此绘制路径的每个角上添加4条虚线

预期结果:

enter image description here

我需要在swift 5中添加到此路径,因为通过此路径,我为视图绘制了常规蒙版

我将此路径用于CAShapeLayer,而我只需要为此破折号

1 个答案:

答案 0 :(得分: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)

这就是您需要做的!蓝色背景上的输出如下:

enter image description here