CALayer有透明的孔洞

我有一个简单的视图（图片的左侧），我需要创build某种叠加（图片的右侧）到这个视图。 这个覆盖层应该有一些不透明的，所以下面的视图仍然是部分可见的。 最重要的是，这个覆盖层的中间应该有一个圆孔，所以它不会覆盖视图的中心（见下图）。

我可以很容易地创build一个这样的圈子：

int radius = 20; //whatever CAShapeLayer *circle = [CAShapeLayer layer]; circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0,radius,radius) cornerRadius:radius].CGPath; circle.position = CGPointMake(CGRectGetMidX(view.frame)-radius, CGRectGetMidY(view.frame)-radius); circle.fillColor = [UIColor clearColor].CGColor; 

而像这样的“完整”矩形覆盖：

 CAShapeLayer *shadow = [CAShapeLayer layer]; shadow.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, view.bounds.size.width, view.bounds.size.height) cornerRadius:0].CGPath; shadow.position = CGPointMake(0, 0); shadow.fillColor = [UIColor grayColor].CGColor; shadow.lineWidth = 0; shadow.opacity = 0.5; [view.layer addSublayer:shadow]; 

但我不知道如何将这两层结合起来，从而创造出我想要的效果。 任何人？ 我已经尝试了一切…非常感谢您的帮助！

Answer 1

我可以用Jon Steinmetz的build议解决这个问题。 如果有人关心，这是最后的解决scheme：

 int radius = myRect.size.width; UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.mapView.bounds.size.width, self.mapView.bounds.size.height) cornerRadius:0]; UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius]; [path appendPath:circlePath]; [path setUsesEvenOddFillRule:YES]; CAShapeLayer *fillLayer = [CAShapeLayer layer]; fillLayer.path = path.CGPath; fillLayer.fillRule = kCAFillRuleEvenOdd; fillLayer.fillColor = [UIColor grayColor].CGColor; fillLayer.opacity = 0.5; [view.layer addSublayer:fillLayer]; 

对于Swift 3.x：

 let radius = myRect.size.width let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.mapView.bounds.size.width, height: self.mapView.bounds.size.height), cornerRadius: 0) let circlePath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 2 * radius, height: 2 * radius), cornerRadius: radius) path.append(circlePath) path.usesEvenOddFillRule = true let fillLayer = CAShapeLayer() fillLayer.path = path.cgPath fillLayer.fillRule = kCAFillRuleEvenOdd fillLayer.fillColor = Color.background.cgColor fillLayer.opacity = 0.5 view.layer.addSublayer(fillLayer) 

Answer 2

要创build这种效果，我发现创build覆盖屏幕的整个视图最简单，然后使用图层和UIBezierPaths减去屏幕的一部分。 对于Swift实现：

 // Create a view filling the screen. let overlay = UIView(frame: CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height)) // Set a semi-transparent, black background. overlay.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.85) // Create the initial layer from the view bounds. let maskLayer = CAShapeLayer() maskLayer.frame = overlay.bounds maskLayer.fillColor = UIColor.blackColor().CGColor // Create the frame for the circle. let radius: CGFloat = 50.0 let rect = CGRectMake( CGRectGetMidX(overlay.frame) - radius, CGRectGetMidY(overlay.frame) - radius, 2 * radius, 2 * radius) // Create the path. let path = UIBezierPath(rect: overlay.bounds) maskLayer.fillRule = kCAFillRuleEvenOdd // Append the circle to the path so that it is subtracted. path.appendPath(UIBezierPath(ovalInRect: rect)) maskLayer.path = path.CGPath // Set the mask of the view. overlay.layer.mask = maskLayer // Add the view so it is visible. self.view.addSubview(overlay) 

我testing了上面的代码，这里是结果：

我向CocoaPods添加了一个库，它将上面的许多代码抽象出来，并允许您轻松地创build带有矩形/圆形孔的覆盖图，从而允许用户与覆盖图之后的视图进行交互。 我用它为我们的一个应用程序创build了这个教程：

该库被称为TAOverlayView ，在Apache 2.0下是开源的。 希望对你有帮助！

Answer 3

我采取了与animal_chin类似的方法，但我更直观，所以我使用sockets和自动布局将其大部分设置在Interface Builder中。

这是我在Swift中的解决scheme

  //shadowView is a UIView of what I want to be "solid" var outerPath = UIBezierPath(rect: shadowView.frame) //croppingView is a subview of shadowView that is laid out in interface builder using auto layout //croppingView is hidden. var circlePath = UIBezierPath(ovalInRect: croppingView.frame) outerPath.usesEvenOddFillRule = true outerPath.appendPath(circlePath) var maskLayer = CAShapeLayer() maskLayer.path = outerPath.CGPath maskLayer.fillRule = kCAFillRuleEvenOdd maskLayer.fillColor = UIColor.whiteColor().CGColor shadowView.layer.mask = maskLayer 

Answer 4

接受的解决schemeSwift 3.0兼容

 let radius = myRect.size.width let path = UIBezierPath(roundedRect: CGRect(x: 0.0, y: 0.0, width: self.mapView.bounds.size.width, height: self.mapView.bounds.size.height), cornerRadius: 0) let circlePath = UIBezierPath(roundedRect: CGRect(x: 0.0, y: 0.0, width: 2.0*radius, height: 2.0*radius), cornerRadius: radius) path.append(circlePath) path.usesEvenOddFillRule = true let fillLayer = CAShapeLayer() fillLayer.path = path.cgPath fillLayer.fillRule = kCAFillRuleEvenOdd fillLayer.fillColor = UIColor.gray.cgColor fillLayer.opacity = 0.5 view.layer.addSublayer(fillLayer) 

Answer 5

代码Swift 2.0兼容

从@animal_inch的答案开始，我编写了一个小实用程序类，希望它会升值：

 import Foundation import UIKit import CoreGraphics /// Apply a circle mask on a target view. You can customize radius, color and opacity of the mask. class CircleMaskView { private var fillLayer = CAShapeLayer() var target: UIView? var fillColor: UIColor = UIColor.grayColor() { didSet { self.fillLayer.fillColor = self.fillColor.CGColor } } var radius: CGFloat? { didSet { self.draw() } } var opacity: Float = 0.5 { didSet { self.fillLayer.opacity = self.opacity } } /** Constructor - parameter drawIn: target view - returns: object instance */ init(drawIn: UIView) { self.target = drawIn } /** Draw a circle mask on target view */ func draw() { guard (let target = target) else { print("target is nil") return } var rad: CGFloat = 0 let size = target.frame.size if let r = self.radius { rad = r } else { rad = min(size.height, size.width) } let path = UIBezierPath(roundedRect: CGRectMake(0, 0, size.width, size.height), cornerRadius: 0.0) let circlePath = UIBezierPath(roundedRect: CGRectMake(size.width / 2.0 - rad / 2.0, 0, rad, rad), cornerRadius: rad) path.appendPath(circlePath) path.usesEvenOddFillRule = true fillLayer.path = path.CGPath fillLayer.fillRule = kCAFillRuleEvenOdd fillLayer.fillColor = self.fillColor.CGColor fillLayer.opacity = self.opacity self.target.layer.addSublayer(fillLayer) } /** Remove circle mask */ func remove() { self.fillLayer.removeFromSuperlayer() } } 

那么，无论在你的代码中：

 let circle = CircleMaskView(drawIn: <target_view>) circle.opacity = 0.7 circle.draw()