如何使用貝塞爾曲線路徑剪切UIView？

Question

我不太確定要理解UIBezierPath應該如何工作。

我在屏幕中間添加了一個簡單的UIView ，我想通過在其圖層上添加遮罩來對其進行裁剪。 我試了一下，以為我會在視圖中間看到像洛杉磯這樣的東西：

override func viewDidLoad() {
    super.viewDidLoad()
    viewToClip.backgroundColor = .white
    let bezierPath = UIBezierPath()
    bezierPath.move(to: viewToClip.center)
    bezierPath.addLine(to: CGPoint(x: viewToClip.center.x - 5, y: viewToClip.center.y))
    bezierPath.addLine(to: CGPoint(x: viewToClip.center.x, y: viewToClip.center.y - 5))
    bezierPath.addLine(to: CGPoint(x: viewToClip.center.x + 5, y: viewToClip.center.y))
    bezierPath.addLine(to: CGPoint(x: viewToClip.center.x, y: viewToClip.center.y + 5))
    bezierPath.close()
    let testLayer = CAShapeLayer()
    testLayer.path = bezierPath.cgPath
    viewToClip.layer.mask = testLayer
}

但是，相反，視圖只是從屏幕上消失了。 我究竟做錯了什么？

謝謝你的幫助。

Answer 1

你能試一下嗎

import UIKit

class bb: UIView {

   var once:Bool = true 

     override func draw(_ rect: CGRect) {

      if(once)
      {
        once = false
        self.backgroundColor = .white
        let bezierPath = UIBezierPath()
        let cen = CGPoint.init(x: self.bounds.size.width/2, y: self.bounds.size.height/2)
        bezierPath.move(to: cen)
        bezierPath.addLine(to: CGPoint(x: cen.x - 5, y: cen.y))
        bezierPath.addLine(to: CGPoint(x: cen.x, y: cen.y - 5))
        bezierPath.addLine(to: CGPoint(x: cen.x + 5, y: cen.y))
        bezierPath.addLine(to: CGPoint(x: cen.x, y: cen.y + 5))
        bezierPath.close()
        let testLayer = CAShapeLayer()
        testLayer.path = bezierPath.cgPath
        testLayer.lineWidth = 1.0

        testLayer.strokeColor = UIColor.blue.cgColor
        testLayer.fillColor = UIColor.green.cgColor
        self.layer.addSublayer(testLayer)
      }        

}