iOS 离屏渲染探究

• Z时代
• 2024-01-10
• 分类：技术分享

为什么要理解离屏渲染

离屏渲染（Offscreen rendering）对iOS开发者来说不是一个陌生的东西，项目中或多或少都会存在离屏渲染，也是面试中经常考察的知识点。一般来说，大多数人都能知道设置圆角、mask、阴影等会触发离屏渲染，但我们深入的探究一下，大家能够很清楚的知道下面几个问题吗？

打开 Color Off-screen Rendered,同时我们可以借助Xcode或 Reveal 清楚的看到那些图层触发了离屏渲染。

关于常见的设置圆角触发离屏渲染示例说明：

如上图示例代码中（btn.png是一个200x300的本地图片），

• btn1设置了图片，设置了圆角，打开了clipsToBounds = YES，触发了离屏渲染，

其他触发离屏渲染的场景：

• 采用了光栅化的 layer (layer.shouldRasterize)
• 使用了 mask 的 layer (layer.mask)
• 需要进行裁剪的 layer (layer.masksToBounds /view.clipsToBounds)
• 设置了组透明度为 YES，并且透明度不为 1 的layer (layer.allowsGroupOpacity/ layer.opacity)
• 使用了高斯模糊
• 添加了投影的 layer (layer.shadow*)
• 绘制了文字的 layer (UILabel, CATextLayer, Core Text 等)

shouldRasterize 光栅化

方案一

self.view.layer.clipsToBounds = YES;self.view.layer.cornerRadius = 4.f; 

• clipsToBounds：UIView中的属性，其值主要决定了在视图上的子视图，超出父视图的部分是否截取，默认为NO，即不裁剪子视图超出部分。

• masksToBounds：CALayer中的属性，其值主要决定了视图的图层上的子图层，超出父图层的部分是否需要裁减掉。默认NO。

方案二

如果产品设计圆角+阴影的卡片，可以使用切图实现圆角+阴影，避免触发离屏渲染

方案三

贝塞尔曲线绘制圆角

- (UIImage *)imageWithCornerRadius:(CGFloat)radius ofSize:(CGSize)size{
/* 当前UIImage的可见绘制区域 */
CGRect rect = (CGRect){0.f,0.f,size};
/* 创建基于位图的上下文 */
UIGraphicsBeginImageContextWithOptions(size, NO, UIScreen.mainScreen.scale);
/* 在当前位图上下文添加圆角绘制路径 */
CGContextAddPath(UIGraphicsGetCurrentContext(), [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius].CGPath);
/* 当前绘制路径和原绘制路径相交得到最终裁剪绘制路径 */
CGContextClip(UIGraphicsGetCurrentContext());
/* 绘制 */
[self drawInRect:rect];
/* 取得裁剪后的image */
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
/* 关闭当前位图上下文 */
UIGraphicsEndImageContext();
return image;
} 

方案四

CAShapeLayer + UIBezierPath 绘制圆角来实现UITableViewCell圆角并绘制边框颜色（这种方式比直接设置圆角方式好，但也会触发离屏渲染）,代码如下：

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = CGRectMake(0, 0, cell.width, cell.height);
CAShapeLayer *borderLayer = [CAShapeLayer layer];
borderLayer.frame = CGRectMake(0, 0, cell.width, cell.height);
borderLayer.lineWidth = 1.f;
borderLayer.strokeColor = COLOR_LINE.CGColor;
borderLayer.fillColor = [UIColor clearColor].CGColor;
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, cell.width, cell.height) cornerRadius:kRadiusCard];
maskLayer.path = bezierPath.CGPath;
borderLayer.path = bezierPath.CGPath;
[cell.contentView.layer insertSublayer:borderLayer atIndex:0];
[cell.layer setMask:maskLayer];
}

YYKit是开发中经常用的三方库，YYImage对图片圆角的处理方法是值得推荐的，附上实现源码：

- (UIImage *)imageByRoundCornerRadius:(CGFloat)radius
corners:(UIRectCorner)corners
borderWidth:(CGFloat)borderWidth
borderColor:(UIColor *)borderColor
borderLineJoin:(CGLineJoin)borderLineJoin {
if (corners != UIRectCornerAllCorners) {
UIRectCorner tmp = 0;
if (corners & UIRectCornerTopLeft) tmp |= UIRectCornerBottomLeft;
if (corners & UIRectCornerTopRight) tmp |= UIRectCornerBottomRight;
if (corners & UIRectCornerBottomLeft) tmp |= UIRectCornerTopLeft;
if (corners & UIRectCornerBottomRight) tmp |= UIRectCornerTopRight;
corners = tmp;
}
UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
CGContextScaleCTM(context, 1, -1);
CGContextTranslateCTM(context, 0, -rect.size.height);
CGFloat minSize = MIN(self.size.width, self.size.height);
if (borderWidth < minSize / 2) {
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, borderWidth, borderWidth) byRoundingCorners:corners cornerRadii:CGSizeMake(radius, borderWidth)];
[path closePath];
CGContextSaveGState(context);
[path addClip];
CGContextDrawImage(context, rect, self.CGImage);
CGContextRestoreGState(context);
}
if (borderColor && borderWidth < minSize / 2 && borderWidth > 0) {
CGFloat strokeInset = (floor(borderWidth * self.scale) + 0.5) / self.scale;
CGRect strokeRect = CGRectInset(rect, strokeInset, strokeInset);
CGFloat strokeRadius = radius > self.scale / 2 ? radius - self.scale / 2 : 0;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:strokeRect byRoundingCorners:corners cornerRadii:CGSizeMake(strokeRadius, borderWidth)];
[path closePath];
path.lineWidth = borderWidth;
path.lineJoinStyle = borderLineJoin;
[borderColor setStroke];
[path stroke];
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}

拓展阅读：

iOS圆角的离屏渲染，你真的弄明白了吗：关于圆角触发离屏渲染更详细的分析

关于iOS离屏渲染的深入研究：即刻技术团队对离屏渲染的解析

以上是 iOS 离屏渲染探究 的全部内容， 来源链接： utcz.com/a/31078.html