• 有時候功能引導頁需要對指定部分可見,其余為黑色遮罩.這時候需要用到圖層繪制

方法一:用CAShapeLayer

• 實現一個鏤空加描邊的蒙版

#import "GuideView.h"

#define MLScreenH [UIScreen mainScreen].bounds.size.height
#define MLScreenW [UIScreen mainScreen].bounds.size.width

@implementation GuideView
- (instancetype)init{
    self = [super init];
    self.frame = CGRectMake(0, 0, MLScreenW, MLScreenH);
    [self drawBorderMaskLayer];
    return self;
}

- (void)drawBorderMaskLayer{
    //描邊
    CGRect alphaRect = CGRectMake(10, 100, 100, 100);
    CGFloat cornerRadius = 10;
    
    CAShapeLayer *borderLayer = [CAShapeLayer layer];
    borderLayer.frame = self.bounds;
    borderLayer.lineWidth = 3;
    borderLayer.strokeColor = [UIColor redColor].CGColor;
    borderLayer.fillColor = [UIColor clearColor].CGColor;
    
    UIBezierPath *bezierPath=[UIBezierPath bezierPathWithRoundedRect:alphaRect
                                                        cornerRadius:cornerRadius];
    borderLayer.path = bezierPath.CGPath;
    
    [self.layer insertSublayer:borderLayer atIndex:0];
    
    
    {//鏤空
        CAShapeLayer *maskLayer = [CAShapeLayer layer];
        maskLayer.frame = self.bounds;
        maskLayer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:0.8].CGColor;
        
        UIBezierPath *bezierPath=[UIBezierPath bezierPathWithRect:self.bounds];
        [bezierPath appendPath:[[UIBezierPath bezierPathWithRoundedRect:alphaRect cornerRadius:cornerRadius] bezierPathByReversingPath]];
        maskLayer.path = bezierPath.CGPath;
        
        [self.layer insertSublayer:maskLayer atIndex:0];
    }
}
@end

• 效果如圖,透明位置可按需求改動.

  
  
  redBorderMask.png

方法二:用CGContext在drawRect中繪制

繪制注意點:

1. GuideView的init方法中需要設置背景色為透明(否則制定透明部分不能正確顯示), 即self.backgroundColor=[UIColor clearColor];

#define MLScreenH [UIScreen mainScreen].bounds.size.height
#define MLScreenW [UIScreen mainScreen].bounds.size.width

@implementation GuideView
- (instancetype)init{
    self = [super init];
    self.frame = CGRectMake(0, 0, MLScreenW, MLScreenH);
    self.backgroundColor=[UIColor clearColor];
    return self;
}
- (void)drawRect:(CGRect)rect {
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    if (context == nil) {
        return;
    }
    
    [[[UIColor blackColor] colorWithAlphaComponent:0.8f] setFill];
    UIRectFill(rect);
    
    [[UIColor clearColor] setFill];
    
    //設置透明部分位置和圓角
    CGRect alphaRect = CGRectMake(10, 100, 100, 100);
    CGFloat cornerRadius = 10;
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:alphaRect
                                                        cornerRadius:cornerRadius];
    CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor clearColor] CGColor]);
   
    CGContextAddPath(context, bezierPath.CGPath);
    CGContextSetBlendMode(context, kCGBlendModeClear);
    CGContextFillPath(context);
}

• 效果如圖,透明位置可按需求改動.

  
  
  drawRectMask.png