如何在视野中切出一个径向渐变的孔

我有一个透明的光孔视图，一个视图覆盖超级视图，并且在封面视图中有一个孔渐变圆形视图，超级视图仍然可见。 我不知道实现渐变光孔视图，任何人都可以帮助我

编辑 ============

我尝试将封面视图添加到全屏，封面视图背景颜色清晰。并将自定义CALayer添加到封面视图图层作为子图层。

封面视图实现：

@implementation CoverView

- (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.backgroundColor = [UIColor clearColor]; } return self; } - (void)setGradientHoleFrame:(CGRect)gradientHoleFrame { if (!CGRectEqualToRect(_gradientHoleFrame, gradientHoleFrame)) { _gradientHoleFrame = gradientHoleFrame; [self loadRadialGradientLayer]; } } - (void)loadRadialGradientLayer { RadialGradientLayer *layer = [[RadialGradientLayer alloc] init]; layer.frame = self.bounds; layer.raidalGradientFrame = self.gradientHoleFrame; [layer setNeedsDisplay]; [self.layer addSublayer:layer]; } 

@结束

自定义径向渐变图层：

 CGFloat const GRADIENT_WIDTH = 10.0f; @implementation RadialGradientLayer - (void)setRaidalGradientFrame:(CGRect)raidalGradientFrame { if (!CGRectEqualToRect(_raidalGradientFrame, raidalGradientFrame)) { _raidalGradientFrame = raidalGradientFrame; [self setNeedsDisplay]; } } - (void)drawInContext:(CGContextRef)context { CGContextSaveGState(context); CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGFloat colours[8] = { 0.0f, 0.0f, 0.0f, 0.0f, // Clear region colour. 0.0f, 0.0f, 0.0f, 0.8 }; // Blur region colour. CGFloat locations[2] = { 0.0f, 1.0f }; CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colours, locations, 2); CGPoint center = CGPointMake(self.raidalGradientFrame.origin.x + self.raidalGradientFrame.size.width / 2, self.raidalGradientFrame.origin.y + self.raidalGradientFrame.size.height / 2); CGFloat radius = MIN(self.raidalGradientFrame.size.width / 2, self.raidalGradientFrame.size.height / 2) + GRADIENT_WIDTH; CGContextDrawRadialGradient(context, gradient, center, 0.0, center, radius, kCGGradientDrawsAfterEndLocation); CGGradientRelease(gradient); CGColorSpaceRelease(colorSpace); } @end 

我用它：

  CoverView *view = [[CoverView alloc] initWithFrame:[UIScreen mainScreen].bounds]; // for get hole frame CGRect rect = [self.coinPointView.superview convertRect:self.coinPointView.frame toView:view]; view.gradientHoleFrame = rect; [self.tabBarController.view addSubview:view]; 

最后，我得到了下面的结果。

感谢@gbk和@matt

Answer 1

你可以玩一点点然后得到

为了达到这样的效果，我在游乐场准备了示例代码 – 只需复制粘贴并尝试即可。

 import UIKit import PlaygroundSupport class RadialGradientLayer: CALayer { required override init() { super.init() needsDisplayOnBoundsChange = true } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) } required override init(layer: Any) { super.init(layer: layer) } //default colors public var colors = [UIColor.red.cgColor, UIColor.clear.cgColor] override func draw(in ctx: CGContext) { ctx.saveGState() let colorSpace = CGColorSpaceCreateDeviceRGB() var locations = [CGFloat]() for i in 0...colors.count-1 { locations.append(CGFloat(i) / CGFloat(colors.count)) } let gradient = CGGradient(colorsSpace: colorSpace, colors: colors as CFArray, locations: locations) let center = CGPoint(x: bounds.width / 2.0, y: bounds.height / 2.0) let radius = min(bounds.width, bounds.height) ctx.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: radius, options: CGGradientDrawingOptions(rawValue: 0)) } } let view = UIView(frame: CGRect(x: 0, y: 0, width: 375, height: 300)) view.backgroundColor = UIColor.green let label = UILabel(frame: view.bounds) label.text = "test" label.font = UIFont.systemFont(ofSize: 30) label.textAlignment = .center view.addSubview(label) let gradientLayer = RadialGradientLayer() gradientLayer.frame = view.bounds gradientLayer.colors = [UIColor.clear.cgColor, UIColor.black.cgColor] gradientLayer.setNeedsDisplay() view.layer.addSublayer(gradientLayer) view