最近开始重构我们小说的项目,有机会很详细的去思考一些细节问题。在造轮子的时候弄到添加圆角和阴影的工具,就又回顾一下这个部分的知识,并且实践了一下,什么情况才会产生离屏渲染。
以下使用iOS15.4模拟器进行测试。控件选用的button,因为本身多图层,设置了背景颜色和image
情况一 使用系统方法进行操作
//button测
UIButton * testView = [[UIButton alloc]init];
testView.backgroundColor = [UIColor blueColor];
[self.view addSubview:testView];
[testView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.width.height.mas_equalTo(100);
}];
[testView setImage:[UIImage imageNamed:@"search_icon"] forState:(UIControlStateNormal)];
//系统方法切圆角 加边框 加阴影
testView.layer.cornerRadius = 40.0;
直接设置圆角没产生离屏渲染!
- 开启
clipsToBounds
testView.clipsToBounds = YES;
产生离屏渲染
- 开启
masksToBounds
testView.layer.masksToBounds = YES;
产生离屏渲染!
但是!
1、如果我这个button不设置image,然后开启testView.layer.masksToBounds = YES
或者testView.clipsToBounds = YES;
是不产生离屏渲染的。
2、或者Button设置了图片,但是不设置背景色,然后设置testView.layer.masksToBounds = YES
或者testView.clipsToBounds = YES;
也不会产生离屏渲染!
//button测
UIButton * testView = [[UIButton alloc]init];
testView.backgroundColor = [UIColor blueColor];
[self.view addSubview:testView];
[testView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.width.height.mas_equalTo(100);
}];
testView.layer.cornerRadius = 40.0;
testView.layer.masksToBounds = YES;
// testView.clipsToBounds = YES;
也就是Button会产生离屏渲染的情况是:
设置了背景+设置了Image,并且开启了testView.layer.masksToBounds = YES
或者testView.clipsToBounds = YES;
都会造成离屏渲染。
- 加边框+加圆角+开启画布烘托
testView.layer.cornerRadius = 40.0;
testView.layer.borderWidth = 3;
testView.layer.borderColor = [UIColor redColor].CGColor;
testView.layer.masksToBounds = YES;
产生离屏渲染。
- 加边框+开启画布烘托,不加圆角
不会产生离屏渲染!
testView.layer.borderWidth = 3;
testView.layer.borderColor = [UIColor redColor].CGColor;
testView.layer.masksToBounds = YES;
- 加阴影
testView.layer.shadowColor = [UIColor blackColor].CGColor;
testView.layer.shadowOffset = CGSizeMake(0,10);
testView.layer.shadowOpacity = 1;
产生离屏渲染
!只要用系统的方法加了阴影,就会产生离屏渲染!
因为重构项目么,所以想找到比较好的方案,尽量不产生离屏渲染,试了下网络呼声最高的贝塞尔曲线去实现。
情况二 使用贝塞尔曲线实现
- 贝塞尔画
Button
圆角
//贝塞尔切圆角
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(40, 40)];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(0, 0, 100, 100);
layer.path = bezierPath.CGPath;
testView.layer.mask = layer;
产生离屏渲染
!
- 贝塞尔绘制
View
圆角
也会产生离屏渲染。绘制UIImageView也会产生离屏渲染。
- 贝塞尔绘制
阴影
UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
testView.layer.masksToBounds = NO;
testView.layer.shadowColor = UIColor.blackColor.CGColor;
testView.layer.shadowOffset = CGSizeMake(0, 5);
testView.layer.shadowOpacity = 0.5f;
testView.layer.shadowPath = shadowPath.CGPath;
不会产生离屏渲染!
产生离屏渲染的原因
之前做过一次Tabel的优化有提过关于离屏渲染相关的。核心是因为画家算法
。
简单来说,如果图层可以一次性绘制完毕,那么就不需要保存在离屏缓冲区,不需要进行二次绘制,就不会造成离屏渲染。
如果图层较多,并且开启了画布烘托,那么系统会让所有的图层都遵守这个烘托规则,当实施画家算法的时候,较远的图层绘制完毕不会立刻被丢弃,就会存在离屏缓冲区,等待二次绘制,完成程序指令期待的绘制结果。详细过程可以了解下画家算法
(搜索引擎搜一下🐶)。
总结
经过以上的实践,我们来总结一下会产生离屏渲染的情况。
- UIButton这种多图层的UI,设置了背景色+Image+开启了画布烘托,会造成离屏渲染。
- 系统方法绘制阴影,会发生离屏渲染。
- 使用贝塞尔曲线绘制圆角,会产生离屏渲染。
- UIImageView设置了图片,设置了背景色,开启画布烘托,并且进行系统切圆角,产生离屏。
不会产生的情况:
- 多图层的控件只设置了图片或者只设置背景,进行切圆角,设置边框,开启画布烘托不会产生离屏;
- 普通View设置个圆角一般没啥事儿。这个貌似是在iOS9之后优化的,不会产生离屏了。
不知道有没有搞错的情况,有问题留言哦~