iOS 中的离屏渲染

监测离屏渲染方法

在项目中我们应该尽量避免离屏渲染，因为离屏渲染会大量占用 CPU 和内存。

苹果已经帮我们将监测离屏渲染工作大量简化，只需要打开 Simulator，在 Debug 菜单中有一个 Color Off-screen Rendered 选项，勾上它

然后运行项目，就可以看到哪些视图会离屏渲染了，一般情况下，使用了 UIView 中的 layer 图层的，包括：阴影、圆角等都会产生离屏渲染，此时视图会变为黄色。

由上图可见，使用了圆角的地方都被标为黄色了，说明会离屏渲染对于圆角以及阴影，我们日常用得很多。

先来看看阴影的绘制

对于下面的代码想必都非常熟悉

这里是在 table 的 cell 中对 imageView 添加阴影，我们看看渲染结果

系统标为黄色，说明会离屏渲染，系统会在屏幕外将阴影以及圆角计算好，然后在显示到屏幕上。以上绘制阴影的方式之所以会出现离屏渲染，是因为我们告诉 iOS 自动计算阴影绘制的路径，所以它需要在其阴影在屏幕上显示之前就要将这一切计算好并渲染好。解决它的方式是为它提供一个确定的阴影绘制路径

再来看看利用 layer.cornerRadius 裁剪圆角

代码如图，渲染结果并未发现有离屏渲染的出现

说明平时单独使用layer.cornerRadius 裁剪不会引起离屏渲染，但是当它和绘制阴影一同使用时就会出现离屏渲染，结果就是类似于本文的第二张图一样，四个角的圆角裁剪出现了离屏渲染

用 Core Graphics 绘制的方式解决以上的离屏渲染问题

阴影和圆角在现在的 App 上时非常常见的，不可避免的需要处理这种问题，而 Core Graphics 就可以有效的处理此类问题而又不会产生离屏渲染

UIKit 中有一个类

UIGraphicsImageRenderer

这个类可以绘制一个图片，它是和Core Graphics 框架进行配合工作的，我们可以通过这个方式进行裁剪

let renderer = UIGraphicsImageRenderer(size: original.size)
let image = renderer.image { cxt in
    cxt.cgContext.addEllipse(in: CGRect(origin: .zero, size: original.size))
    // 裁剪
    cxt.cgContext.clip()
    // 将图片绘制: 因为画布大小是图片的大小，因此从（0,0）开始绘制
    original.draw(at: .zero)
}
cell.imageView?.image = image

通过以上代码将图片进行裁剪，然后阴影用常规的方式添加路径的方法进行处理，即可得到阴影 + 圆角的效果

如果想要画圆角，则只要生成一个圆角路径进行裁剪即可

cxt.cgContext.addPath(UIBezierPath(roundedRect: renderRect, cornerRadius: 10).cgPath)
// 裁剪
cxt.cgContext.clip()

拓展

由于我们对于图片的大小大部分情况下是未知，特别是服务端返回的图片，我们可以利用 UIGraphicsImageRenderer 来限制其大小，这样可以优化部分内存的使用

当然我们也可以通过它来绘制阴影，但是阴影效果不是很好

// 绘制阴影，一旦绘制，这个阴影就会影响到后续的所有绘制，直到将阴影绘制取消
cxt.cgContext.setShadow(offset: .zero, blur: 200, color: UIColor.black.cgColor)
// 由于Core Graphics 中的阴影是没有具体形状的，因此填充
cxt.cgContext.fillEllipse(in: renderRect)
// 取消阴影绘制
cxt.cgContext.setShadow(offset: .zero, blur: 0, color: nil)