头像选择界面：周围灰暗，中间透明的效果

头像选择界面基本每个App都会有，近来重新整理了下它的实现方式。图示效果代码在文末。

image.png

1、使用UIGraphic

重写遮罩视图的drawRect

- (void)drawRect:(CGRect)rect {
    
    //背景
    [[[UIColor blackColor] colorWithAlphaComponent:.6] set];
    UIRectFill(rect);
    
    //镂空
    [[UIColor clearColor] set];
    CGRect holeRect = CGRectMake(100, 100, 200, 200);
    UIRectFill(holeRect);
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

2、使用UIBezierPath和CAShapeLayer

重写遮罩视图的drawRect

- (void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];

    //设置path
    CGRect myRect = CGRectMake(100,100,200, 200);
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:myRect];
    [path appendPath:circlePath];
    [path setUsesEvenOddFillRule:YES];

    //填充内容
    CAShapeLayer *fillLayer = [CAShapeLayer layer];
    fillLayer.path = path.CGPath;
    fillLayer.fillRule = kCAFillRuleEvenOdd;
    fillLayer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:.6].CGColor;
    [self.layer addSublayer:fillLayer];
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

或在应用时直接添加layer

- (void)addMaskLayer {
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.view.bounds];
    
    //设置path
    CGRect myRect = CGRectMake(100,100,200, 200);
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:myRect];
    [path appendPath:circlePath];
    [path setUsesEvenOddFillRule:YES];
    
    //填充内容
    CAShapeLayer *fillLayer = [CAShapeLayer layer];
    fillLayer.path = path.CGPath;
    fillLayer.fillRule = kCAFillRuleEvenOdd;
    fillLayer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:.6].CGColor;
    [self.view.layer addSublayer:fillLayer];
}

3、使用CoreGraphic

重写遮罩视图的drawRect

- (void)drawRect:(CGRect)rect {
    //背景
    CGContextRef context = UIGraphicsGetCurrentContext();
    [[[UIColor blackColor] colorWithAlphaComponent:.6] set];
    CGContextAddRect(context, rect);
    CGContextFillPath(context);

    //镂空
    CGRect circleRect = CGRectMake(100, 100, 200, 200);
    CGContextSetBlendMode(context, kCGBlendModeClear);
    CGContextAddEllipseInRect(context, circleRect);
    CGContextFillPath(context);
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

4、示例代码

- (void)avatarOverlayer {
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:[UIScreen mainScreen].bounds];
    
    //黑色背景
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:self.cropFrame];
    [path appendPath:circlePath];
    [path setUsesEvenOddFillRule:YES];
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = path.CGPath;
    maskLayer.fillRule = kCAFillRuleEvenOdd;
    maskLayer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:0.6].CGColor;
    [self.overlayView.layer addSublayer:maskLayer];
    
    //白色边框
    UIBezierPath *strokePath = [UIBezierPath bezierPathWithOvalInRect:self.cropFrame];
    [strokePath stroke];
    CAShapeLayer *strokeLayer = [CAShapeLayer layer];
    strokeLayer.strokeColor = [UIColor whiteColor].CGColor;
    strokeLayer.fillColor = [UIColor clearColor].CGColor;
    strokeLayer.path = strokePath.CGPath;
    [self.overlayView.layer addSublayer:strokeLayer];
}