使用Swift和CAShapeLayer()进行掩码操作时，如何避免在掩码区域相交时反转掩码？

Question

使用Swift和CAShapeLayer()进行掩码操作时，如何避免在掩码区域相交时反转掩码？

3

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

使用下面的代码，我基本上在屏幕上任何位置点击时都会遮盖一个圆形，以显示黑色UIView下面的内容。每当我点击时，我记录CGPoint并将其存储在数组中以跟踪被点击的位置。对于每次后续点击，我都会删除黑色UIView，并重新创建我正在跟踪的CGPoint数组中的每个已点击的点，以创建包括所有先前点的新掩码。

结果类似于这样：

我相信你已经看出我在问什么了...我怎样才能避免口罩在圆圈相交的地方翻转？感谢你的帮助！

以下是我的代码供参考：

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
        }
}

- Justin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob · Accepted Answer

您的问题是：

如何避免掩膜相交时反转掩膜？

简而言之，不要使用.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
    }
}

导致结果：