CALayer的mask属性简介

2023-10-20 09:48
文章标签 mask 属性 简介 calayer

本文主要是介绍CALayer的mask属性简介,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!



mask就是PS中的遮罩;

遮罩层必须至少有两个图层,上面的一个图层为遮罩层,下面的称被遮罩层;这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是透明的,可以看到被遮罩层中的对象,而没有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的。

实例一:字体渐变的UILabel

[objc]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. CAGradientLayer *gradientLayer = [CAGradientLayer layer];  
  2. gradientLayer.frame = CGRectMake(10030020025);  
  3. [gradientLayer setStartPoint:CGPointMake(0.00.0)];  
  4. [gradientLayer setEndPoint:CGPointMake(0.01.0)];  
  5. gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];  
  6.   
  7. UILabel *label = [[UILabel alloc] initWithFrame:gradientLayer.bounds];  
  8. label.text = @"红黄绿渐变~~";  
  9. label.font = [UIFont boldSystemFontOfSize:25];  
  10. label.backgroundColor = [UIColor clearColor];  
  11. [self.view addSubview:label];  
  12.   
  13. [self.view.layer addSublayer:gradientLayer];  
  14. gradientLayer.mask = label.layer;  

效果图:


说明:

这里首先要弄清楚的是,哪个是哪个的遮罩层;

根据遮罩的概念,分析:两个图层中重叠的部分才被显示,gradientLayer渐变层显示的部分是一整块形状,而label显示的部分只有字体(默认黑色),背景我们已经清除掉颜色了;继续,遮罩层”中有对象的地方就是透明的,可以看到“被遮罩层”中的对象,而没有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的;假设gradientLayer是遮罩层,那么它的所有区域都是有对象的,因此它整块都是透明的,我们能看到的是整个label,也就是这个gradientLayer根本就不作用,可有可无,然后,我们把label作为遮罩层,它有对象的区域就是它的文字部分,这个文字部分是透明的,正好我们透过文字看到gradientLayer的渐变颜色,而没有对象的部分不透明,我们在脑海里把它裁剪掉,最后正好是我们的效果图的样子;

实例二:颜色渐变的图片

原始图片效果图:


[objc]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. CAGradientLayer *gradientLayer = [CAGradientLayer layer];  
  2. gradientLayer.frame = CGRectMake(10030015050);  
  3. gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];  
  4. [gradientLayer setStartPoint:CGPointMake(0.00.0)];  
  5. [gradientLayer setEndPoint:CGPointMake(0.01.0)];  
  6.   
  7. UIImageView *imageView = [[UIImageView alloc]initWithFrame:gradientLayer.bounds];  
  8. imageView.image = [UIImage imageNamed:@"Map_help_button"];  
  9. [self.view addSubview:imageView];  
  10.   
  11. [self.view.layer addSublayer:gradientLayer];  
  12. gradientLayer.mask = imageView.layer;  

遮罩后效果图:

实例三:通过CAShapeLayer实现图片的裁剪

原始图片:


[objc]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(00100100)];  
  2. imageView.center = self.view.center;  
  3. imageView.image = [UIImage imageNamed:@"Share_bag"];  
  4. [self.view addSubview:imageView];  
  5.   
  6. UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(5050)  
  7.                                                     radius:100 / 2.f  
  8.                                                 startAngle:0  
  9.                                                   endAngle:M_PI*2  
  10.                                                  clockwise:YES];  
  11.   
  12. CAShapeLayer *maskLayer = [CAShapeLayer layer];  
  13. maskLayer.frame = imageView.bounds;  
  14. maskLayer.path = path.CGPath;  
  15.   
  16. [self.view.layer addSublayer:maskLayer];  
  17. imageView.layer.mask = maskLayer;  

裁剪后的效果图:


说明:

这里只是通过这个例子讲解mask的使用,图片的圆角裁剪实际上只需要修改cornerRadius属性即可;

在这里,原始图片作为被遮罩层,maskLayer作为遮罩层,maskLayer的形状正好的是图片大小的圆,这个圆通过贝塞尔路径来构造;两个层一叠加,显示重叠部分,maskLayer有对象的部分也就是圆形部分透明,其他部分不透明,就得到上面的效果图;


这篇关于CALayer的mask属性简介的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/246300

相关文章

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

MySQL 事务的概念及ACID属性和使用详解

《MySQL事务的概念及ACID属性和使用详解》MySQL通过多线程实现存储工作,因此在并发访问场景中,事务确保了数据操作的一致性和可靠性,下面通过本文给大家介绍MySQL事务的概念及ACID属性和... 目录一、什么是事务二、事务的属性及使用2.1 事务的 ACID 属性2.2 为什么存在事务2.3 事务

Spring Cache注解@Cacheable的九个属性详解

《SpringCache注解@Cacheable的九个属性详解》在@Cacheable注解的使用中,共有9个属性供我们来使用,这9个属性分别是:value、cacheNames、key、key... 目录1.value/cacheNames 属性2.key属性3.keyGeneratjavascriptor

Spring Boot 事务详解(事务传播行为、事务属性)

《SpringBoot事务详解(事务传播行为、事务属性)》SpringBoot提供了强大的事务管理功能,通过@Transactional注解可以方便地配置事务的传播行为和属性,本文将详细介绍Spr... 目录Spring Boot 事务详解引言声明式事务管理示例编程式事务管理示例事务传播行为1. REQUI

rust 中的 EBNF简介举例

《rust中的EBNF简介举例》:本文主要介绍rust中的EBNF简介举例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 什么是 EBNF?2. 核心概念3. EBNF 语法符号详解4. 如何阅读 EBNF 规则5. 示例示例 1:简单的电子邮件地址

Python 异步编程 asyncio简介及基本用法

《Python异步编程asyncio简介及基本用法》asyncio是Python的一个库,用于编写并发代码,使用协程、任务和Futures来处理I/O密集型和高延迟操作,本文给大家介绍Python... 目录1、asyncio是什么IO密集型任务特征2、怎么用1、基本用法2、关键字 async1、async