[英]How to apply multiple masks to UIView
I have a question about how to apply multiple masks to a UIView that already has a mask.我有一个关于如何将多个蒙版应用到已经有蒙版的 UIView 的问题。
The situation:情况:
I have a view with an active mask that creates a hole in its top left corner, this is a template UIView that is reused everywhere in the project.我有一个带有活动蒙版的视图,它在其左上角创建了一个孔,这是一个模板 UIView,在项目中的任何地方都可以重用。 Later in the project I would like to be able to create a second hole but this time in the bottom right corner, this without the need to create a completely new UIView.
在项目的后期,我希望能够创建第二个孔,但这次是在右下角,无需创建全新的 UIView。
The problem:问题:
When I apply the bottom mask, it of course replaces the first one thus removing the top hole ... Is there a way to combine them both?当我应用底面罩时,它当然会取代第一个面罩,从而去除顶孔......有没有办法将它们结合起来? And for that matter to combine any existing mask with a new one?
就此而言,将任何现有面具与新面具结合起来?
Thank you in advance!先感谢您!
Based on @Sharad's answer, I realised that re-adding the view's rect would enable me to combine the original and new mask into one.根据@Sharad 的回答,我意识到重新添加视图的矩形将使我能够将原始蒙版和新蒙版合二为一。
Here is my solution:这是我的解决方案:
func cutCircle(inView view: UIView, withRect rect: CGRect) {
// Create new path and mask
let newMask = CAShapeLayer()
let newPath = UIBezierPath(ovalIn: rect)
// Create path to clip
let newClipPath = UIBezierPath(rect: view.bounds)
newClipPath.append(newPath)
// If view already has a mask
if let originalMask = view.layer.mask,
let originalShape = originalMask as? CAShapeLayer,
let originalPath = originalShape.path {
// Create bezierpath from original mask's path
let originalBezierPath = UIBezierPath(cgPath: originalPath)
// Append view's bounds to "reset" the mask path before we re-apply the original
newClipPath.append(UIBezierPath(rect: view.bounds))
// Combine new and original paths
newClipPath.append(originalBezierPath)
}
// Apply new mask
newMask.path = newClipPath.cgPath
newMask.fillRule = kCAFillRuleEvenOdd
view.layer.mask = newMask
}
This is code I have used in my project to create one circle and one rectangle mask in UIView, you can replace the UIBezierPath
line with same arc code :这是我在我的项目中使用的代码,用于在 UIView 中创建一个圆形和一个矩形蒙版,您可以使用相同的弧线代码替换
UIBezierPath
线:
func createCircleMask(view: UIView, x: CGFloat, y: CGFloat, radius: CGFloat, downloadRect: CGRect){
self.layer.sublayers?.forEach { ($0 as? CAShapeLayer)?.removeFromSuperlayer() }
let mutablePath = CGMutablePath()
mutablePath.addArc(center: CGPoint(x: x, y: y + radius), radius: radius, startAngle: 0.0, endAngle: 2 * 3.14, clockwise: false)
mutablePath.addRect(view.bounds)
let path = UIBezierPath(roundedRect: downloadRect, byRoundingCorners: [.topLeft, .bottomRight], cornerRadii: CGSize(width: 5, height: 5))
mutablePath.addPath(path.cgPath)
let mask = CAShapeLayer()
mask.path = mutablePath
mask.fillRule = kCAFillRuleEvenOdd
mask.backgroundColor = UIColor.clear.cgColor
view.layer.mask = mask
}
Pass your same UIView, it removes previous layers and applies new masks on same UIView.传递相同的 UIView,它会删除之前的图层并在同一个 UIView 上应用新的蒙版。
Here mask.fillRule = kCAFillRuleEvenOdd
is important.这里
mask.fillRule = kCAFillRuleEvenOdd
很重要。 If you notice there are 3 mutablePath.addPath()
functions, what kCAFillRuleEvenOdd
does is, it first creates a hole with the arc then adds Rect of that view's bound and then another mask to create 2nd hole.如果您注意到有 3 个
mutablePath.addPath()
函数, kCAFillRuleEvenOdd
所做的是,它首先用弧创建一个孔,然后添加该视图边界的 Rect,然后添加另一个蒙版以创建第二个孔。
You can do something like the following, if you don't only have "simple shapes" but actual layers from eg other views, like UILabel
or UIImageView
.如果您不仅拥有“简单形状”,而且拥有来自其他视图(如
UILabel
或UIImageView
实际图层,则您可以执行以下操作。
let maskLayer = CALayer()
maskLayer.frame = viewToBeMasked.bounds
maskLayer.addSublayer(self.imageView.layer)
maskLayer.addSublayer(self.label.layer)
viewToBeMasked.bounds.layer.mask = maskLayer
So basically I just create a maskLayer, that contains all the other view's layer as sublayer and then use this as a mask.所以基本上我只是创建一个 maskLayer,它包含所有其他视图的图层作为子图层,然后将其用作蒙版。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.