CALayer的mask属性简介
来源:互联网 发布:日本投资房产 知乎 编辑:程序博客网 时间:2024/05/27 00:28
mask就是PS中的遮罩;
遮罩层必须至少有两个图层,上面的一个图层为“遮罩层”,下面的称“被遮罩层”;这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是“透明”的,可以看到被遮罩层中的对象,而没有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的。
实例一:字体渐变的UILabel
CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = CGRectMake(100, 300, 200, 25); [gradientLayer setStartPoint:CGPointMake(0.0, 0.0)]; [gradientLayer setEndPoint:CGPointMake(0.0, 1.0)]; gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor]; UILabel *label = [[UILabel alloc] initWithFrame:gradientLayer.bounds]; label.text = @"红黄绿渐变~~"; label.font = [UIFont boldSystemFontOfSize:25]; label.backgroundColor = [UIColor clearColor]; [self.view addSubview:label]; [self.view.layer addSublayer:gradientLayer]; gradientLayer.mask = label.layer;
效果图:
说明:
这里首先要弄清楚的是,哪个是哪个的遮罩层;
根据遮罩的概念,分析:两个图层中重叠的部分才被显示,gradientLayer渐变层显示的部分是一整块形状,而label显示的部分只有字体(默认黑色),背景我们已经清除掉颜色了;继续,“遮罩层”中有对象的地方就是“透明”的,可以看到“被遮罩层”中的对象,而没有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的;假设gradientLayer是遮罩层,那么它的所有区域都是有对象的,因此它整块都是透明的,我们能看到的是整个label,也就是这个gradientLayer根本就不作用,可有可无,然后,我们把label作为遮罩层,它有对象的区域就是它的文字部分,这个文字部分是透明的,正好我们透过文字看到gradientLayer的渐变颜色,而没有对象的部分不透明,我们在脑海里把它裁剪掉,最后正好是我们的效果图的样子;
实例二:颜色渐变的图片
原始图片效果图:
CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = CGRectMake(100, 300, 150, 50); gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor]; [gradientLayer setStartPoint:CGPointMake(0.0, 0.0)]; [gradientLayer setEndPoint:CGPointMake(0.0, 1.0)]; UIImageView *imageView = [[UIImageView alloc]initWithFrame:gradientLayer.bounds]; imageView.image = [UIImage imageNamed:@"Map_help_button"]; [self.view addSubview:imageView]; [self.view.layer addSublayer:gradientLayer]; gradientLayer.mask = imageView.layer;
遮罩后效果图:
实例三:通过CAShapeLayer实现图片的裁剪
原始图片:
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)]; imageView.center = self.view.center; imageView.image = [UIImage imageNamed:@"Share_bag"]; [self.view addSubview:imageView]; UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:100 / 2.f startAngle:0 endAngle:M_PI*2 clockwise:YES]; CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.frame = imageView.bounds; maskLayer.path = path.CGPath; [self.view.layer addSublayer:maskLayer]; imageView.layer.mask = maskLayer;
裁剪后的效果图:
说明:
这里只是通过这个例子讲解mask的使用,图片的圆角裁剪实际上只需要修改cornerRadius属性即可;
在这里,原始图片作为被遮罩层,maskLayer作为遮罩层,maskLayer的形状正好的是图片大小的圆,这个圆通过贝塞尔路径来构造;两个层一叠加,显示重叠部分,maskLayer有对象的部分也就是圆形部分透明,其他部分不透明,就得到上面的效果图;
- CALayer的mask属性简介
- CALayer的mask属性简介
- iOS CALayer mask 属性
- 使用CALayer的mask属性来设置图片圆角
- CALayer mask属性实现蒙板效果
- CALayer简介 (二)UIView和UIImageView的CALayer属性
- CALayer简介 (七)CALayer的隐式动画属性
- MaskedTextBox 的mask属性
- CALayer -- 层的属性
- CALayer -- 层的属性
- CALayer的动画属性
- CAlayer层的属性
- CAlayer层的属性
- CALayer 的属性介绍
- CALayer 的形变属性
- CALayer相关的属性
- CAlayer层的属性
- CALayer层的属性
- “开会” 引发的思考
- 第5周项目2(1) 游戏中的角色类
- MyBatis中配置Spring的事物
- C++第二次实验上机-BOOK类
- OpenGL:太阳、地球、月球模型模拟动画
- CALayer的mask属性简介
- 菜鸟学习gsl科学计算库第一步——程序编译过程
- LayoutInflater源码分析
- 关于XShell远程登录显示乱码问题的解决方案
- java中getResourceAsStream(String path)与getClassLoader.getResourceAsStream(String path)
- VE设计#9 改进版 数据层接口版
- LNMPA 一键安装
- 客户端 用不用 bind 的区别
- GEEK学习笔记— —C++11的新特性