美文网首页
iOS图片圆角优化(一)

iOS图片圆角优化(一)

作者: 追风筝的荧火虫 | 来源:发表于2017-09-23 11:35 被阅读234次

关于图片圆角的,用到了大量圆角图片。然而,系统圆角会导致离屏渲染的问题,出于性能考虑,于是有了图片圆角渲染工具HJCornerRadius,其最大优势在于使用简单,一行搞定图片圆角

imageview.aliCornerRadius = 5.0f;
核心思想就是使用圆角图片替换系统圆角。实际使用时,确保layer对象的masksToBounds属性为NO

imageview.layer.masksToBounds = NO
支持pod方式安装

pod 'HJCornerRadius', :git => "https://github.com/panghaijiao/HJCornerRadius.git"
当然,本文的目的不是介绍如何使用该工具,而是想跟大家分享开发时用到的几点设计思想

自观察的巧妙应用

既然要生成圆角图片,首先要解决生成时机问题。可能会有朋友想到swizzle类UIImageView的setImage方法,但我个人并不推荐,毕竟Swizzle类方法影响范围太广,对于大型开发团队,出问题后很难排查定位问题所在。定义UIImageView子类?实用性不强!

还记得我在文章《“自释放”在iOS开发中的应用》 中提到的实现自释放的三种方式吗?其中一种方式就是动态属性观察者——通过创建一个动态属性KVO被观察对象的某一属性,从而达到自监控的目的。

通过创建动态属性观察者HJImageObserver,监听UIImageView的image属性,当image发生变化时,能够立即触发圆角图片的生成,从而达到自动实现圆角图片替换的目的,具体实现可以参考源码 HJCornerRadius

RunLoop的适当切换

细心的朋友可能注意到,本工具并不是直接渲染原始Image对象,而是先截取UIImageView视图Layer生成的Image,然后再做渲染。原因很简单,因为UIImageView呈现方式涉及多种ContentMode,通过渲染UIImageView视图Layer生成的图片可以巧妙的解决UIImageView显示模式的问题

此外,由于系统原因,对于像UITableViewCell的UIImageView,第一次创建赋图时,可能无法获取UIImageView视图Layer的图片,此时,可以通过切换异步RunLoop达到延时渲染的目的

众所周知,截图渲染的逻辑是可以运行在工作线程,但是本工具并没有把它们放在工作线程执行,因为放在工作线程会有延迟,从而导致图片闪烁的现象

具体截图渲染代码如下

UIGraphicsBeginImageContextWithOptions(self.originImageView.bounds.size, NO, [UIScreen mainScreen].scale);
CGContextRef currnetContext = UIGraphicsGetCurrentContext();
CGContextAddPath(currnetContext, [UIBezierPath bezierPathWithRoundedRect:self.originImageView.bounds cornerRadius:self.cornerRadius].CGPath);
CGContextClip(currnetContext);
[self.originImageView.layer renderInContext:currnetContext];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

if ([image isKindOfClass:[UIImage class]]) {
    image.aliCornerRadius = YES;
    self.originImageView.image = image;
} else {
    dispatch_async(dispatch_get_main_queue(), ^{
        [self updateImageView];
    });
}

经过实际测试验证,效果还是比较理想的,即使需要显示大量圆角图片,显示帧数也可以稳定在50帧以上。CPU消耗影响较小,以iPhone6测试显示,CPU实际消耗上涨不会超过5%,属于合理范围之内

本文转自:http://www.olinone.com/

相关文章

  • 2018-07-04

    后台绘制圆角图片 参考链接链接 iOS 离屏渲染优化(Offscreen Render)

  • iOS图片圆角优化(一)

    关于图片圆角的,用到了大量圆角图片。然而,系统圆角会导致离屏渲染的问题,出于性能考虑,于是有了图片圆角渲染工具HJ...

  • iOS图片圆角优化

    转载请注明出处:http://www.olinone.com/ Hi,又到了更新博客的时间,很高兴再次与大家见面。...

  • iOS 圆角优化

    iOS 圆角优化 方法3: 覆盖一个圆形镂空图片。详细介绍第三种:在需要显示圆角的图层上覆盖一个镂空的图片,根据颜...

  • iOS图片圆角优化(二)

    //画一个圆角矩形//简单的说就是8个点,分别是第边的中点(不局限于中点,只要比半径大就好)加各顶点就好,后面10...

  • [iOS] 图像处理:一种高效裁剪图片圆角的算法

    [iOS] 图像处理:一种高效裁剪图片圆角的算法 [iOS] 图像处理:一种高效裁剪图片圆角的算法

  • iOS 图片 圆角设置性能优化

    查阅了好些关于圆角性能优化的帖子,总结下记录下来.首先:DSImageViewRound 使用方法iOS图片高性能...

  • iOS图片圆角的裁剪优化

    前面已经介绍过一种给UI控件设置圆角的方法了,今天给大家介绍一种性能更加优化的为图片设置圆角的方法Xib中设置控件...

  • iOS图片设置圆角性能优化

    对图片进行圆角处理会相比于直角,它更加柔和优美,是一种很常见的视图效果,在APP中常用于对用户头像的美化,但是设置...

  • iOS性能优化之图片圆角

    在Apple官方文档中多次提出开发时,避免触发离屏渲染效果.离屏渲染触发的情况有很多种,具体可参考iOS离屏渲染相...

网友评论

      本文标题:iOS图片圆角优化(一)

      本文链接:https://www.haomeiwen.com/subject/fchcextx.html