如何将锯齿形边框添加到圆形图像视图

时间:2018-09-19 07:08:11

标签: swift swift4 calayer uibezierpath cashapelayer

我有一个图像视图,需要像图像一样向其添加锯齿形边框

Image wih zigzag border

我该如何实现? 感谢您的帮助。

谢谢 Chakshu Arora

1 个答案:

答案 0 :(得分:3)

使用直线的简单示例(曲线更加复杂,如果需要,我建议在绘图程序中创建蒙版!)。

此代码在情节提要中假定使用UIImageView ...

class DemoViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setImageMask()
    }

    func setImageMask() {

        // Set the center and radius (pure circle rather than rectangle)
        let center = CGPoint(x: imageView.bounds.midX, y: imageView.bounds.midY)
        let radius = min(imageView.bounds.midX, imageView.bounds.midY)

        // Inset radius is the amount that the inner points are inset by
        let insetRadius: CGFloat = radius * 0.85

        // Calculate the segment arc sizes
        let numberOfPoints = 17
        let segmentArcSize = 360.0 / CGFloat(numberOfPoints)
        let arcMid = segmentArcSize / 2.0

        // Start at the top of the circle, but subtract half an arc so the outer point is at the top
        var angle = -90.0 - arcMid

        // Create the path
        let path = UIBezierPath()

        // Move to the inner starting point
        let startPoint = CGPoint(x: center.x + insetRadius * cos(angle.toRadians()) , y: center.y + insetRadius * sin(angle.toRadians()))
        path.move(to: startPoint)

        // Loop and draw the jagged points around the circlw
        for _ in 0 ..< numberOfPoints {

            // Outer point
            let midAngle = angle + arcMid
            let midPoint = CGPoint(x: center.x + radius * cos(midAngle.toRadians()), y: center.y + radius * sin(midAngle.toRadians()))
            path.addLine(to: midPoint)

            // Inner point
            let endAngle = angle + segmentArcSize
            let endPoint = CGPoint(x: center.x + insetRadius * cos(endAngle.toRadians()) , y: center.y + insetRadius * sin(endAngle.toRadians()))
            path.addLine(to: endPoint)
            angle += segmentArcSize
        }

        // End drawing
        path.close()

        // Mask the image view
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        imageView.layer.mask = mask
    }

}


extension CGFloat {

    // Convert degrees to radians

    func toRadians() -> CGFloat {
        return self * CGFloat.pi / 180.0
    }
}

enter image description here