2022-06-09老生常谈的圆角和阴影问题

最近开始重构我们小说的项目，有机会很详细的去思考一些细节问题。在造轮子的时候弄到添加圆角和阴影的工具，就又回顾一下这个部分的知识，并且实践了一下，什么情况才会产生离屏渲染。

以下使用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;

直接设置圆角没产生离屏渲染！

image.png

• 开启clipsToBounds

testView.clipsToBounds = YES;

产生离屏渲染

• 开启masksToBounds

testView.layer.masksToBounds = YES;

产生离屏渲染！

image.png

但是！
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;

1、2分别设置一种的情况，不产生离屏渲染

也就是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;

产生离屏渲染。

image.png

• 加边框+开启画布烘托，不加圆角
  不会产生离屏渲染！

    testView.layer.borderWidth = 3;
    testView.layer.borderColor = [UIColor redColor].CGColor;
   testView.layer.masksToBounds = YES;

image.png

• 加阴影

testView.layer.shadowColor = [UIColor blackColor].CGColor;
testView.layer.shadowOffset = CGSizeMake(0,10);
testView.layer.shadowOpacity = 1;

产生离屏渲染！只要用系统的方法加了阴影，就会产生离屏渲染！

image.png

因为重构项目么，所以想找到比较好的方案，尽量不产生离屏渲染，试了下网络呼声最高的贝塞尔曲线去实现。

情况二 使用贝塞尔曲线实现

• 贝塞尔画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也会产生离屏渲染。

image.png

• 贝塞尔绘制阴影

 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;

不会产生离屏渲染！

image.png

产生离屏渲染的原因

之前做过一次Tabel的优化有提过关于离屏渲染相关的。核心是因为画家算法。
简单来说，如果图层可以一次性绘制完毕，那么就不需要保存在离屏缓冲区，不需要进行二次绘制，就不会造成离屏渲染。

如果图层较多，并且开启了画布烘托，那么系统会让所有的图层都遵守这个烘托规则，当实施画家算法的时候，较远的图层绘制完毕不会立刻被丢弃，就会存在离屏缓冲区，等待二次绘制，完成程序指令期待的绘制结果。详细过程可以了解下画家算法（搜索引擎搜一下🐶）。

总结

经过以上的实践，我们来总结一下会产生离屏渲染的情况。

• UIButton这种多图层的UI，设置了背景色+Image+开启了画布烘托，会造成离屏渲染。
• 系统方法绘制阴影，会发生离屏渲染。
• 使用贝塞尔曲线绘制圆角，会产生离屏渲染。
• UIImageView设置了图片，设置了背景色，开启画布烘托，并且进行系统切圆角，产生离屏。

不会产生的情况：

• 多图层的控件只设置了图片或者只设置背景，进行切圆角，设置边框，开启画布烘托不会产生离屏；
• 普通View设置个圆角一般没啥事儿。这个貌似是在iOS9之后优化的，不会产生离屏了。

---

不知道有没有搞错的情况，有问题留言哦~