图层CALayer

Posted 2022-11-30 Shayne_win

0：UIView
所有的视图都是由UIView派生而来，UIView可以处理触摸事件，可以支持Core Graphics绘图，可以做仿射变换(旋转或缩放)，以及简单的滑动和渐变动画。
1：CALayer
CALayer和UIView一样，最大的不同是CALayer不响应事件。每一个UIView都对应一个CALayer图层属性(但是也可以添加无数个子图层)。实际上CALayer才是真正用来在屏幕上显示和做动画的，UIView只是对它的一个封装，提供了一些处理触摸的功能以及Core Animation底层方法的高级接口。这样分离功能的原因就是因为OSX上的NSView是用鼠标处理的，这样ios和MacOS就可以共享CALayer的代码了。
CALayer最常用的地方就是在content上放置寄宿图：
contents 是Any类型，但是实际上只有CGImage类型才能起效果；它常用的处理contents的属性包括:
contentRect:显示图片的某一部分；
contentGravity：类似于UIImage的contentMode
contentScale：图片的缩放尺寸；
maskToBounds：是否显示超出layer范围的内容
contentsCenter：设置可拉伸区域
cornerRadius：设置圆角
borderWidth：边框宽度
borderColor：边框颜色
shadowRadius：阴影圆角
shadowOpacity：阴影透明数
shadowOffset：阴影size
shadowColor：阴影color
shadowPath：使用CGPath对图层指定阴影形状，可以提高性能

    blueLayer = CALayer()

    blueLayer.frame = CGRect(x: 50, y: 50, width: 100, height: 100)

    blueLayer.backgroundColor = UIColor.blue.cgColor

    layerView.layer.addSublayer(blueLayer)

    let img = UIImage(named: "BROOK")

    blueLayer.contents = img?.cgImage //基本是UIImage类型，其他类型没有效果

    blueLayer.contentsRect = CGRect.init(x: 0, y: 0, width: 0.5, height: 0.5) //显示图的某一部分，按坐标来的，1的话就是显示全部

    blueLayer.contentsGravity = kCAGravityCenter //类似于UIImage的contentMode

    blueLayer.contentsScale = (img?.scale)! //按图片大小缩放

    blueLayer.masksToBounds = true // 是否显示超出Layer.frame范围的内容

blueLayer.contentsCenter = CGRect.init(x: 0.25, y: 0.25, width: 0.5, height: 0.5) //它定义了一个图片可拉伸的区域

 Custome Drawing:如果不使用图片的话，还可以直接用Core Graphics直接在contents绘制寄宿图，通过继承UIView的drawRect(这个方法容易造成CPU和内存的浪费，莫要轻易使用)方法进行绘制，当视图在屏幕上出现时，drawRect会被调用；手动调用setNeedDisplay方法，drawRect也会被调用。不过drawRect通常在UIView中使用，所以如果要在controller上使用，就可以直接实现CALayerDelegate。

extension CALayerTestController:CALayerDelegate

//事先会先调用draw(_ layer: CALayer），如果没有实现就会找draw(_ layer: CALayer, in ctx: CGContext)函数

func draw(_ layer: CALayer, in ctx: CGContext) 

    //使用Core Graphics画图,这里会返回图层的Context给你，直接用就好

    ctx.setLineWidth(10)

    ctx.setStrokeColor(UIColor.red.cgColor)

    ctx.strokeEllipse(in: layer.bounds)

 CALayer虽然不关心任何响应事件，但是它有一系列方法帮你处理事件:contains和hitTest;
 contains可以判断一个点是否在layer的frame里面；hitTest则可以获取到点击事件所在图层：

override func touchesBegan(_ touches: Set, with event: UIEvent?)

    let point = touches.first?.location(in: self.view)

    //contains

    if self.layerView.layer.contains(point!) 

        if blueLayer.contains(point!) 

            print("contain")

        

    

    //hittest

    let layer = self.layerView.layer.hitTest(point!)

    if layer == blueLayer 

        print("contain")

    

CALayer的锚点anchorPoint可以修改layer的位置:

