美文网首页iOS 深度好文
CALayer的mask属性详解

CALayer的mask属性详解

作者: 堂吉诃德灬 | 来源:发表于2017-03-31 11:06 被阅读893次

原先在看Core Animation的时候看到过mask属性,但是当时只是一览而过,没什么特别的印象,最近在解决一个问题的时候才彻底的了解了这个属性,现在来记录一下。

首先mask这个属性属于CALayer及其子类,另外mask这个属性本身就是一个CALayer,所以我们如果要给一个对象设置mask那么这个对象本身一定要是CALayer及其子类,另外设置mask属性的时候,这个mask本身也一定要是CALayer及其子类。

当给一个对象添加了mask属性的时候,这个对象是mask这个层的父视图,对于mask来说,它本身的颜色并不重要,重要的是它的轮廓(即外形),对于父图层来说mask属性定义了父图层显示的区域,mask层实心的地方会被保留下来,其他的地方会被抛弃。(可以这么理解,我向view上添加了一个矩形的涂层,当我给这个矩形涂层设置了一个mask属性之后,如果这个mask层的外观是三角形,那么这个矩形的父视图也会变成三角形,因为mask定义了父视图的显示区域。

因为mask是一个层,而且它最重要的是它的轮廓,所以mask如果是CALayer 时,常常设置它的contents属性来定义它的外观,如果mask是CAShapeLayer的时候常常会设置它的path属性,让它和UIBezierPath来结合使用定义它的外观。

下面我们来看它的具体使用:
(1)

   //首先我们添加一个父视图
    CALayer *superLayer  = [CALayer layer];
    superLayer.backgroundColor = [UIColor orangeColor].CGColor;
    superLayer.frame = CGRectMake(40, 40, 200, 200);
    [self.view.layer addSublayer:superLayer];

效果:

屏幕快照 2017-03-31 10.54.07.png

我们看到此时出现了一个矩形,这跟我们的预期一样,这样我们给父视图设置mask属性来看看效果

    CALayer *superLayer  = [CALayer layer];
    superLayer.backgroundColor = [UIColor orangeColor].CGColor;
    superLayer.frame = CGRectMake(40, 40, 200, 200);
    [self.view.layer addSublayer:superLayer];
    
   //设置贝塞尔曲线,贝塞尔曲线的形状是一个三角形
    UIBezierPath *path = [UIBezierPath bezierPath];
    [[UIColor blueColor]setFill];
    [[UIColor clearColor]setStroke];
    [path setLineWidth:1];
    [path moveToPoint:CGPointMake(80, 50)];
    [path addLineToPoint:CGPointMake(140, 98)];
    [path addLineToPoint:CGPointMake(60, 132)];
    [path closePath];
    
   //设置mask属性的层为CAShapeLayer,同时设置它的path属性为上面设置的贝塞尔曲线的路径,然后把上面的父视图的mask设置为CAShapeLayer
    CAShapeLayer *maksLayer = [CAShapeLayer layer];
    maksLayer.path = path.CGPath;
    superLayer.mask = maksLayer;

效果:

屏幕快照 2017-03-31 10.59.22.png

此时我们看到父视图的轮廓变了,它变为了我们设置的那个贝塞尔曲线的路径,这就是mask属性的神奇之处,它可以把一个图层原本的形状变成我们想要的任何形状

相关文章

  • CALayer的mask属性详解

    原先在看Core Animation的时候看到过mask属性,但是当时只是一览而过,没什么特别的印象,最近在解决一...

  • CALayer的mask属性

    CALayer的mask属性俗称蒙版。@property(nullable, strong) CALayer *m...

  • CALayer属性mask

    CALayer的属性mask,mask也是一个layer,这边称它为maskLayer。介绍中描述 An opti...

  • CALayer之mask使用

    mask是CALayer的一个属性,它本身也是一个CALayer类。mask有和其他图层一样的绘制和布局属性。它类...

  • 自定义转场动画-小圆点扩散

    mask的理解 CALayer有一个属性叫做mask。比如imageLayer有一个maskLayer作为mask...

  • CALayer的mask属性

    之前对mask属性了解的特别少,今天特意来看看其用法:*********mask就是PS中的遮罩;********...

  • 547,CALayer之mask属性-遮罩(面试点:mask属性

    CALayer有一个属性叫做mask。 这个属性本身就是个CALayer类型,有和其他图层一样的绘制和布局属性。 ...

  • CALayer之mask属性-遮罩

    CALayer有一个属性叫做mask。 这个属性本身就是个CALayer类型,有和其他图层一样的绘制和布局属性。 ...

  • SplashAnimation

    涉及到的技术点CALayer的mask属性mask 也是一个 CALayer当我们使用时,就需要单独创建一个 CA...

  • 【iOS开发】iOS中的Mask

    CALayer拥有mask属性,Apple的官方解释如下: An optional layer whose alp...

网友评论

    本文标题:CALayer的mask属性详解

    本文链接:https://www.haomeiwen.com/subject/hvimottx.html