iOS 中间镂空效果的View

   <h2><strong>前言</strong></h2>    <p>之前看Layer 相关的内容时 , 也没有太注意到这部分知识 , 最近正好用到类似的功能 , 先写个Demo 热热身 .</p>    <p>做完后大概这么个效果</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9172f33222949fcf69f27fa2eada418a.png"></p>    <p>大致思路是这样的 , 用贝塞尔曲线画出一个蒙版 , 然后加在半透明View 的Layer层上 .</p>    <pre>  <code class="language-objectivec">//创建一个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;</code></pre>    <p>几个点</p>    <ol>     <li>贝塞尔曲线怎么用 ?</li>     <li>CAShapeLayer 是什么 ?</li>     <li>图层蒙板 是干什么的?</li>    </ol>    <h3><strong>贝塞尔曲线的使用</strong></h3>    <p>这边也不过多介绍 , 总结几个常用的方法吧 .</p>    <p>具体可以参考UIBezierPath介绍这篇文章</p>    <pre>  <code class="language-objectivec">// 创建基本路径  + (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;</code></pre>    <h3><strong>CAShapeLayer 是什么</strong></h3>    <p><img src="https://simg.open-open.com/show/32e97cdf6c13ba527f69f69dfd5e4715.jpg"></p>    <p style="text-align:center">CAShapeLayer定义</p>    <p>我理解的意思就是 , 用这个图层的CGPath属性 可以定义想要绘制的图形.</p>    <p>也就是说 通过这个图层 配合贝塞尔曲线 , 我可以得到任意我想要图层形状了 .</p>    <p>上面那段代码 , 改几个地方感受一下</p>    <pre>  <code class="language-objectivec">//最外层套一个大的圆角矩形      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];</code></pre>    <p>图片中黑的地方 , 就是创建出来的图层形状</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3171ea51c55d8f81464ccd6c6028fba6.png"></p>    <p style="text-align:center">效果图1</p>    <p>这边需要注意的是 , 如果想保留圆以外的部分 , clockwise (顺时针方向) 要选为NO , 如果想保留矩形以外的部分 , 矩形需要反方向绘制path .</p>    <pre>  <code class="language-objectivec">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];</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b8dda0bc642a4f2217e1dee29a322eed.png"></p>    <p style="text-align:center">效果图2</p>    <h3><strong>图层蒙板</strong></h3>    <p>借用核心动画 里面的概念吧 . 饼干切割机 很形象 .</p>    <p><img src="https://simg.open-open.com/show/297740732e1503727e03aef4f6b1eb03.jpg"></p>    <p style="text-align:center">图层蒙版定义</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/40763cae3123be453a267e1d20ec219d.png"></p>    <p style="text-align:center">图层蒙版效果图</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/50c46c72e3dd</p>    <p> </p>