//这是一个时钟的例子，在xib里让时钟分钟秒钟的center相同，然后对锚点进行调整，使三个图片的一端在同一个地方。

override func viewDidLoad()
super.viewDidLoad()
changeAnchorPoint()

    timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(tick), userInfo: nil, repeats: true)

extension CALayerTestController

//修改图片的锚点

func changeAnchorPoint()

    self.hour.layer.anchorPoint = CGPoint(x: 0.5, y: 0.9)

    self.min.layer.anchorPoint = CGPoint(x: 0.5, y: 0.8)

    self.second.layer.anchorPoint = CGPoint(x: 0.1, y: 0.5)



func tick()

    //从当前时间拿到时分秒

    let calendar = Calendar(identifier: .gregorian)

    let components = calendar.dateComponents([.hour,.minute,.second], from: Date())

    let hourAngle = (CGFloat(components.hour!)/12.0) * CGFloat(Double.pi * 2.0)

    let minAngle = (CGFloat(components.minute!)/12.0) * CGFloat(Double.pi * 2.0)

    let secondAngle = (CGFloat(components.second!)/12.0) * CGFloat(Double.pi * 2.0)

    //转起来

    self.hour.transform = CGAffineTransform(rotationAngle: hourAngle)

    self.min.transform = CGAffineTransform(rotationAngle: minAngle)

    self.second.transform = CGAffineTransform(rotationAngle: secondAngle)

CALayer的阴影shadow，阴影是根据寄宿图的轮廓来确定的：

layerView.layer.shadowOffset = CGSize(width: 5, height: 5)

    layerView.layer.shadowOpacity = 0.9

    layerView.layer.shadowColor = UIColor.black.cgColor

    layerView.layer.shadowRadius = 0 //阴影和视图直接的边界线，为0边界线最明显

但是有一个问题，那就是如果图层需要masksToBounds剪裁，那么阴影就会被剪裁掉。那么要解决这个问题的方法就是用到两个图层：一个画阴影的外图层，一个用masksToBounds剪裁内容的内图层。（其实就是在需要阴影的view下面插入一个view，然后对其阴影进行设置，这样在视觉效果上就是一样的了）

let newShadowViewLayer = UIView()
newShadowViewLayer.backgroundColor = UIColor.white //必须要有颜色或其他填充物，否则就没有寄宿图，而阴影正好是围绕寄宿图的轮廓来确定的
newShadowViewLayer.frame = CGRect(x: (ContentWidth-200)/2, y: (ContentHeight-200)/2+220, width: 200, height: 200)
newShadowViewLayer.layer.shadowOffset = CGSize(width: 5, height: 5)
newShadowViewLayer.layer.shadowOpacity = 0.5
newShadowViewLayer.layer.shadowColor = UIColor.black.cgColor
newShadowViewLayer.layer.shadowRadius = 0
newShadowViewLayer.layer.cornerRadius = 4.0
newShadowViewLayer.layer.masksToBounds = false
self.view.addSubview(newShadowViewLayer) //注意不是加在layerView上,而且在layerView的更底部图层上，如果和self.view.addSubview(layerView)调个位置，则一样没有效果

layerView = UIView(frame: CGRect(x: (ContentWidth-200)/2, y: (ContentHeight-200)/2+220, width: 200, height: 200))
layerView.backgroundColor = UIColor.red
self.view.addSubview(layerView)

shadowPath属性，实时计算阴影是非常耗资源的一件事情，尤其是有多个字图层，而且还有透明效果的时候。所以为了提高性能就可以用Core Graphics提供的CGPath给图层设置任意形状的阴影：

//给钟表添加一个圆形的阴影
self.clock.layer.shadowOpacity = 0.5
let circlePath = CGMutablePath() //CGPath
circlePath.addEllipse(in: self.clock.bounds)
// self.clock.layer.shadowPath = circlePath
//给钟表添加一个矩形的阴影
let squarePath = CGMutablePath()
squarePath.addRect(self.clock.bounds)
self.clock.layer.shadowPath = squarePath

图层蒙版Mask， 给一张图片加蒙版，那么就会被剪裁成拥有蒙版的外形：