一种在iOS中高效实现视图圆角的方法与流程

一种在ios中高效实现视图圆角的方法
技术领域
1.本发明涉及视图处理技术领域，尤其涉及一种在ios中高效实现视图圆角的方法。


背景技术：

2.随着移动互联网时代的到来，产品用户体验的重要性越发得到重视，硬件和软件设计中，圆角得到了广泛应用。这是因为人眼处理圆角更容易，圆角具有较强的视觉引导性，能够更加凸显视图或卡片中的内容信息。同时，圆角的设计也更具安全性、亲密性，让产品、图形看起来更加无侵略性，能够带来更好的用户体验。
3.给控件添加圆角的方式就是给视图的layer设置cornerradius属性，比如设置为：
4.self.view.layer.cornerradius＝10.0；
5.self.view.layer.maskstobounds＝yes。
6.当需要设置圆角的控件数量比较多时，系统会频繁调用gpu离屏渲染机制，导致内存损耗验证，这种添加圆角的方式特别消耗性能，甚至会带来视觉上明显可见的卡顿，特别是添加多个圆角时，更加消耗性能。


技术实现要素：

7.本发明的目的在于提供一种在ios中高效实现视图圆角的方法，以解决上述背景技术中遇到的问题。
8.为实现上述目的，本发明的技术方案如下：
9.一种在ios中高效实现视图圆角的方法，包括以下步骤：
10.步骤a：通过core graphics绘图框架获取当前视图的上下文context；
11.步骤b：在上下文context中，通过uibezierpath绘制至少一个夹角的圆角路径；
12.步骤c：利用core graphics中的函数画线条通过uibezierpath得到的圆角路径绘制出圆角图形；
13.步骤d：通过截图得到圆角视图，在用户查看时进行显示。
14.上述方案中，通过uibezierpath绘制视图左上、左下、右上、右下的圆角路径。
15.上述方案中，使用uigraphicsgetimagefromcurrentimagecontext函数，将当前上下文的图形内容截图转换成uiimage图像。
16.与现有技术相比，本发明的有益效果是：本方案通过core graphics框架和贝塞尔曲线uibezierpath绘制出圆角的方法，具有保证视图设置控件圆角的高效性，杜绝gpu离屏渲染机制的频繁调用，降低对内存的占用大小，最大限度的避免离屏渲染造成的操作卡顿和可能产生的屏幕撕裂感，提升列表视图等滑动的流畅，从而保证产品流畅性和用户体验。
附图说明
17.参照附图来说明本发明的公开内容。应当了解，附图仅仅用于说明目的，而并非意在对本发明的保护范围构成限制。在附图中，相同的附图标记用于指代相同的部件。其中：
18.图1为本发明整体结构示意图。
具体实施方式
19.为了使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，现在结合附图对本发明作进一步详细的说明。这些附图均为简化的示意图，仅以示意方式说明本发明的基本结构，因此其仅显示本发明有关的构成。
20.根据本发明的技术方案，在不变更本发明实质精神下，本领域的一般技术人员可以提出可相互替换的多种结构方式以及实现方式。因此，以下具体实施方式以及附图仅是对本发明的技术方案的示例性说明，而不应当视为本发明的全部或者视为对本发明技术方案的限定或限制。
21.下面结合附图和实施例对本发明的技术方案做进一步的详细说明。
22.如图1所示，一种在ios中高效实现视图圆角的方法，包括以下步骤：
23.步骤a：通过core graphics绘图框架获取当前视图的上下文context。上下文context即为画布，图形上下文context中包含绘制参数和将页面上的绘画渲染到目标所需的所有特定于设备的信息，可以形象比作为画布，所有的绘画都需要先有画布。
24.步骤b：使用uibezierpath类可以创建基于矢量的路径path，在上下文context中，通过uibezierpath绘制至少一个夹角的圆角路径。在实施中，为了获得视图四个夹角的圆角，利用uibezierpath绘制出视图左上、左下、右上、右下的圆角路径。
25.步骤c：有了uibezierpath提供路径后，利用core graphics中的函数画线条通过uibezierpath得到的圆角路径绘制出圆角图形。具体的，利用core graphics的cgcontextaddpath函数将uibezierpath路径添加并绘制到当前上下文context中，最终完成整个带有圆角路径图形的绘制。
26.步骤d：完成路径图形的绘制后，使用uigraphicsgetimagefromcurrentimagecontext函数，将当前上下文的图形内容截图转换成uiimage图像，通过该截图得到带有圆角的视图，在用户查看时进行显示。
27.在其中的一个实施例中，其算法如下所示：
28.[0029][0030]
在对视图文件进行处理中，使用一张中空的图片覆盖在每一个所需圆角的控件上，添加视图层级，也可以避免离屏渲染的产生。但是采用这种方法得到的视图，就需要在原本的视图上新增一层图片视图，这样多一层视图就会增加cpu的计算及gpu的渲染压力；同时需要圆角的视图大小不同、方向不同，为了保证高清晰度，就需要根据需要在app中塞入多张的不同的中空图片，这不可避免增加app体积，增加开发人员的适配压力。
[0031]
本发明是一种在ios控件上，通过core graphics框架和贝塞尔曲线uibezierpath绘制出圆角的方法，由于core graphics是通过cpu去计算并渲染圆角图形的，具有保证视图设置控件圆角的高效性，杜绝gpu离屏渲染机制的频繁调用。
[0032]
其中离屏渲染，是gpu在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作：首先从将上下文环境从当前屏幕切换到离屏进行离屏渲染；渲染结束以后，需要将离屏渲染缓冲区的结果显示到屏幕上；然后再将上下文环境从离屏切换到当前屏幕。整个离屏渲染的过程中，需要进行多次的上下文切换，这种上下文来回切换代价就大了。
[0033]
采用本方案，没有了缓冲区就降低对内存的占用大小，避免离屏渲染造成的操作卡顿和可能产生的屏幕撕裂感，提升列表视图等滑动的流畅，从而保证产品流畅性和用户体验。
[0034]
以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明,所应理解的是，以上所述仅为本发明的具体实施方式，并不用于限定本发明保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应含在本发明的保护范围之内。


