这个问题很难用语言表达,但进一步解释情况应该会有所帮助。
使用下面的代码,我基本上是在屏幕上的任何地方屏蔽一个圆圈,以显示黑色 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
}
}
答案 0 :(得分:2)
你问:
<块引用>当遮罩区域相交时,如何避免反转遮罩?
简而言之,不要使用 .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
}
}
结果: