iOS图片设置圆角性能问题

最新推荐文章于 2020-11-01 20:21:13 发布
最新推荐文章于 2020-11-01 20:21:13 发布
阅读量217 收藏
点赞数

640?wx_fmt=gif

640?wx_fmt=png

程序君个人微信 和我聊聊编程和创业的事 加好友


作者丨齐滇大圣
https://www.jianshu.com/p/34189f62bfd8


一般我们在iOS开发的过程中设置圆角都是如下这样设置的。


avatarImageView.clipsToBounds = YES;
 [avatarImageView.layer setCornerRadius:50];

 这样设置会触发离屏渲染，比较消耗性能。比如当一个页面上有十几头像这样设置了圆角
 会明显感觉到卡顿。

 注意：png图片UIImageView处理圆角是不会产生离屏渲染的。（ios9.0之后不会离屏渲染，ios9.0之前还是会离屏渲染）。


所有如果要高性能的设置圆角就需要找另外的方法了。下面是我找到的一些方法并写了一个例子。


640?wx_fmt=other


640?wx_fmt=gif设置圆角的方法


直接使用setCornerRadius
这种就是最常用的，也是最耗性能的。


setCornerRadius设置圆角之后，shouldRasterize=YES光栅化


avatarImageView.clipsToBounds = YES;
[avatarImageView.layer setCornerRadius:50];
avatarImageView.layer.shouldRasterize = YES;
avatarImageViewUrl.layer.rasterizationScale=[UIScreen mainScreen].scale;  //UIImageView不加这句会产生一点模糊

shouldRasterize=YES设置光栅化，可以使离屏渲染的结果缓存到内存中存为位图，
使用的时候直接使用缓存，节省了一直离屏渲染损耗的性能。

但是如果layer及sublayers常常改变的话，它就会一直不停的渲染及删除缓存重新
创建缓存，所以这种情况下建议不要使用光栅化，这样也是比较损耗性能的。


直接覆盖一张中间为圆形透明的图片（推荐使用）


这种方法就是多加了一张透明的图片，GPU计算多层的混合渲染blending也是会消耗一点性能的，但比第一种方法还是好上很多的。


UIImage drawInRect绘制圆角


这种方式GPU损耗低内存占用大，而且UIButton上不知道怎么绘制，可以用


UIimageView添加个点击手势当做UIButton使用。


UIGraphicsBeginImageContextWithOptions(avatarImageView.bounds.size, NO, [UIScreen mainScreen].scale);
[[UIBezierPath bezierPathWithRoundedRect:avatarImageView.bounds
                              cornerRadius:50] addClip];
[image drawInRect:avatarImageView.bounds];
avatarImageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

这段方法可以写在SDWebImage的completed回调里，在主线程异步绘制。
也可以封装到UIImageView里，写了个DSRoundImageView。后台线程异步绘制，不会阻塞主线程。


640?wx_fmt=gif问题：这种方法图片很多的话CUP消耗会高，内存占用也会暴增，而且后台线程绘制会比在主线程绘制占用更多的内存，不知道怎么解决？求大神指教！


SDWebImage处理图片时Core Graphics绘制圆角

//UIImage绘制为圆角
  int w = imageSize.width;
  int h = imageSize.height;
  int radius = imageSize.width/2;

  UIImage *img = image;
  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
  CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
  CGRect rect = CGRectMake(0, 0, w, h);

  CGContextBeginPath(context);
  addRoundedRectToPath(context, rect, radius, radius);
  CGContextClosePath(context);
  CGContextClip(context);
  CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage);
  CGImageRef imageMasked = CGBitmapContextCreateImage(context);
  img = [UIImage imageWithCGImage:imageMasked];

  CGContextRelease(context);
  CGColorSpaceRelease(colorSpace);
  CGImageRelease(imageMasked);


以上代码我写成了UIImage的类别:UIImage+DSRoundImage.h
并在SDWebImage库里处理image的时候使用类别方法绘制圆角并缓存。


640?wx_fmt=gif使用Instruments的Core Animation查看性能


Color Offscreen-Rendered Yellow


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


Color Hits Green and Misses Red


如果shouldRasterize被设置成YES，对应的渲染结果会被缓存，如果图层是绿色，就表示这些缓存被复用；如果是红色就表示缓存会被重复创建，这就表示该处存在性能问题了。


用Instruments测试得


第一种方法，UIImageView和UIButton都高亮为黄色。


第二种方法，UIImageView和UIButton都高亮为绿色


第三种方法，无任何高亮，说明没离屏渲染。


这种圆片覆盖的方法一般只用在底色为纯色的时候，如果圆角图片的父View是张图片的时候就没办法了，而且底色如果是多种颜色的话那要做多张不同颜色的圆片覆盖。（可以用代码取底色的颜色值给圆片着色）


第四种方法无任何高亮，说明没离屏渲染（但是CPU消耗和内存占用会很大）


