iOS离屏渲染的检测和优化

2020-07-17  本文已影响0人  shawnr

iOS离屏渲染介绍了离屏渲染的逻辑和原理,我们知道离屏渲染对于性能会有较大的消耗,那么开发中怎么避免产生离屏渲染或者优化离屏渲染呢?

离屏渲染的检测
  1. Debug功能调试
    打开的Debug --> Color Off-screen Rendered


    simulator-debug.png

Color Off-screen Rendered 开启后会把那些需要离屏渲染的图层高亮成黄色,这就意味着黄色图层可能存在性能问题。

  1. 离屏渲染的优化
UIButton *cornerBtn = [[UIButton alloc] initWithFrame:CGRectMake(60, 88, 80, 60)];
cornerBtn.backgroundColor = [UIColor redColor];
[cornerBtn setTitle:@"这是按钮" forState:UIControlStateNormal];
cornerBtn.layer.cornerRadius = 30.f;
//cornerBtn.layer.masksToBounds = YES;
[self.view addSubview:cornerBtn];

所以不裁剪子视图设置圆角的情况下是不会产生离屏渲染的
在iOS9之后苹果系统对圆角进行了优化,UIImageView和UILabel即使使用了layer.masksToBounds = YES;仍然不会产生离屏渲染,但是UIButton如果使用layer.masksToBounds = YES剪切子视图仍然会产生离屏渲染

②. 对图片进行提前切圆角的操作:

@implementation UIImage (Extension)
- (UIImage *)roundedCOrnerImageWithCornerRadius:(CGFloat)cornerRadius {
    CGFloat w = self.size.width;
    CGFloat h = self.size.height;
    CGFloat scale = [UIScreen mainScreen].scale;
    if (cornerRadius < 0 ) {
        cornerRadius = 0;
    } else if (cornerRadius > MIN(w, h)) {
        cornerRadius = MIN(w, h) / 2.f;
    }
    UIImage *image;
    CGRect imageFrame = CGRectMake(0, 0, w, h);
    UIGraphicsBeginImageContextWithOptions(self.size, NO, scale);
    [[UIBezierPath bezierPathWithRoundedRect:imageFrame cornerRadius:cornerRadius] addClip];
    [self drawInRect:imageFrame];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}
@end

需要注意的是对图片切圆角时,最终的圆角是可能有缩放的,比如图片的尺寸imgSize为(100,200)而UIImageView的尺寸为(50,50)圆角尺寸如果为10,那么最终的效果是(100,200)的图片圆角为10,显示到UIImageView上x轴方向缩放2倍,y轴方向缩放4倍,所以这种方案缺点比较明显。
③. YYImage的圆角处理方案:

- (UIImage *)yy_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;
}

YYImage本质和第一种方案相同,都是对image的切圆角操作
④. 让UI切一个中间透明的镂空图片覆盖在UIImageView上

UIBezierPath *path=[UIBezierPath bezierPathWithRect:shadowView.bounds];
shadowView.layer.shadowPath = path.CGPath;
上一篇下一篇

猜你喜欢

热点阅读