iOS绘图之CALayer、遮罩、CAShapeLayer

最新推荐文章于 2021-03-19 11:01:26 发布

Love@YR

最新推荐文章于 2021-03-19 11:01:26 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：绘图

本文链接：https://blog.youkuaiyun.com/jingqiu880905/article/details/51860530

绘图专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了iOS开发中CALayer的bounds、position及anchor point的关系，并通过具体实例介绍了如何使用CAShapeLayer和UIBezierPath创建复杂的遮罩效果。此外，还详细解释了填充规则kCAFillRuleEvenOdd的作用及其在不同情况下的表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：Love@YR
链接：http://blog.youkuaiyun.com/jingqiu880905/article/details/51860530
请尊重原创，谢谢！

demo地址
CALayer是属于QuartzCore里的，CA代表CoreAnimation
CGLayer则是属于CoreGraphics里的。上上篇文章介绍过5个Graphics Context。
系统提供的其他常用的CALayer有：CAShapeLayer，CAGradientLayer(渐变层)，CAReplicatorLayer，CATextLayer等。
1. 先说下CALayer的bounds,position,anchorpoint关系：

    UIButton * _maskButton = [[UIButton alloc] init];
    [_maskButton setFrame:CGRectMake(30, 50, 100, 100)];
    // [_maskButton setFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    [_maskButton setBackgroundColor:[UIColor colorWithWhite:0 alpha:0.7]];

    UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(-25, 200, 180, 100)];//矩形，－25＋30=5 所以距离屏幕左部5
    [path1 appendPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(SCREEN_WIDTH / 2-30, SCREEN_HEIGHT/2-50) radius:100 startAngle:M_PI endAngle:2*M_PI clockwise:YES]];//圆弧,NO为逆时针画。默认顺时针，angel为0的位置在最右边，如果设置成NO之后，不管fillRule为什么相交处都是透明的！！(当然如果其后面有layer就显示那个layer的透明度)-30是因为_maskButton.layer从30开始

    CAShapeLayer *shapeLayer1 = [CAShapeLayer layer];
    shapeLayer1.lineWidth = 5;
    shapeLayer1.strokeColor = [UIColor colorWithWhite:0 alpha:0.9].CGColor;

//    [shapeLayer1 setFillRule:kCAFillRuleEvenOdd];
    shapeLayer1.fillColor = [UIColor colorWithWhite:0 alpha:0.3].CGColor;

    shapeLayer1.path = path1.CGPath;

    [_maskButton.layer addSublayer:shapeLayer1];
    [self.placeholderview.layer setMask:_maskButton.layer];//设置self.view.layer的遮罩层

maskLayer不一定要和其想要控制的原layer大小一样大(不过一般都是一样大的)，这里self.placeholderview是一个有色的和self.view同样大小的view，而_maskButton只有100*100

maskLayer add的sublayer即使超过了此maskLayer的范围也会正常显示
(这是因为默认情况下设置的layer的masksToBounds为NO也即其sublayer超出部分正常显示，UIView的clipsToBounds默认也是NO的即其subview超出自己范围的部分也正常显示，设置YES则只显示没超出的部分！！！)

maskLayer和shapeLayer1的范围控制着self.placeholderview显示的范围
maskLayer的透明度，shapeLayer1的strokeColor，fillColor的透明度都决定了其所绘区域的self.placeholderview的透明度。而其他区域的self.placeholderview全部透明即不显示！！
3. [self.view.layer setMask:maskLayer];
如果一个layer是其他layer的遮罩层，其上的颜色(如：strokecolor、fillcolor)色值全部失效，只透明度有用
[self.view.layer addSublayer:someLayer];
如果一个layer是被add到非遮罩层的层中，颜色正常显示
[maskLayer addSublayer:someLayer];
被add到遮罩层中，颜色色值失效，颜色的透明度有用。
4. CAShapeLayer加入到masklayer中或者作为某个layer的masklayer
-当layer setFillRule:kCAFillRuleEvenOdd时
同一个UIBezierPath对象路线相交的部分原layer（要被mask的layer）透明显示即不显示。
kCAFillRuleEvenOdd的注释说：
If the number of crossings is odd, the point is inside the path and the region containing it should be filled.
比如一个view背景色绿色，一个shapelayer的path先是画了个框，然后又画了个和此框有相交的框，此shapelayer的fillcolor为紫色，如果这个shapelayer的fillrule为奇偶，相交部分透明，则显示出了view的颜色即绿色。因为相交部分的点发出射线与path有偶数个交点，所以不需fill。
实验中发现当圆和框相交时，圆逆时针画的话即closewise为no的时候，不管fillrule是什么都会使得相交处透明显示。不知道为何。

深入了解CAShapeLayer 和mask可参考:
http://www.cnblogs.com/Phelthas/p/4643400.html
http://www.cnblogs.com/Phelthas/p/4892854.html
http://www.cnblogs.com/Phelthas/p/4801889.html
其中最后一篇就利用了maskLayer先设置width为0，使得maskLabel完全不显示，然后改变maskLayer的宽度，使得后面的maskLabel逐渐显示