第五种方法无任何高亮，说明没离屏渲染，而且内存占用也不大。(暂时感觉是最优方法)


640?wx_fmt=gif问题回复：


有回复提到还有一种mask方法。


这种方法比第一种方法其实更卡顿。一次mask发生了两次离屏渲染和一次主屏渲染。 具体可以参考小心别让圆角成了你列表的帧数杀手

http://www.cocoachina.com/ios/20150803/12873.html


@nerozhao说第四种比第一种更卡。


我刚在demo里加了个例子测试了一下，第一种能明显的感觉到卡顿，第四种还是挺顺畅
的，有兴趣的可以自己试试看。第四种是解决了离屏渲染GPU的问题。


可以用Instruments的 GPU Driver进行测试：

Renderer Utilization


如果这个值超过了~50%，就意味着你的动画可能对帧率有所限制，很可能因为离屏渲染或者是重绘导致的过度混合。


Tiler Utilization


如果这个值超过了~50%，就意味着你的动画可能限制于几何结构方面，也就是在屏幕上有太多的图层占用了。


640?wx_fmt=other


Instruments


图上面一部分是第一种方法的数据，下面一部分是第四种方法的数据。


第一种方法的Renderer Utilization 和 Tiler Utilization 基本在90%左右。帧率在20左右。


第四种方法的Renderer Utilization 和 Tiler Utilization 基本在20%左右。帧率接近60。


帧率越接近60滑动越顺畅。


但是经过跟@nerozhao的讨论发现第四种Core Graphics绘制圆角会有大量的内存占用，
  而且每次绘制的时候CUP消耗会很大。

  由于@nerozhao使用了UITableView进行测试，因为UITableView滚动的时候是一直在
  复用的，UIImageView会重复绘制，所以会一直消耗CUP，然后你就能看的明显的卡顿。

  @nerozhao在UITableView里图片的绘制在后台线程进行绘制，解决了卡顿问题，但是
  由于是在后台线程的异步绘制所以在滚动的时候会看到图片先是正方形然后再变成圆形。

  而我使用的是UIScrollerView进行的测试，只有第一次绘制的时候会占用CUP资源，
  所以滑动的时候还是挺流畅的，但是内存消耗还是很大。如果是主线程绘制的话会阻塞一
  点时间的主线程，而后台线程绘制的话内存消耗会更大，特别容易崩溃。


所以第四种方法当图片特别多的时候很容易Received memory warning导致崩溃


github 绘制圆角源码参考


NZCircularImageView

https://github.com/NZN/NZCircularImageView


640?wx_fmt=gif最后


关于研究过程及各种设置圆角方法的例子测试对比 github源码

https://github.com/walkdianzi/DSRoundedImageArticle/tree/master


 推荐↓↓↓ 

640?wx_fmt=png

长

按

关

注

?【16个技术公众号】都在这里！

涵盖：程序员大咖、源码共读、程序员共读、数据结构与算法、黑客技术和网络安全、大数据科技、编程前端、Java、Python、Web编程开发、Android、iOS开发、Linux、数据库研发、幽默程序员等。

