基于贝塞尔曲线的圆角图像展示方法、系统及存储介质技术方案

本发明专利技术公开了基于贝塞尔曲线的圆角图像展示方法、系统及存储介质，方法包括：获取初始矩形图像的长度数据和宽度数据；根据长度数据和宽度数据，确定初始截取节点和终止截取节点；根据初始截取节点和终止截取节点，通过贝塞尔曲线对矩形图像边界进行截取处理，得到圆角集合；根据圆角集合绘制所述初始矩形图像对应的圆角图像；对所述初始矩形图像对应的圆角图像进行展示。本发明专利技术通过贝塞尔曲线进行截取处理，得到圆角图像，本发明专利技术无需占用大量系统资源，不会降低屏幕显示的帧数，提高了用户体验，可广泛应用于图像处理技术领域。

Display method, system and storage medium of fillet image based on Bezier curve

The invention discloses a fillet image display method, system and storage medium based on Bezier curve, the method includes: obtaining the length data and width data of the initial rectangular image; determining the initial and termination interception nodes according to the length data and width data; cutting the rectangular image boundary through Bezier curve according to the initial and termination interception nodes Taking the processing to get the fillet set; drawing the fillet image corresponding to the initial rectangle image according to the fillet set; displaying the fillet image corresponding to the initial rectangle image. The invention obtains the fillet image by intercepting the Bezier curve. The invention does not need to occupy a large amount of system resources, does not reduce the number of frames displayed on the screen, improves the user experience, and can be widely used in the field of image processing technology.

