CALayer Mask - 2 - CAShapeLayer

最新推荐文章于 2018-05-18 17:51:00 发布

绘风铃

最新推荐文章于 2018-05-18 17:51:00 发布

阅读量477

点赞数

CC 4.0 BY-SA版权

分类专栏： QuartzCore 文章标签： iOS CALayer Mask

本文链接：https://blog.youkuaiyun.com/u013743777/article/details/50599520

QuartzCore 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨了CALayer的子类，如CAShapeLayer、CAGradientLayer与CARelicatorLayer，展示了它们在作为UIView的层遮罩时带来的各种视觉效果。通过代码示例，详细讲解了如何创建矩形、圆形遮罩以及更复杂的遮罩效果，并提供了关键的解释与原理链接。

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

上篇讲到如何利用CALayer套图片作为一个UIView的层的mask遮罩，这里我们介绍几个更加炫酷的CALayer的子类，作为Mask有更多炫酷的效果。

转载自：http://www.jianshu.com/p/21f2b09d5445#

主要有三个类：CAShapeLayer CAGradientLayer CARelicatorLayer

我们逐个来学习：

一个不存在任何遮罩的图片效果：

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cool.jpg"]];
    imageView.frame  = CGRectMake(0, 0, 300, 200);
    imageView.center = self.view.center;
    [self.view addSubview:imageView];
}

如果添加如下的矩形遮罩mask：

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cool.jpg"]];
    imageView.frame  = CGRectMake(0, 0, 300, 200);
    imageView.center = self.view.center;
    [self.view addSubview:imageView];

    CAShapeLayer* shape = [CAShapeLayer layer];
    CGMutablePathRef ms = CGPathCreateMutable();
    CGPathAddRect(ms, nil, CGRectInset(CGRectMake(0, 0, 300, 200), 50, 50));
    shape.path = ms;
    shape.shadowOpacity = 1;
    shape.shadowRadius  = 45;
    imageView.layer.mask = shape;
}

效果：

如果添加圆形遮罩：

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cool.jpg"]];
    imageView.frame  = CGRectMake(0, 0, 300, 200);
    imageView.center = self.view.center;
    [self.view addSubview:imageView];

    CAShapeLayer* shape = [CAShapeLayer layer];
    CGMutablePathRef ms = CGPathCreateMutable();
    CGPathAddEllipseInRect(ms, nil, CGRectMake(0, 0, 300, 200));
    shape.path = ms;
    shape.shadowOpacity = 1;
    shape.shadowRadius = 45;
    imageView.layer.mask = shape;
}

效果：

效果不错吧？

我们来看看关于CAShapLayer的官方解释：

包括头文件的解释：

提到了几个关键的名次

路径对象：

    CGMutablePathRef ms = CGPathCreateMutable();

光珊化：即类似阴影的边框效果

贝赛尔曲线：

好好看看这几篇就能掌握了

原理：

http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

使用：

http://www.henishuo.com/uibezierpath-draw/

http://my.oschina.net/lanrenbar/blog/389379?fromerr=OtXb0JpL