iOS_开发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS设置圆角的4种方法实例（附性能评测）
08-26
iOS 设置圆角的 4 种方法实例（附性能评测） 在 iOS 开发中，设置圆角是一个非常常见的需求，例如设置图标、按钮、图片等圆角。今天，我们将介绍四种设置圆角的方法，并对其进行性能评测，以便大家更好地选择适合...
iOS中设置圆角的几种方法示例
08-31
本文将详细介绍三种实现iOS中设置圆角的方法，并探讨它们的性能和适用场景。 1. **使用layer属性** Core Animation层（CALayer）是iOS中处理视图渲染的关键，它提供了设置圆角的便捷方式。以下是一段使用layer...
iOS图片设置圆角性能优化
weixin_33762130的博客
07-08 115
问题 圆角虽好，但如果使用不当，它就是你的帧数杀手，特别当它出现在滚动列表的时候。下面来看圆角如何毁掉你的流畅度的。 实测 layer.cornerRadius 我创建了一个简单地UITableView视图，为每个cell添加了2个UIImageView实例，且为UIImageView实例进行如下设置 aImageView.layer.cornerRadius=aImageView....
IOS 将图片转换为圆角图
weixin_30908103的博客
02-20 185
UIImage+wiRoundedRectImage.h #import <UIKit/UIKit.h> @interface UIImage (wiRoundedRectImage) + (id)createRoundedRectImage:(UIImage*)image size:(CGSize)size radius:(NSInteger)r; ...
iOS 图片设置为圆角矩形，圆形等
热门推荐
07-23 1万+
有的时候需要将图片现实为圆形 比如头像等 以下面的图片为例 我们按照正常的方式添加后效果如下 UIImageView *userIconImageV=[[UIImageView alloc]initWithFrame:CGRectMake(30, 120, 188, 188)]; [self.view addSubview:u
iOS图片圆角优化
wjwc2014的专栏
08-27 418
iOS图片圆角优化 http://www.cocoachina.com/ios/20160322/15748.html
iOS实现高效裁剪图片圆角算法教程
08-27
总的来说，iOS中实现高效裁剪图片圆角的方法主要有`CGContext`和`UIBezierPath`两种。它们都基于图形上下文进行裁剪，但实现方式有所不同，开发者可以根据项目需求和性能考虑选择合适的方法。在实践中，结合使用和...
iOS中设置view圆角化的四种方法示例
08-29
在iOS开发中，为视图（view）设置圆角是一种常见的需求，这可以让用户界面看起来更加美观和专业。本文将详细介绍四种在iOS中实现view圆角化的方法，并提供相应的示例代码。 首先，我们来看看第一种方法：通过`...
iOS image-图片设置圆角
Rex
03-03 1195
iOS image-图片设置圆角实质上是重绘图片  此代码用于实现UIImage圆角，而不是UIImageView圆角，UIImageView圆角可以直接通过如下实现 imageView.layer.cornerRadius = radius; imageView.layer.masksToBounds = YES; //方法1 - (UI
iOS设置圆角性能问题
大威的博客
05-16 354
一般我们用如下方法设置圆角/* 这样设置会触发离屏渲染，比较消耗性能。比如当一个页面上有很多像这样设置了圆角，会明显感觉到卡顿。 注意：ios9.0之后，png图片UIImageView处理圆角是不会产生离屏渲染的。（ios9.0之前还是会离屏渲染）。 */ avatarImageView.clipsToBounds = YES; [avatarImageView.layer s
iOS圆角图片的实现
天道酬勤
07-03 400
profileImageView.layer.cornerRadius = profileImageView.frame.width/2 profileImageView.layer.masksToBounds = true
iOS UIImage设置圆角
祝我们都能在鸡零狗碎的生活里，找到自己的快乐~
12-20 1111
新建UIImage分类如下： @interface UIImage (RoundedRectImage) - (UIImage *)setRoundedCorners:(CGFloat)radius andSize:(CGSize)size; @end #import "UIImage+RoundedRectImage.h" @implementation UIImage (RoundedR...
iOS图片圆角优化-第三方工具源码解读
快乐自己
04-04 211
图片圆角优化工具的概述 该库是通过UIImageView写一个分类，调用一行代码实现圆角的优化：imageview.aliCornerRadius = 5.0f,核心思想就是使用圆角图片替换系统圆角 核心技术点 KVO观察者模式的使用 @interface HJImageObserver : NSObject @property (nonatomic, assign) UIImageView...
iOS设置圆角的四种方法
owensky999的专栏
09-20 3231
一、设置CALayer的cornerRadius cornerRadius属性影响layer显示的background颜色和前景框border，对layer的contents不起作用。故一个imgView(类型为UIImageView)的image不为空，设置imgView.layer的cornerRadius，是看不出显示圆角效果的，因为image是imgView.layer的conten
iOS 防止离屏渲染为 image 添加圆角
cnmeimei的博客
11-01 53
// image 分类 - (UIImage *)circleImage{ // NO 代表透明 UIGraphicsBeginImageContextWithOptions(self.size, NO, 1); // 获得上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 添加一个圆 CGRect rect = CGRectMake(0, 0, self.size...
iOS 绘制圆角图片方法
weixin_34205076的博客
05-10 1215
// 贝塞尔曲线方法 - (void)drawCornerPicture{ UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(200, 200, 200, 200)]; imageView.image = [UIImage imageNamed:@"1"]; //绘制贝塞尔曲线 ...
iOS 设置图片圆角的三种方式
YuanLiYin079的博客
05-17 2045
方式一：通过 layer 设置圆角 最简单的一种,但是影响性能,一般在正常的开发中使用很少 // 创建图片框 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; // 添加图片 imageView.image = [UIIma...
iOS OC 设置self.tabBar圆角
最新发布
03-27
要设置`self.tabBar`的圆角，你可以按照以下步骤进行操作： 1. 在你的视图控制器类中，找到`viewDidLoad`方法或者其他适合的位置。 2. 使用`self.tabBar.layer.cornerRadius`属性来设置`self.tabBar`的圆角半径。例如，你可以将其设置为10来创建一个圆角为10的效果。 3. 为了确保圆角效果生效，还需要将`self.tabBar.layer.masksToBounds`属性设置为`true`，以剪切超出圆角范围的内容。 下面是一个示例代码： ```objective-c - (void)viewDidLoad { [super viewDidLoad]; // 设置圆角半径 self.tabBar.layer.cornerRadius = 10; // 剪切超出圆角范围的内容 self.tabBar.layer.masksToBounds = YES; } ``` 这样，你就可以在iOS的Objective-C中设置`self.tabBar`的圆角了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值