今天要做蒙版完成引导页,但是需求是在蒙版上扣出一块空白,用来高亮需要用户查看的位置。
查看了好多资料,大部分都是完成一个圆环或者渐变圆环,后边突然看到贝塞尔的一个属性 ,用后立马就解决了,特此记录。

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRect:self.bounds];
UIBezierPath *path = [[UIBezierPath bezierPathWithOvalInRect:rect] bezierPathByReversingPath];
[maskPath appendPath:path];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.frame;
maskLayer.path = maskPath.CGPath;
maskLayer.strokeColor = [[UIColor blackColor] colorWithAlphaComponent:0.5].CGColor;
maskLayer.fillColor = [UIColor redColor].CGColor;
maskLayer.strokeStart = 0.f;
maskLayer.strokeEnd = 1.0f;
maskLayer.lineWidth = 1.0f;
[self.layer addSublayer:maskLayer];
self.layer.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5].CGColor;
self.layer.mask = maskLayer;
以上就是我的核心代码
下边,我大概解释下,
其中调用了两个贝塞尔对象,第一个做了个全局的背景,第二个画出了需要的位置的图形,然后将两个贝塞尔合成到第一个上,然后将贝塞尔添加到CAShapeLayer上绘制出来图形,最后将CAShapeLayer mask到图层的layer上得到了所需的图形。
其中,关键的几个点我再说明下,
1.bezierPathByReversingPath
这个方法的调用,并不是每一个贝塞尔图形都需要调用的,比如,绘制扇形的就不用调用这个也可以实现,但是其他的比如我用的绘制椭圆的就需要调用,具体原理,不多做解释。
-
appendPath
这个方法将两个贝塞尔连接成为了一个,完成了所需的图形。 - layer层的mask属性。关于这个属性做了什么事可以参考这篇文章
以上就是关于蒙版中间去掉颜色的所有内容。
如有不对,请联系我修改,谢谢。
网友评论