# iOS圆角避免离屏渲染

## 写在前面

代码已经整理到nxlib的 nx\_circleView, nx\_circleImage 中, 在列表中使用圆角时建议使用这个方式.

## 参考阅读

* [离屏渲染优化详解：实例示范+性能测试](http://www.jianshu.com/p/ca51c9d3575b)
* [使用 Instruments 做 iOS 程序性能调试](http://www.samirchen.com/use-instruments/)
* [UIKit性能调优实战讲解](http://www.jianshu.com/p/619cf14640f3)
* [离屏渲染学习笔记](http://foggry.com/blog/2015/05/06/chi-ping-xuan-ran-xue-xi-bi-ji/)
* [绘制像素到屏幕上](https://objccn.io/issue-3-1/)

[阅读原文 iOS可自选切割角的圆角切割工具 (避免离屏渲染) - SKArchCutter](http://www.jianshu.com/p/2af36132ab9d)

## 简述

[SKArchCutter](https://github.com/shevakuilin/SKArchCutter)，是一个可自选切割角的圆角切割工具，同时支持UIView、UIImageView、UIButton和UILabel的单角切圆/选角拱形切圆/全角切圆，并且避免了UIImageView使用系统圆角所导致的离屏渲染的问题，以及确保layer对象的masksToBounds属性始终为NO，从而使得项目中大量使用圆角时的性能得到很大程度的优化, 最重要的是使用简单、方便。如果觉得还不错，star支持下吧\~

## 为什么要避免离屏渲染？

* 这里就先不对离屏渲染做过多讲解了，[关于离屏渲染的介绍，可以参考这篇文章](https://objccn.io/issue-3-1/)
* 我们先来说说离屏渲染的影响：

  在界面的滚动过程中如果有大量的离屏渲染发生时会严重影响帧率。
* 那么离屏渲染会因为什么原因被触发呢：

```
官方公开的的资料提到了尽量避免会触发离屏渲染的效果:mask, shadow, group opacity, edge antialiasing。

使用系统提供的圆角效果也会触发离屏渲染, 如：
imageView.layer.cornerRadius = 5
imageView.layer.masksToBounds = YES
```

当然，能够触发离屏渲染的因素远不止上述这些，这里仅仅是举例。

## SKArchCutter的作用是什么?

方便、快捷的帮助你从任意边角进行圆角的切割（如：半圆矩形、只有一个角是圆角的矩形、整体圆角切割等）

同时支持UIView、UIImageView、UIButton和UILabel

避免了系统圆角导致的离屏渲染问题，确保layer对象的masksToBounds属性始终为NO，提升了大量使用圆角时的性能流畅性，减小了CPU和GPU的消耗

避免了因工作线程的延迟，而导致图片闪烁的现象，这里学习了[HJCornerRadius](https://github.com/panghaijiao/HJCornerRadius)的思路

效果图\
![](https://1795314173-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAdZ7gFz4IllRQpWbzu%2F-LAdZ8MxWrHaExfP4jSI%2F-LAdZRRZUJHonMiyUexP%2Fiosyuan-jiao-bi-mian-li-ping-xuan-ran1.jpeg?generation=1524337078936373\&alt=media)

测试性能\
![](https://1795314173-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAdZ7gFz4IllRQpWbzu%2F-LAdZ8MxWrHaExfP4jSI%2F-LAdZRS_HXxaosdrM9Zj%2Fiosyuan-jiao-bi-mian-li-ping-xuan-ran2.gif?generation=1524337079659999\&alt=media)

ps:录制的帧数已经跟不上屏幕滑动的速度了，足以说明滑动的流畅性有多高了

如何开始\
1.从GitHub上Clone–>SKArchCutter，然后查看Demo

2.直接将目录下的SKArchCutter拷贝到工程中，或在podfile文件夹中添加 pod 'SKArchCutter'

3.觉得不错的话，点个star吧\~

使用方法\
头文件导入

```
#import "SKArchCutter.h"
SKArchCutter * archCutter = [[SKArchCutter alloc] init];
```

进行圆角切割

UIView/UIButton/UILabel

```
[SKArchCutter cuttingView:self.centerView cuttingDirection:UIRectCornerTopRight | UIRectCornerTopLeft cornerRadii:self.centerView.frame.size.height / 2 borderWidth:1 borderColor:[UIColor purpleColor] backgroundColor:[UIColor redColor]];
```

UIImageView

```
[SKArchCutter cuttingImageView:self.topImageView cuttingDirection:UIRectCornerAllCorners cornerRadii:self.topImageView.frame.size.height / 2 borderWidth:1 borderColor:[UIColor blackColor] backgroundColor:[UIColor clearColor]];
```

喜欢的话点个star哦\~