前言
之前看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;
几个点
- 贝塞尔曲线怎么用 ?
- CAShapeLayer 是什么 ?
- 图层蒙板 是干什么的?
贝塞尔曲线的使用
这边也不过多介绍 , 总结几个常用的方法吧 .
具体可以参考 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
图层蒙板
借用核心动画 里面的概念吧 . 饼干切割机 很形象 .
图层蒙版定义
图层蒙版效果图