【技术实现步骤摘要】
基于贝塞尔曲线的圆角图像展示方法、系统及存储介质
本专利技术涉及图像处理
，尤其是基于贝塞尔曲线的圆角图像展示方法、系统及存储介质。
技术介绍
曲线广泛应用于工程绘图、图像处理、三维图像构建、文字构建和数值分析中。现有的贝塞尔曲线是非常成熟的技术。贝塞尔曲线有二次、三次以及更高阶的曲线。高维的贝塞尔方程还可以用来生成曲面。贝塞尔曲线被广泛地在计算机图形中用来为圆滑曲线建立模型。实际应用最多的是二次贝塞尔曲线和三次贝塞尔曲线。贝塞尔曲线是依据任意位置的点坐标绘制出的一条光滑曲线。在常规控件中，图片展示区域均为规则矩形，即为直角的图片。当需要图片具有圆角效果的时候，最常规方法是对图片的四角进行圆角处理后再描绘圆角画像(此过程为标准操作)，但当圆角图片过多的时候，尤其是在长列表中的每个单元均存在圆角图片时，手机系统本身会发生“离屏渲染”现象，严重拖慢显示帧数，导致显示页面出现严重卡顿甚至卡死现象，影响用户体验。发生“离屏渲染”这种现象的原因是：当图片需要圆角时，GPU会自动开辟一个缓冲区进行渲染操作，即GPU会渲染当前可见的区域，当用户快速滑动页面时，会使GPU不断地渲染可见部分区域，渲染第一屏、释放、马上渲染第二屏、再释放，由于用户操作快速，导致这个渲染过程无意义，但耗费了大量系统资源，所以拖慢了显示帧数。
技术实现思路
有鉴于此，本专利技术实施例提供一种系统资源占用少的基于贝塞尔曲线的圆角图像展示方法、系统及存储介质，以保障页面显示的流畅。第一方面，本专利技术实施例提供了一种基于贝塞尔曲线的圆角图像展示方法，包括以下步骤：获取初始矩形图像的长度数据和宽度数据；根据长度数据和宽度数据，确定初始截取节点和终止截取节点；根据初始截取节点和终止截取节点，通过贝塞尔曲线对矩形图像边界进行截取处理，得到圆角集合；根据圆角集合绘制所述初始矩形图像对应的圆角图像；对所述初始矩形图像对应的圆角图像进行展示。进一步，所述根据长度数据和宽度数据，确定初始截取节点和终止截取节点这一步骤，包括以下步骤：根据长度数据和宽度数据，确定初始截取节点和第一终止截取节点；将第一终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第二终止截取节点；将第二终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第三终止截取节点；将第三终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第四终止截取节点。进一步，所述根据初始截取节点和终止截取节点，通过贝塞尔曲线对矩形图像边界进行截取处理，得到圆角集合这一步骤，包括以下步骤：通过贝塞尔曲线对初始截取节点和第一终止截取节点之间的矩形图像边界进行第一截取处理，得到第一圆角；通过贝塞尔曲线对初始截取节点和第二终止截取节点之间的矩形图像边界进行第二截取处理，得到第二圆角；通过贝塞尔曲线对初始截取节点和第三终止截取节点之间的矩形图像边界进行第三截取处理，得到第三圆角；通过贝塞尔曲线对初始截取节点和第四终止截取节点之间的矩形图像边界进行第四截取处理，得到第四圆角。进一步，所述根据圆角集合绘制所述初始矩形图像对应的圆角图像这一步骤，包括以下步骤：确定圆角矩形的半径；确定贝塞尔曲线的数据点和控制点；根据圆角集合、圆角矩形的半径、贝塞尔曲线的数据点和控制点，绘制所述初始矩形图像对应的圆角图像。第二方面，本专利技术实施例还提供了一种基于贝塞尔曲线的圆角图像展示系统，包括：获取模块，用于获取初始矩形图像的长度数据和宽度数据；确定模块，用于根据长度数据和宽度数据，确定初始截取节点和终止截取节点；截取模块，用于根据初始截取节点和终止截取节点，通过贝塞尔曲线对矩形图像边界进行截取处理，得到圆角集合；绘制模块，用于根据圆角集合绘制所述初始矩形图像对应的圆角图像；展示模块，用于对所述初始矩形图像对应的圆角图像进行展示。进一步，所述确定模块包括：第一确定单元，用于根据长度数据和宽度数据，确定初始截取节点和第一终止截取节点；第二确定单元，用于将第一终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第二终止截取节点；第三确定单元，用于将第二终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第三终止截取节点；第四确定单元，用于将第三终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第四终止截取节点。进一步，所述截取模块包括：第一截取单元，用于通过贝塞尔曲线对初始截取节点和第一终止截取节点之间的矩形图像边界进行第一截取处理，得到第一圆角；第二截取单元，用于通过贝塞尔曲线对初始截取节点和第二终止截取节点之间的矩形图像边界进行第二截取处理，得到第二圆角；第三截取单元，用于通过贝塞尔曲线对初始截取节点和第三终止截取节点之间的矩形图像边界进行第三截取处理，得到第三圆角；第四截取单元，用于通过贝塞尔曲线对初始截取节点和第四终止截取节点之间的矩形图像边界进行第四截取处理，得到第四圆角。进一步，所述绘制模块包括：半径确定单元，用于确定圆角矩形的半径；数据点确定单元，用于确定贝塞尔曲线的数据点和控制点；绘制单元，用于根据圆角集合、圆角矩形的半径、贝塞尔曲线的数据点和控制点，绘制所述初始矩形图像对应的圆角图像。第三方面，本专利技术实施例还提供了一种基于贝塞尔曲线的圆角图像展示系统，包括：至少一个处理器；至少一个存储器，用于存储至少一个程序；当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现所述的基于贝塞尔曲线的圆角图像展示方法。第四方面，本专利技术实施例还提供了一种存储介质，其中存储有处理器可执行的指令，所述处理器可执行的指令在由处理器执行时用于执行所述的基于贝塞尔曲线的圆角图像展示方法。上述本专利技术实施例中的一个或多个技术方案具有如下优点：本专利技术的实施例获取到初始矩形图像后，使用了贝塞尔曲线的方法对矩形图像进行截取处理，得到对应的圆角图像，最后对圆角图像进行展示；相较于现有技术通过GPU的缓冲区进行渲染操作的方式，本专利技术通过贝塞尔曲线进行截取处理，得到圆角图像，本专利技术无需占用大量系统资源，不会降低屏幕显示的帧数，提高了用户体验。附图说明图1为本专利技术实施例的步骤流程图。具体实施方式下面结合说明书附图和具体实施例对本专利技术作进一步解释和说明。对于本专利技术实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。参照图1，本专利技术实施例提供了一种基于贝塞尔曲线的圆角图像展示方法，包括以下步骤：获取初始矩形图像的长度数据和宽度数据；本文档来自技高网...

