如何在視圖中切出一個具有徑向漸變的孔

-1

我有一個透明的光孔視圖，一個視圖疊加超級視圖，並且在封面視圖中有一個孔漸變圓視圖，超級視圖仍然可見。我不知道實行梯度光孔來看，任何人都可以幫我如何在視圖中切出一個具有徑向漸變的孔

編輯 ============

我嘗試添加封面查看全屏，封面視圖背景顏色清晰，並將自定義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]; 
    }

@end

定製徑向漸變層：

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和@馬特

來源

2017-09-16 jacinzhang

您可以圍繞一點點玩，並得到

爲了實現這樣的結果，我在操場上製備的樣品代碼 - 只是複製粘貼和嘗試。

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

來源

2017-09-16 15:12:09 gbk