使用带有遮罩的 Swift 和 CAShapeLayer()，如何在遮罩区域相交时避免反转遮罩？

如何解决使用带有遮罩的 Swift 和 CAShapeLayer()，如何在遮罩区域相交时避免反转遮罩？

这个问题很难用语言表达，但进一步解释情况应该会有所帮助。

使用下面的代码，我基本上是在屏幕上的任何地方屏蔽一个圆圈，以显示黑色 UIView 下方的内容。当我点击时，我将 CGPoint 记录在一个数组中以跟踪点击的位置。对于我随后的每一次点击，我都会移除黑色的 UIView 并从我正在跟踪的 CGPoints 数组中重新创建每个点击的点，以创建一个包含所有先前点的新蒙版。

结果是这样的：

我相信你已经知道我在问什么了......我怎样才能避免在圆圈相交的地方遮罩反转？感谢您的帮助！

这是我的代码供参考：

class MiniGameShadOViewController: UIViewController {
    
    //MARK: - DECLARATIONS
 
    var revealRadius : CGFloat = 50
    var tappedAreas : [CGPoint] = []

    //Objects
    @IBOutlet var shadedRegion: UIView!
    
    //Gesture Recognizers
    @IBOutlet var tapToReveal: UITapGestureRecognizer!
    
    

    //MARK: - VIEW STATES

    override func viewDidLoad() {
        super.viewDidLoad()

    }
    
  
    //MARK: - USER INTERACTIONS
    @IBAction func regionTapped(_ sender: UITapGestureRecognizer) {
        
        let tappedPoint = sender.location(in: view)
        
        tappedAreas.append(tappedPoint) //Hold a list of all previously tapped points
       
        //Clean up old overlays before adding the new one
        for subview in shadedRegion.subviews {
            if subview.accessibilityIdentifier != "Number" {subview.removeFromSuperview()}
        }
            //shadedRegion.layer.mask?.removeFromSuperlayer()
        
        createOverlay()
    }

    
    //MARK: - FUNCTIONS
    
    func createOverlay(){
        
        //Create the shroud that covers the orbs on the screen
        let overlayView = UIView(frame: shadedRegion.bounds)
            overlayView.alpha = 1
            overlayView.backgroundColor = UIColor.black
            overlayView.isUserInteractionEnabled = false
        shadedRegion.addSubview(overlayView)
        
        let path = CGMutablePath()
        
        //Create the box that represents the inverse/negative area relative to the circles
        path.addRect(CGRect(origin: .zero,size: overlayView.frame.size))

        //For each point tapped so far,create a circle there
        for point in tappedAreas {
            path.addArc(center: point,radius: revealRadius,startAngle: 0.0,endAngle: 2.0 * .pi,clockwise: false)
            path.closeSubpath() //This is required to prevent all circles from being joined together with lines
          }
        
            //Fill each of my circles
            let maskLayer = CAShapeLayer()
                maskLayer.backgroundColor = UIColor.black.cgColor
                maskLayer.path = path;
                maskLayer.fillRule = .evenOdd
            
            //Cut out the circles inside that box
            overlayView.layer.mask = maskLayer
            overlayView.clipsToBounds = true
        }
}

解决方法

你问：

当遮罩区域相交时，如何避免反转遮罩？

简而言之，不要使用 .evenOdd 填充规则。

---

您指定了 fillRule 的 .evenOdd。这导致要反转的路径的交叉点。这是一个带有遮罩的红色视图，该遮罩由一条路径组成，该路径具有两个带有 .evenOdd 规则的重叠圆弧：

如果您使用 .nonZero（巧合的是，这是形状图层的默认填充规则），它们将不会相互反转：

---

例如

class ViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!
    
    var maskLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.white.cgColor
        return shapeLayer
    }()

    var points: [CGPoint] = [] // this isn't strictly necessary,but just in case you want an array of the points that were tapped
    var path = UIBezierPath()

    override func viewDidLoad() {
        super.viewDidLoad()
        imageView.layer.mask = maskLayer
    }

    @IBAction func handleTapGesture(_ gesture: UITapGestureRecognizer) {
        let point = gesture.location(in: gesture.view)
        points.append(point)

        path.move(to: point)
        path.addArc(withCenter: point,radius: 40,startAngle: 0,endAngle: .pi * 2,clockwise: true)

        maskLayer.path = path.cgPath
    }
}

结果：