view 和 layer 引出的mask 之间有何关系？

IOS

2023-09-09 12:01:50

UIView和CALAyer是什么？

View（视图） 是iOS开发中图形用户界面的基本组成部分，它可以显示文本、图像和其他用户控件。View在iOS应用程序中通常是用来提供界面的元素和交互。
CALAyer（图层） 是iOS开发中图形渲染的实际操作者，它是iOS应用程序中视图的图形显示部分。CALAyer有自己的坐标系统，它可以管理自己图形内容的显示，与CALAyer关联的任何内容都将以CALAyer为根坐标点来进行绘制。

UIView和CALAyer的mask

CALAyer的mask 允许开发者使用另一个CALAyer的alpha通道来剪切图层的可见部分。只有当mask的alpha通道为1的像素才会被显示，alpha通道为0的像素将被隐藏。
View的mask 是一个属性，它可以用来控制view的可见部分。view的mask可以是CALAyer的实例，也可以是另一个view的实例。当view的mask被设置时，只有mask的可见部分将被显示。

UIView和CALAyer的mask之间的关系

UIView的mask与CALAyer的mask本质上是相同的，区别在于CALAyer的mask只能被应用于 CALAyer 本身，而 UIView 的 mask 可以被应用于 UIView 本身或其子视图。
CALAyer的mask通常用于创建自定义形状或裁剪图层的内容，而 UIView 的mask 通常用于创建自定义形状或裁剪视图的内容以及对子视图进行裁剪。

实际应用

1、使用CALAyer的mask实现圆形图片

//创建CALAyer
let maskLayer = CALAyer()
maskLayer.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
maskLayer.cornerRadius = 50

//创建圆形图片
let image = #imageLiteral(resourceName: "image.png")
let imageLayer = CALAyer()
imageLayer.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
imageLayer.contents = image.cgImage

//将CALAyer的mask应用于图片图层
imageLayer.mask = maskLayer

//将图片图层添加到view
view.layer.addSublayer(imageLayer)

2、使用CALAyer的mask创建渐变效果

//创建CALAyer
let gradientLayer = CAGradientLayer()
gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
gradientLayer.colors = [
    #colorLiteral(red: 0.2392156869, green: 0.6745098039, blue: 0.9686274529, alpha: 1).cgColor,
    #colorLiteral(red: 0.1019607857, green: 0.2784313855, blue: 0.400000006, alpha: 1).cgColor
]

//创建CALAyer
let maskLayer = CALAyer()
maskLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
maskLayer.cornerRadius = 20

//将CALAyer的mask应用于图片图层
gradientLayer.mask = maskLayer

//将图片图层添加到view
view.layer.addSublayer(gradientLayer)

3、使用CALAyer的mask创建阴影效果

//创建CALAyer
let shadowLayer = CALAyer()
shadowLayer.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
shadowLayer.cornerRadius = 20
shadowLayer.shadowColor = #colorLiteral(red: 0.2392156869, green: 0.6745098039, blue: 0.9686274529, alpha: 1).cgColor
shadowLayer.shadowOffset = CGSize(width: 10, height: 10)
shadowLayer.shadowOpacity = 0.5
shadowLayer.shadowRadius = 5

//创建CALAyer
let contentLayer = CALAyer()
contentLayer.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
contentLayer.backgroundColor = #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1).cgColor

//将CALAyer的mask应用于图片图层
shadowLayer.mask = contentLayer

//将图片图层添加到view
view.layer.addSublayer(shadowLayer)