• [iOS开发]离屏渲染优化方案


    阴影

    laver本身是一块矩形区域,而阴影是作用于在整个非透明区域,并显示在所有layer的最下方。
    根据画家算法,由远及近的渲染,阴影将会是是第一个被渲染的,但是阴影渲染有一个前提:我们必须已经画好了所有的layer和子layer
    所以这时我们就需要一个临时缓存,这个缓存区就是离屏缓冲区,用来将所有layer都渲染完成,再根据所有layer和子layer组合后的图层的形状,添加阴影到FrameBuffer,最后显示到屏幕上。

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    imageView.image = [UIImage imageNamed:@"111.jpg"];
    imageView.center = CGPointMake(self.view.frame.size.width / 2, 200);
    [self.view addSubview:imageView];
    imageView.layer.shadowColor = UIColor.lightGrayColor.CGColor;
    imageView.layer.shadowOpacity = 1.0;
    imageView.layer.shadowRadius = 2.0;
    imageView.layer.shadowOffset = CGSizeMake(5, 5);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    离屏渲染:
    请添加图片描述

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    imageView.image = [UIImage imageNamed:@"111.jpg"];
    imageView.center = CGPointMake(self.view.frame.size.width / 2, 200);
    [self.view addSubview:imageView];
    imageView.layer.shadowColor = UIColor.lightGrayColor.CGColor;
    imageView.layer.shadowOpacity = 1.0;
    imageView.layer.shadowRadius = 2.0;
    //imageView.layer.shadowOffset = CGSizeMake(5, 5);
    imageView.layer.shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(5, 5, imageView.frame.size.width, imageView.frame.size.height)].CGPath;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    改成这样,就相当于知道了位置,可以先画阴影了:
    请添加图片描述
    此外还可以直接添加一个阴影图层或者使用Core Graphics绘制阴影。

    需要裁剪的layer

    这种场景就包含我们常用的圆角处理和clipsToBounds的处理。

    注意:iOS官方针对UlImageView有一些优化:在iOS9之前,UllmageViewUIButton通过cornerRadius+masksToBounds 设置圆角都会触发离屏渲染,但是UImageView在iOS9以后,针对UIImageView中的image设置圆角并不会触发离屏渲染,如果加上了背景色或者阴影等其他效果还是会触发离屏渲染的。

    这个的优化方案前面提过了。

    使用了mask的layer

    layer.mask
    
    • 1
    • mask是覆盖在所有layer及其子layer之上的,可能还带有一定的透明度。
    • mask也是需要等整个layer树绘制完成,再加上mask和组合后的layer进行组合,所以需要开辟一个独立于FrameBuffer的内存,用于将layer及其子layer画完,最后再和mask进行组合,存储到FrameBuffer,视频控制器从FrameBuffer中读取数据显示到屏幕上。

    优化方案:
    不使用mask,使用混合图层,在layer上方叠加相应mask形状的半透明layer

    设置了组透明度为YES,并且透明度不为1的layer

    • group opacity中alpha并不是分别应用到每一层之上,需要整个layer树画完之后,在统一加上alpha,和底层其他layer的像素进行组合,此时显然无法通过一次遍历就得到结果
    • 需要另外开启一个独立内存,先将layer及其子layer画好,最后给组合后的图层加上alpha进行渲染,将最终结
      果存储到帧缓冲区
    • GroupOpacity 开启离屏渲染的条件是:laver.opacity!=1.0并且有子layer 或者背景图

    优化方案:
    关闭allowsGroupOpacity属性,根据产品需求自己控制layer透明度

    采用了光栅化的layer

    如果layer的layer.shouldRasterize被设置为true,会在触发离屏渲染的同时,将光栅化后的内容缓存起来,如果在下一次,对应的layer和子layer没有改变,则复用离屏缓冲区的结果,可以很大程度提升性能
    。当视图内容是静态不变时,设置 shouldRasterize(光栅化)为YES,此方案最为实用方便。

    imageView.layer.shouldRasterize = YES;
    imageView.layer.rasterizationScale = imageView.layer.contentsScale;
    
    • 1
    • 2

    但当视图内容是动态变化(如后台下载图片完毕后切换到主线程设置)时,使用此方案反而增加系统负荷。

    绘制了文字的layer

    想要在 UILabel 和 UITextView 上实现低成本的圆角(不触发离屏渲染),需要保证 layer 的contents呈现透明的背
    景色,文本视图类的layer 的contents默认是透明的(字符就在这个透明的环境里绘制、显示),此时只需要设置 la
    yer 的backgroundColor, 再加上cornerRacius就可以搞定了。不过 UlLabel 上设置backgroundColor的行为被更
    改了,不再是设定layer 的背景色而是为contents设置背景色,UITextView 则没有改变这一点

    • 不要直接利用 labellbackaroundcolor =acolor 设置背景色
    • 不要直接在XIB中为label设置背景色
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 60)];
    label.center = CGPointMake(self.view.frame.size.width / 2, 300);
    [self.view addSubview:label];
    label.text = @"我是label";
    label.textAlignment = NSTextAlignmentCenter;
    label.layer.borderColor = [UIColor blackColor].CGColor;
    label.layer.borderWidth = 2;
    label.layer.cornerRadius = 10;
    label.layer.masksToBounds = YES;
    label.backgroundColor = [UIColor systemCyanColor];
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    请添加图片描述
    优化方案:

    //label.layer.masksToBounds = YES;
    //label.backgroundColor = [UIColor systemCyanColor];
    label.layer.backgroundColor = [UIColor systemCyanColor].CGColor;
    
    • 1
    • 2
    • 3

    请添加图片描述

    使用高斯模糊(毛玻璃)效果

    iOS屏幕显示推送通知页面或者UIVisualEffectView

    EDGE ANTIALIASING(抗锯齿)

    不设置 allowsEdgeAntialiasing 属性为YES(默认为NO)

    总结

    • RoundedCorner(圆角) 在仅指定cornerRadius时不会触发离屏渲染,仅适用于特殊情况:contents为 nil 或者contents不会遮挡背景色时的圆角。
    • Shawdow 可以通过指定路径来取消离屏渲染。
    • Mask 无法取消离屏渲染,可以利用混合图层来进行优化。
  • 相关阅读:
    web前端-HTML图像,表格,列表的使用
    MST007 摩托车磁电机同步调压器控制IC
    自动驾驶——为什么需要仿真?
    Arcgis多值提取至点所有波段数值一样
    CG MAGIC进行实体渲染后!分析渲染器CR和VR的区别之处!
    新库上线 | CnOpenData卫生和社会工作业工商注册企业基本信息数据
    手机直播录屏软件哪家好?看这篇就够了!
    GPT-4:论文阅读笔记
    socket 到底是个啥
    现在还不是买入阿里巴巴的时候
  • 原文地址:https://blog.csdn.net/weixin_52192405/article/details/127442905