技术特征：
1.一种在ios中高效实现视图圆角的方法，其特征在于，包括以下步骤：步骤a：通过core graphics绘图框架获取当前视图的上下文context；步骤b：在上下文context中，通过uibezierpath绘制至少一个夹角的圆角路径；步骤c：利用core graphics中的函数画线条通过uibezierpath得到的圆角路径绘制出圆角图形；步骤d：通过截图得到圆角视图，在用户查看时进行显示。2.根据权利要求1所述的一种在ios中高效实现视图圆角的方法，其特征在于：通过uibezierpath绘制视图左上、左下、右上、右下的圆角路径。3.根据权利要求1所述的一种在ios中高效实现视图圆角的方法，其特征在于：在步骤d中，使用uigraphicsgetimagefromcurrentimagecontext函数，将当前上下文的图形内容截图转换成uiimage图像。

技术总结
本发明涉及一种在iOS中高效实现视图圆角的方法，通过CoreGraphics绘图框架获取当前视图的上下文context；通过UIBezierPath绘制至少一个夹角的圆角路径；利用Core Graphics中的函数画线条通过UIBezierPath得到的圆角路径绘制出圆角图形；通过截图得到圆角视图，在用户查看时进行显示。本方案通过CoreGraphics框架和贝塞尔曲线UIBezierPath绘制出圆角的方法，具有保证视图设置控件圆角的高效性，杜绝GPU离屏渲染机制的频繁调用，最大限度的避免离屏渲染造成的操作卡顿和可能产生的屏幕撕裂感，从而保证产品流畅性和用户体验。从而保证产品流畅性和用户体验。从而保证产品流畅性和用户体验。


技术研发人员：胡恒
受保护的技术使用者：紫光云（南京）数字技术有限公司
技术研发日：2021.11.30
技术公布日：2022/3/8