转载

iOS图片圆角优化

转载请注明出处: http://www.olinone.com/

Hi，又到了更新博客的时间，很高兴再次与大家见面。最近，关于图片圆角的话题讨论非常激烈，出现了许多好的文章。恰逢工作需要，用到了大量圆角图片。然而，系统圆角会导致离屏渲染的问题，出于性能考虑，于是有了图片圆角渲染工具 HJCornerRadius ，其最大优势在于使用简单，一行搞定图片圆角

imageview.aliCornerRadius = 5.0f;

imageview.aliCornerRadius = 5.0f;

核心思想就是使用圆角图片替换系统圆角。实际使用时，确保layer对象的masksToBounds属性为NO

imageview.layer.masksToBounds = NO

imageview.layer.masksToBounds = NO

支持pod方式安装，如果你在实际使用中遇到什么问题，欢迎在文章后面跟我留言

pod 'HJCornerRadius', :git => "https://github.com/panghaijiao/HJCornerRadius.git"

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];         });     }

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%，属于合理范围之内

自从发表博客《生命不息，折腾不止——致敬逝去的2015 》后，收到了许多朋友的关注和问候，在此谢谢大家的祝福。新的一年里，希望各位一如既往支持小生，多多为我点赞，本人也会更加努力，争取为大家奉献更多更好的东西。你可以follow本人的 Github ，也可以关注我的个人微博，再次感谢你的来访

原文 http://www.olinone.com/?p=484

正文到此结束