iOS 中间镂空效果的View

前言

之前看Layer 相关的内容时 , 也没有太注意到这部分知识 , 最近正好用到类似的功能 , 先写个Demo 热热身 .

做完后大概这么个效果

效果图

---

大致思路是这样的 , 用贝塞尔曲线画出一个蒙版 , 然后加在半透明View 的Layer层上 .

    //创建一个View 
    UIView *maskView = [[UIView alloc] initWithFrame:self.view.bounds];
    maskView.backgroundColor = [UIColor grayColor];
    maskView.alpha = 0.8;
    [self.view addSubview:maskView];
    
    //贝塞尔曲线 画一个带有圆角的矩形
    UIBezierPath *bpath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, SCREEN_WIDTH - 20, SCREEN_HEIGHT - 20) cornerRadius:15];
    //贝塞尔曲线 画一个圆形
    [bpath appendPath:[UIBezierPath bezierPathWithArcCenter:maskView.center radius:100 startAngle:0 endAngle:2*M_PI clockwise:NO]];
    
    //创建一个CAShapeLayer 图层
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = bpath.CGPath;
    
    //添加图层蒙板
    maskView.layer.mask = shapeLayer;

几个点

1. 贝塞尔曲线怎么用 ?
2. CAShapeLayer 是什么 ?
3. 图层蒙板 是干什么的?

贝塞尔曲线的使用

这边也不过多介绍 , 总结几个常用的方法吧 .
具体可以参考 UIBezierPath介绍这篇文章

// 创建基本路径
+ (instancetype)bezierPath;
// 创建矩形路径
+ (instancetype)bezierPathWithRect:(CGRect)rect;
// 创建椭圆路径
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
// 创建圆角矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
// 创建指定位置圆角的矩形路径
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
// 创建弧线路径
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
// 通过CGPath创建
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

CAShapeLayer 是什么

CAShapeLayer定义

我理解的意思就是 , 用这个图层的CGPath属性 可以定义想要绘制的图形.
也就是说 通过这个图层 配合贝塞尔曲线 , 我可以得到任意我想要图层形状了 .

上面那段代码 , 改几个地方感受一下

    //最外层套一个大的圆角矩形
    UIBezierPath *bpath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, SCREEN_WIDTH - 20, SCREEN_HEIGHT - 20) cornerRadius:15];
    
    //中间添加一个圆形
    [bpath appendPath:[UIBezierPath bezierPathWithArcCenter:maskView.center radius:100 startAngle:0 endAngle:2*M_PI clockwise:NO]];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = bpath.CGPath;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    //maskView.layer.mask = shapeLayer;
    [self.view.layer addSublayer:shapeLayer];

图片中黑的地方 , 就是创建出来的图层形状

效果图1

这边需要注意的是 , 如果想保留圆以外的部分 , clockwise (顺时针方向) 要选为NO , 如果想保留矩形以外的部分 , 矩形需要反方向绘制path .

    
    UIBezierPath *bpath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, SCREEN_WIDTH - 20, SCREEN_HEIGHT - 20) cornerRadius:15];
    
    [bpath appendPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(SCREEN_WIDTH/2, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:NO]];

    // - bezierPathByReversingPath ,反方向绘制path
    [bpath appendPath:[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 350, SCREEN_WIDTH - 100, 100) cornerRadius:20] bezierPathByReversingPath]];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = bpath.CGPath;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    //maskView.layer.mask = shapeLayer;
    [self.view.layer addSublayer:shapeLayer];

效果图2

图层蒙板

借用核心动画 里面的概念吧 . 饼干切割机 很形象 .

图层蒙版定义 图层蒙版效果图