将 Swift 和 CAShapeLayer() 与遮罩一起使用,当遮罩区域相交时如何避免反转遮罩?
Using Swift and CAShapeLayer() with masking, how can I avoid inverting the mask when masked regions intersect?
这个问题很难回答,但进一步解释情况应该会有所帮助。
使用下面的代码,我实质上是在屏幕上遮盖了一个圆圈,无论我点击什么位置以显示黑色 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
}
}
你问过:
how can I avoid inverting the mask when masked regions intersect?
简而言之,不要使用.evenOdd
填充规则。
您指定了 fillRule
of .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
}
}
导致:
这个问题很难回答,但进一步解释情况应该会有所帮助。
使用下面的代码,我实质上是在屏幕上遮盖了一个圆圈,无论我点击什么位置以显示黑色 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
}
}
你问过:
how can I avoid inverting the mask when masked regions intersect?
简而言之,不要使用.evenOdd
填充规则。
您指定了 fillRule
of .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
}
}
导致: