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

相关文章

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

《解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题》在Spring开发中,@Autowired注解常用于实现依赖注入,它可以应用于类的属性、构造器或setter方法上,然... 目录1. 为什么 @Autowired 在属性上被警告?1.1 隐式依赖注入1.2 IDE 的警告:

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为

Golang的CSP模型简介(最新推荐)

《Golang的CSP模型简介(最新推荐)》Golang采用了CSP(CommunicatingSequentialProcesses,通信顺序进程)并发模型,通过goroutine和channe... 目录前言一、介绍1. 什么是 CSP 模型2. Goroutine3. Channel4. Channe

Java如何通过反射机制获取数据类对象的属性及方法

《Java如何通过反射机制获取数据类对象的属性及方法》文章介绍了如何使用Java反射机制获取类对象的所有属性及其对应的get、set方法,以及如何通过反射机制实现类对象的实例化,感兴趣的朋友跟随小编一... 目录一、通过反射机制获取类对象的所有属性以及相应的get、set方法1.遍历类对象的所有属性2.获取

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j