使用切出的圓掩蓋UIView

Question

我創建了一個帶有半透明黑色背景的UIView，以便放置在我的主應用視圖中。我在這裏瞄準的是在UIView的某個地方創建一個切出的圓形形狀，其中沒有看到半透明的黑色背景，除了圓形區域外，在整個圖像上產生了黑色蒙板效果（這是爲了突出顯示該區域中的按鈕）。

我已經設法使用CAShapeLayer創建一個圓形的面具，但這有相反的效果（即其餘的視圖是清晰的，INSIDE圓是半透明的黑色。是半透明黑色以外的所有東西，然後是清晰的內容，下面是我使用的代碼，我將如何去使它以相反的方式工作？我的blackMask是半透明的黑色視圖，我buttonCircle是圓我想保持暢通。

也許我需要反轉的路徑，不知何故？

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init]; 
CGRect maskRect = buttonCircle.frame; 
CGPathRef path = CGPathCreateWithEllipseInRect(maskRect, NULL); 
maskLayer.path = path; 
CGPathRelease(path); 
blackMask.layer.mask = maskLayer; 

編輯：現在嘗試這個，沒有看到任何面膜在所有與此一：

UIView *circularMaskView = [[UIView alloc] initWithFrame:buttonCircle.frame]; 
circularMaskView.backgroundColor = [UIColor greenColor]; 
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init]; 

CGPathRef path = CGPathCreateWithEllipseInRect(buttonCircle.frame, NULL); 
maskLayer.path = path; 
CGPathRelease(path); 

circularMaskView.layer.mask = maskLayer; 

[blackMask addSubview:circularMaskView]; 

Answer 1

所以，在這裏就是我所做的。我創建了一個自定義的UIView子類，稱爲BlackoutView，像這樣：

BlackoutView.h

#import <UIKit/UIKit.h> 

@interface BlackoutView : UIView 

@property (nonatomic, retain) UIColor *fillColor; 
@property (nonatomic, retain) NSArray *framesToCutOut; 

@end 

BlackoutView.m

#import "BlackoutView.h" 

@implementation BlackoutView 

- (void)drawRect:(CGRect)rect 
{ 
    [self.fillColor setFill]; 
    UIRectFill(rect); 

    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetBlendMode(context, kCGBlendModeDestinationOut); 

    for (NSValue *value in self.framesToCutOut) { 
     CGRect pathRect = [value CGRectValue]; 
     UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:pathRect]; 
     [path fill]; 
    } 

    CGContextSetBlendMode(context, kCGBlendModeNormal); 
} 

@end 

然後我初始化它爲正常，並設置屬性以我想要使用的蒙版的顏色以及要從蒙版中切出的框架：

[blackMask setFillColor:[UIColor colorWithWhite:0.0f alpha:0.8f]]; 
[blackMask setFramesToCutOut:@[[NSValue valueWithCGRect:buttonCircleA.frame], 
           [NSValue valueWithCGRect:buttonCircleB.frame]]]; 

這可以通過允許我切除橢圓形以外的其他形狀來改善，但對於我的目的來說這很好，並且稍後可以很容易地進行調整。希望這可以幫助別人！

Answer 2

如果您正在使用任何黑色圖像掩蓋然後

-(void)maskWithImage:(UIImage*)maskImage toImageView:(UIImageView*)imgView{ 

    CALayer *aMaskLayer=[CALayer layer]; 
    aMaskLayer.contents=(id)maskImage.CGImage; 

    imgView.layer.mask=aMaskLayer; 


} 

如果您有任何自定義ShapeLayer掩蓋

-(void)maskWithShapeLayer:(CALayer*)layer toImageView:(UIImageView*)imgView{ 
    //Layer should be filled with Black color to mask those part of Image 
    imgView.layer.mask=layer; 
} 

如果你想使的ImageView與圓面膜

-(void)maskWithCircle:(UIImageView*)imgView{ 

    CAShapeLayer *aCircle=[CAShapeLayer layer]; 
    aCircle.path=[UIBezierPath bezierPathWithRoundedRect:imgView.bounds cornerRadius:imgView.frame.size.height/2].CGPath; // Considering the ImageView is square in Shape 

    aCircle.fillColor=[UIColor blackColor].CGColor; 
    imgView.layer.mask=aCircle; 

} 

Answer 3

這是我在斯威夫特接受的答案的的轉換：

public class OverlayView: UIView { 
let fillColor: UIColor = UIColor.grayColor() 
public var framesToCutOut: Array<NSValue> = [NSValue]() 

override public func drawRect(rect: CGRect) { 
    super.drawRect(rect) 

    fillColor.setFill() 
    UIRectFill(rect) 

    if let context: CGContextRef = UIGraphicsGetCurrentContext() { 
     CGContextSetBlendMode(context, .DestinationOut) 

     for value in framesToCutOut { 
      let pathRect: CGRect = value.CGRectValue() 
      let path: UIBezierPath = UIBezierPath(ovalInRect: pathRect) 
      path.fill() 
     } 

     CGContextSetBlendMode(context, .Normal) 
    } 
}