【技术保护点】
1.基于贝塞尔曲线的圆角图像展示方法，其特征在于：包括以下步骤：/n获取初始矩形图像的长度数据和宽度数据；/n根据长度数据和宽度数据，确定初始截取节点和终止截取节点；/n根据初始截取节点和终止截取节点，通过贝塞尔曲线对矩形图像边界进行截取处理，得到圆角集合；/n根据圆角集合绘制所述初始矩形图像对应的圆角图像；/n对所述初始矩形图像对应的圆角图像进行展示。/n

【技术特征摘要】
1.基于贝塞尔曲线的圆角图像展示方法，其特征在于：包括以下步骤：
获取初始矩形图像的长度数据和宽度数据；
根据长度数据和宽度数据，确定初始截取节点和终止截取节点；
根据初始截取节点和终止截取节点，通过贝塞尔曲线对矩形图像边界进行截取处理，得到圆角集合；
根据圆角集合绘制所述初始矩形图像对应的圆角图像；
对所述初始矩形图像对应的圆角图像进行展示。


2.根据权利要求1所述的基于贝塞尔曲线的圆角图像展示方法，其特征在于：所述根据长度数据和宽度数据，确定初始截取节点和终止截取节点这一步骤，包括以下步骤：
根据长度数据和宽度数据，确定初始截取节点和第一终止截取节点；
将第一终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第二终止截取节点；
将第二终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第三终止截取节点；
将第三终止截取节点作为初始截取节点，然后根据长度数据、宽度数据和初始截取节点确定第四终止截取节点。


3.根据权利要求2所述的基于贝塞尔曲线的圆角图像展示方法，其特征在于：所述根据初始截取节点和终止截取节点，通过贝塞尔曲线对矩形图像边界进行截取处理，得到圆角集合这一步骤，包括以下步骤：
通过贝塞尔曲线对初始截取节点和第一终止截取节点之间的矩形图像边界进行第一截取处理，得到第一圆角；
通过贝塞尔曲线对初始截取节点和第二终止截取节点之间的矩形图像边界进行第二截取处理，得到第二圆角；
通过贝塞尔曲线对初始截取节点和第三终止截取节点之间的矩形图像边界进行第三截取处理，得到第三圆角；
通过贝塞尔曲线对初始截取节点和第四终止截取节点之间的矩形图像边界进行第四截取处理，得到第四圆角。


4.根据权利要求1所述的基于贝塞尔曲线的圆角图像展示方法，其特征在于：所述根据圆角集合绘制所述初始矩形图像对应的圆角图像这一步骤，包括以下步骤：
确定圆角矩形的半径；
确定贝塞尔曲线的数据点和控制点；
根据圆角集合、圆角矩形的半径、贝塞尔曲线的数据点和控制点，绘制所述初始矩形图像对应的圆角图像。


5.基于贝塞尔曲线的圆角图像展示系统，其特征在于：包括：
获取模块，用于获取初始矩形图像的长度数据和宽度数据；
确定模块，用于根据长度数据和宽度数据，确定初始截取节点和终止截取节点；
截取模块，用于根据初始截取节点和终止截取节点，通过...

【专利技术属性】
技术研发人员：彭岳松，
申请(专利权)人：天脉聚源杭州传媒科技有限公司，
类型：发明
国别省市：浙江;33