ios 镂空效果实现

方案概述

在源视图上盖上一个遮罩maskVIew，在maskVIew上镂空。
maskView需要用CAShapLayer作为layer的mask来把样式截出来。
CAShapLayer需要有UIBezierPath作为路径画出来。
UIBezierPath 绘制，要求把CAShapLayer四边边缘画一遍路径，在镂空的位置画路径（如果自己按照点的位置画，要求是逆时针画），这样就是把中间的镂空路径和四边一起组成了mask的样式。

实现

这样一个效果，镂空了脑袋和一只脚

实现代码如下：

- (void)viewDidLoad {
    
    
    [super viewDidLoad];
    UIImageView *imgView = [UIImageView new];
    [self.view addSubview:imgView];
    imgView.image = [UIImage imageNamed:@"testPic.jpg"];
    imgView.frame = CGRectMake(0, 100, 350, 300);

    //遮罩 需要在上面镂空
    UIView *maskView = [UIView new];
    maskView.backgroundColor = [UIColor blackColor];
    maskView.alpha = 0.4;
    [imgView addSubview:maskView];
    maskView.frame = CGRectMake(0, 0, imgView.size.width, imgView.size.height);

    //定义的同时把maskView 四边边缘画一遍
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:maskView.frame];

    //自定义点路径要逆时针画
    [path moveToPoint:CGPointMake(80, 100)];
    [path addLineToPoint:CGPointMake(150, 150)];
    [path addLineToPoint:CGPointMake(300, 100)];
    [path addLineToPoint:CGPointMake(250, 10)];
    [path addLineToPoint:CGPointMake(80, 10)];
    [path closePath];

    //加个圈 这个时候顺时还是逆时就不影响了
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(60, 220)
                                                              radius:40 //圆的半径
                                                          startAngle:0
                                                            endAngle:2 * M_PI
                                                           clockwise:0];
    [path appendPath:circlePath];
    //将CAShapeLayer 路径设置成刚才画的
    CAShapeLayer *shapLayer = [CAShapeLayer layer];
    shapLayer.path = path.CGPath;
    //将shapLayer 设置成要镂空的view的mask
    maskView.layer.mask = shapLayer;
}

其他 （逆时针绘制圆角矩形）

逆时针绘制圆角矩形，因为这个比较难画这里记录一下：
rect是圆角矩形的frame, cornerRadius是圆角大小

        let rect : CGRect
        let cornerRadius = 14.0
        
        let topLeft = CGPoint(x: CGRectGetMinX(rect) , y: CGRectGetMinY(rect))
        let bottomLeft = CGPoint(x: CGRectGetMinX(rect), y: CGRectGetMaxY(rect))
        let bottomRight = CGPoint(x: CGRectGetMaxX(rect), y: CGRectGetMaxY(rect))
        let topRight = CGPoint(x: CGRectGetMaxX(rect), y: CGRectGetMinY(rect))
        
        //逆时针绘制圆角矩形
        path.move(to: CGPoint(x: topLeft.x + cornerRadius, y: topLeft.y))
        path.addArc(withCenter: CGPoint(x: topLeft.x + cornerRadius, y: topLeft.y + cornerRadius), radius: cornerRadius, startAngle: CGFloat(-Double.pi / 2), endAngle: CGFloat(Double.pi), clockwise: false)
        path.addLine(to: CGPoint(x: bottomLeft.x, y: bottomLeft.y - cornerRadius))
        path.addArc(withCenter: CGPoint(x: bottomLeft.x + cornerRadius, y: bottomLeft.y - cornerRadius), radius: cornerRadius, startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi / 2), clockwise: false)
        path.addLine(to: CGPoint(x: bottomRight.x - cornerRadius, y: bottomRight.y))
        path.addArc(withCenter: CGPoint(x: bottomRight.x - cornerRadius, y: bottomRight.y - cornerRadius), radius: cornerRadius, startAngle: CGFloat(Double.pi / 2), endAngle: 0, clockwise: false)
        path.addLine(to: CGPoint(x: topRight.x, y: topRight.y + cornerRadius))
        path.addArc(withCenter: CGPoint(x: topRight.x - cornerRadius, y: topRight.y + cornerRadius), radius: cornerRadius, startAngle: 0, endAngle: CGFloat(-Double.pi / 2), clockwise: false)
        path.close()