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

相关文章

Java Stream 并行流简介、使用与注意事项小结

《JavaStream并行流简介、使用与注意事项小结》Java8并行流基于StreamAPI,利用多核CPU提升计算密集型任务效率,但需注意线程安全、顺序不确定及线程池管理,可通过自定义线程池与C... 目录1. 并行流简介​特点:​2. 并行流的简单使用​示例:并行流的基本使用​3. 配合自定义线程池​示

PostgreSQL简介及实战应用

《PostgreSQL简介及实战应用》PostgreSQL是一种功能强大的开源关系型数据库管理系统,以其稳定性、高性能、扩展性和复杂查询能力在众多项目中得到广泛应用,本文将从基础概念讲起,逐步深入到高... 目录前言1. PostgreSQL基础1.1 PostgreSQL简介1.2 基础语法1.3 数据库

Python库 Django 的简介、安装、用法入门教程

《Python库Django的简介、安装、用法入门教程》Django是Python最流行的Web框架之一,它帮助开发者快速、高效地构建功能强大的Web应用程序,接下来我们将从简介、安装到用法详解,... 目录一、Django 简介 二、Django 的安装教程 1. 创建虚拟环境2. 安装Django三、创

Python如何调用另一个类的方法和属性

《Python如何调用另一个类的方法和属性》在Python面向对象编程中,类与类之间的交互是非常常见的场景,本文将详细介绍在Python中一个类如何调用另一个类的方法和属性,大家可以根据需要进行选择... 目录一、前言二、基本调用方式通过实例化调用通过类继承调用三、高级调用方式通过组合方式调用通过类方法/静

MySQL 索引简介及常见的索引类型有哪些

《MySQL索引简介及常见的索引类型有哪些》MySQL索引是加速数据检索的特殊结构,用于存储列值与位置信息,常见的索引类型包括:主键索引、唯一索引、普通索引、复合索引、全文索引和空间索引等,本文介绍... 目录什么是 mysql 的索引?常见的索引类型有哪些?总结性回答详细解释1. MySQL 索引的概念2

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

Qt QCustomPlot库简介(最新推荐)

《QtQCustomPlot库简介(最新推荐)》QCustomPlot是一款基于Qt的高性能C++绘图库,专为二维数据可视化设计,它具有轻量级、实时处理百万级数据和多图层支持等特点,适用于科学计算、... 目录核心特性概览核心组件解析1.绘图核心 (QCustomPlot类)2.数据容器 (QCPDataC

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. 使