UITableViewCell 性能优化之切圆角
圆角头像，在很多 App 中都很常见。
无非就是现实一张圆形的图片。
做方便的做法是使用 cornerRadius 属性来切圆角。
UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
iv.center = self.view.center;
iv.layer.cornerRadius = iv.bounds.size.width * 0.5;
iv.layer.masksToBounds = YES;
[self.view addSubview:iv];
iv.image = [UIImage imageNamed:@"lzy.jpg"];
界面：
使用 cornerRadius "切"出来的圆角
perfect！！一张圆角图片就切出来了。
这有什么难的？so easy 啊。
我也没做什么特别大的努力啊。圆角和性能优化有啥关系，不就是一个属性吗？
使用 cornerRadius 会产生什么问题？为什么谈到切圆角性能优化的时候，必须说道这个属性？
我们打开这个 UI 界面的层次结构的观察。
image.png
发现，切了圆角的图片，外围仍然有个矩形。
感觉像是并没有把矩形切了个原形，而是把四个角的内容变成透明的了？
红色 = 混合图层 = 透明处理 = 更多的 GPU 消耗
打开模拟器的 Color Blended Layers(混合图层),发现UIImageView 的这一片是红色。
模拟器只要出现了红色，就表明这一片做了透明处理。
如果是单单一张图片，且位置从始至终不发生变化，OK 啦。没什么大问题。
但是如果，是一张在 UITableViewCell 上的图片，且 Cell 在快速滑动的时候。
那么 GPU 就无时不刻的都要计算这个透明度。因为要显示和两个图层的综合信息。
这无疑会消耗一部分 GPU 的性能。如果这种混合的情况太多的话，一定会造成 Cell 滑动时候的卡顿了。
现在问题：
- 我们需要一个圆角的图片，但是使用
cornerRadius切了个假圆角，实际上是把四周透明了。 - 有透明就有混合图层。
- 有混合图层，GPU 计算量就会变大。
- 图层固定还好，如果图层一直在移动(cell 滚动)，那么对 GPU 来说是一个性能考验。
要解决的：
- 我要一张圆形的图片。
- 不要使用
cornerRadius。 - 真真正正的把四个角给切了。
- 不使用混合图层，减少 GPU 的压力 提高性能。
解决思路
目标：
既然，使用
cornerRadius，做的是假切割，造成了透明&混合图层。
我们就需要一种真切割的方式。
真真正正的把图片的四个角给切了。
不再是cornerRadius会造成透明。
解决方案：
使用核心绘图 + 贝塞尔圆形切割 产生一张新真正切割过四个角的图图片就好了。
贴代码
- (void)rl_cornerImageWithSize:(CGSize)size fillColor:(UIColor *)fillColor complectionBlock:(void(^)(UIImage *))complectionBlock {
// 耗时操作放在异步线程
dispatch_async(dispatch_get_global_queue(0, 0), ^{
// 1. 获取图片画板
UIGraphicsBeginImageContextWithOptions(size, YES, 0);
// 2. 填充画板的底色
[fillColor setFill];
CGRect rect = CGRectMake(0, 0, size.width, size.height);
UIRectFill(rect);
// 3. 开始裁切。矩形圆形路径
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];
[path addClip];
// 4. 在底色上画图
[self drawInRect:rect];
// 5. 从画板获取图片
UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
// 6. 关闭上下文
UIGraphicsEndImageContext();
// 7. 回到主线程，返回图片。
dispatch_async(dispatch_get_main_queue(), ^{
if (complectionBlock) {
complectionBlock(resultImage);
}
});
});
}
UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
iv.center = self.view.center;
[self.view addSubview:iv];
[[UIImage imageNamed:@"lzy.jpg"] rl_cornerImageWithSize:iv.bounds.size fillColor:[UIColor whiteColor] complectionBlock:^(UIImage *resultImage) {
iv.image = resultImage;
}];
运行看效果：
最终效果
达成目标：
- 需要一个切了圆角的图片 。[√ ]
- 不要产生混合图层。[√ ]
