一种圆角曲线绘制方法、电子设备及存储介质与流程

1.本发明涉及计算机技术领域，特别是涉及一种圆角曲线绘制方法、电子设备及存储介质。


背景技术：

2.图形界面用户界面(graphical user interface，gui)是指采用图形化方式显示的操作用户界面。近年来，扁平化设计风格风靡全球，在扁平化设计中，由于圆角的平滑度带来视觉的舒适感，使得在进行用户界面(user interface，ui)绘制时，将控件圆角化是其中一种常见的美化ui界面的处理方法。
3.在安卓系统中，传统的应用程序将控件圆角化的处理方法为将圆的一段曲线相切于控件的一个角的两条边上，以将控件圆角化置。然而，通过该方法绘制出的圆角控件的圆角过渡粗糙，无法提供给用户良好、顺滑的用户体验。


技术实现要素：

4.本发明实施例的一个目的旨在提供一种圆角曲线绘制方法、电子设备及存储介质，其能够改善圆角控件的圆角的顺滑度，提高用户的视觉舒适感。
5.为了解决上述技术问题，本发明提供以下技术方案：
6.第一方面，本发明实施例提供一种圆角曲线绘制方法，应用于电子设备，所述方法包括：
7.获取圆角控件的绘制参数，其中，所述圆角控件中包含有至少一条圆角曲线，以及与所述圆角曲线连接的第一直边和第二直边，所述绘制参数包括所述圆角曲线的圆角半径；
8.根据所述圆角半径获取n个曲率半径，其中，n为大于0的自然数；
9.根据所述绘制参数以及n个所述曲率半径，绘制m条贝塞尔曲线，其中，m为大于0的自然数,n为m的倍数；
10.依次m条所述贝塞尔曲线，以形成目标圆角曲线。
11.可选地，所述根据所述圆角半径获取n个曲率半径，包括：
12.根据所述圆角半径和高斯概率分布获取n个所述曲率半径。
13.可选地，所述绘制参数还包括所述圆角控件的宽和高；
14.在所述根据所述圆角半径获取n个曲率半径之前，所述方法还包括：
15.确定所述圆角曲线的宽或所述圆角曲线的高是否小于所述圆角半径；
16.若是，则将预存的圆角半径阈值设置为所述圆角半径。
17.可选地，所述绘制参数还包括所述第一直边的位置坐标和所述第二直边的位置坐标；
18.所述根据所述绘制参数以及n个所述曲率半径，绘制m条贝塞尔曲线，包括：
19.根据所述第一直边的位置坐标、所述第二直边的位置坐标、所述圆角控件的高及n
个所述曲率半径，获取所述贝塞尔曲线的起始点坐标、控制点坐标以及终止点坐标；
20.将所述起始点坐标、所述控制点坐标及所述终止点坐标代入所述贝塞尔曲线的绘制函数，以依次绘制出对应的贝塞尔曲线。
21.可选地，所述根据所述第一直边的位置坐标、所述第二直边的位置坐标、所述圆角控件的高及n个所述曲率半径，获取所述贝塞尔曲线的起始点坐标、控制点坐标以及终止点坐标，包括：
22.根据下述公式计算所述贝塞尔曲线的起始点坐标、控制点坐标及终止点坐标：
[0023][0024][0025][0026]
其中，为起始点的横坐标，起始点的纵坐标，为控制点的横坐标，控制点的纵坐标，为终止点的横坐标，为终止点的纵坐标，r为圆角半径，x1为第一直边的横坐标，y2为第二直边的纵坐标，height为圆角控件的高，ri为第i个曲率半径，i为大于0的自然数。
[0027]
可选地，所述方法还包括：
[0028]
依次将所述第一直边、所述目标圆角曲线及所述第二直边顺序连接，以绘制出所述圆角控件的至少一个圆角。
[0029]
可选地，所述依次将所述第一直边、所述目标圆角曲线及所述第二直边顺序连接，以绘制出所述圆角控件的至少一个圆角，包括：
[0030]
确定所述目标圆角曲线在所述第一直边的绘制起点的纵坐标，依次将所述绘制起点、所述目标圆角曲线及所述第二直边顺序连接。
[0031]
可选地，所述绘制起点的纵坐标为：
[0032]y起
：width/2-r；
[0033]
其中，y
起
为所述目标圆角曲线的绘制起点的纵坐标，width为圆角控件的宽，r为圆角曲线的圆角半径。
[0034]
可选地，所述贝塞尔曲线为二阶贝塞尔曲线；
[0035]
当所述贝塞尔曲线为二阶贝塞尔曲线时，n具体取值为18，m具体取值为6。
[0036]
第二方面，本发明实施例提供一种电子设备，包括：
[0037]
一个或多个处理器；
[0038]
存储装置，其上存储有一个或多个程序，
[0039]
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述任一项所述的方法。
[0040]
第三方面，本发明实施例提供一种计算机可读存储介质，所述可读存储介质上存储有计算机程序，其中，该程序被处理器执行时实现如上述任一项所述的方法。
[0041]
相对于传统技术，在本发明各个实施例提供的圆角曲线绘制方法、电子设备及存储介质，根据圆角控件的控制参数，将圆角控件中的圆角曲线分为m段贝塞尔曲线进行分段绘制，并依次连接m段贝塞尔曲线得到的目标圆角曲线，从而改善了目标圆角曲线的平滑
度，提高了用户的视觉舒适感。
附图说明
[0042]
一个或多个实施例通过与之对应的附图中的图片进行示例性说明，这些示例性说明并不构成对实施例的限定，附图中具有相同参考数字标号的元件表示为类似的元件，除非有特别申明，附图中的图不构成比例限制。
[0043]
图1为本发明实施例提供的一种电子设备的结构框图；
[0044]
图2a为本发明实施例提供的一种圆角曲线绘制方法的流程示意图；
[0045]
图2b为本发明实施例提供的又一圆角曲线绘制方法的流程示意图；
[0046]
图3a为本发明实施例提供的一种圆角曲线绘制方法的流程示意图；
[0047]
图3b为本发明实施例提供的canvas绘制坐标系的结构示意图；
[0048]
图4为本发明实施例提供的一种圆角控件的圆角绘制方法的流程示意图。
具体实施方式
[0049]
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
[0050]
需要说明的是，在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互任意组合。在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
[0051]
请参阅图1，图1示例性的提供了本发明实施例中应用圆角曲线绘制方法的电子设备的结构框图。
[0052]
如图1所示，电子设备100至少包括控制器110、通讯模块120、存储模块130、显示模块140及电源模块150，其中，通讯模块120、存储模块130、显示模块140及电源模块150分别与控制器110连接。应该说明的是，图1所示的结构并不构成对电子设备100的限定，电子设备100可以包括比图示更多或者更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。
[0053]
其中，控制器110至少包括cpu、存储用于电子设备100的控制程序的只读存储器rom、及存储用于从电子设备100的外部输入的信号或数据或针对电子设备100中执行的操作的存储区的随机存取存储器ram，cpu、rom及ram之间通过内部总线的方式相互连接。cpu通过运行或执行存储在存储器rom内的软件程序和/或模块，以及调用存储在存储器ram内的数据，执行电子设备100的各种功能和数据处理，从而对电子设备100进行管理和控制，例如，实现本发明任一实施例所述的圆角曲线的绘制方法。
[0054]
通讯模块120可以包括蜂窝模块、无线lan模块及短距离通讯模块中至少一个。蜂窝模块使得电子设备100经由一个天线或多个天线与其他设备进行无线通讯连接，例如，蜂窝模块通过天线与基站进行数据通讯，接收基站的下行通讯数据并解析；或者，向基站发送上行通讯数据。其中，蜂窝模块所能支持的蜂窝网络包括但不限于是gsm网络、cdma网络、3g/4g/5g网络、fdma、tdma、pdc、tacs、amps等。无线lan模块可以根据控制器110的控制，在
安装无线接入(ap)(未示出)的位置中接入互联网。无线lan模块支持无线lan标准(ieee802.11x)，无线lan模块可以驱动wi-fi定位系统(wps)，wps通过使用由与无线lan模块无线连接的无线ap提供的位置信息，来识别包括无线lan模块的电子设备的位置信息。短距离通信模块与根据控制器110的控制来无线处理与电子设备100的短距离通信的模块相对应,并可以基于蓝牙、红外数据协会(irda)通信、wifi直连通信、或短距离通信方案(诸如，近场通信(nfc))来处理通信。
[0055]
存储模块130则根据控制器110的控制，存储输入/输出数据；或者，与通信模块120操作，存储输入/输出数据。存储模块130还可以存储用于控制电子设备100或控制器110的控制程序和应用。具体的，所述存储模块130可以包括但不限于是非易失性存储器、易失性存储器、硬盘驱动器(hdd)或固态驱动器(ssd)。
[0056]
显示模块140为用户提供gui图形用户界面，用于向用户展示各种服务对应的用户界面，或者，获取用户操作，以使电子设备100根据用户操作进行及时响应，从而实现了用户与电子设备的交互。其中，所述gui图形用户界面通过布局或美化界面图标使其美观、智能及易操作，从而提高用户的使用体验。具体的，显示模块140包括用于显示屏、用于接收用户操作的触摸屏及处理用户操作数据的触摸屏控制器，用户可以通过触摸屏产生操作数据，并通过触摸屏控制器将所述操作数据发送至控制器110以使所述电子设备100响应用户操作。
[0057]
电源模块150为所述电子设备100提供一个或多个电池，以为所述电子设备100供电。和/或，所述电源模块150还可以通过与所述电子设备100中连接的有线电缆，接入外部电源以为所述电子设备100供电。和/或，所述电源模块150还可以通过无线充电技术从外部电源无线为所述电子设备100供电。
[0058]
gui图形界面用户界面为用户提供了图形化的交互界面，可以理解的，在所述交互界面中，通过图形或动画将电子设备的相关服务信息展示于用户端，因此，图形界面的美观及舒适程度将直接影响用户对电子设备的使用体验。
[0059]
其中，圆角矩形在电子设备中被大量使用，比如，采用圆角矩形制作图标、弹窗或选项框等。在本发明提供的各实施例中所述的圆角控件，包括但不限于为圆角矩形，然而，由于圆角矩形作为其中一种最为典型的圆角控件，因此，在以下的实施例中，以圆角矩形为例，详细说明圆角矩形中左上角的圆角曲线的绘制过程。
[0060]
应该说明的是，本发明各实施例提供的圆角曲线绘制方法，应用于电子设备，其中，所述电子设备主要是指配置为安卓系统的电子设备，所述电子设备包括但不限是智能终端、平板本电脑、pda(personal digital assistant，个人数字助理)、电子书阅读器、多媒体播放器等。
[0061]
具体的，请参阅图2a，本发明实施例提供一种圆角曲线绘制方法，所述方法包括：
[0062]
s21、获取圆角控件的绘制参数；
[0063]
其中，所述圆角控件中包含有至少一条圆角曲线，以及与所述圆角曲线连接的第一直边和第二直边。具体的，圆角曲线是指一段分别与第一直边和第二直边相切的圆弧曲线，将该圆弧曲线用以替换原来由第一直边和第二直边形成的角，从而构成所述控件的圆角，并将至少包含一个上述圆角曲线的控件成为圆角控件。
[0064]
绘制参数是指绘制圆角曲线所必须提供的参数，其中，所述绘制参数中至少包括
所述圆角曲线的圆角半径。
[0065]
可以理解的，圆角半径的大小体现了圆角曲线的弯曲程度，半径越大，所述圆角曲线的弯曲程度越低；相反的，半径越小，所述圆角曲线的弯曲程度越高。
[0066]
因此，为了保证圆角曲线的弯曲程度，在一些实施例中，所述绘制参数还包括所述圆角控件的宽和高，在获取圆角控件的绘制参数后，请参阅图2b，所述方法还包括：
[0067]
s211、确定所述圆角曲线的宽或所述圆角曲线的高是否小于所述圆角半径；
[0068]
s212、若是，则将预存的圆角半径阈值设置为所述圆角半径。
[0069]
其中，预存的圆角半径阈值的取值为140px。
[0070]
s22、根据所述圆角半径获取n个曲率半径，其中，n为大于0的自然数；
[0071]
s23、根据所述绘制参数以及n个所述曲率半径，绘制m条贝塞尔曲线，其中，m为大于0的自然数,n为m的倍数；
[0072]
应该说明的是，在现有技术中，将圆的一段圆弧曲线相切在第一直边和第二直边，以构成所述圆角控件的圆角。可以理解的，该圆弧曲线上任意一点的曲率半径即为该圆的半径。然而，通过上述方法绘制的圆弧曲线，容易出现所述圆弧曲线的过渡不够圆滑而出现梯度的情况。
[0073]
因此，在本发明实施例中，引入贝塞尔曲线来以替代现有技术中的圆弧曲线，以改善圆弧曲线的过渡不够圆滑的问题。
[0074]
贝塞尔曲线，又称为贝茨曲线，是应用于二维图形应用程序的数学曲线。其中，所述贝塞尔曲线由起始点、终止点及控制点组成，可通过调整控制点改变所述贝塞尔曲线的形状。
[0075]
在所述电子设备配置的系统中，预先定义了用于绘制控件的应用程序接口函数(application programming interface，api)。可以理解的，canvas用于绘制常规图形，例如，用于绘制圆、椭圆或矩形等常规图形，若需要绘制更复杂的图形，例如，绘制圆角矩形，则需结合path路径才能完成。于是，当触发绘制圆角控件时，所述电子设备根据绘制参数创建所述圆角曲线的路径，并将所述路径代入canvas的drawpath方法中，以在canvas上绘制所述圆角控件的圆角曲线。
[0076]
在具体创建所述圆角曲线的路径时，由于所述圆角曲线由m条贝塞尔曲线构成，因此，根据圆角半径获取出n个曲率半径，并结合所述圆角控件的绘制参数分别计算出m条贝塞尔曲线的起始点、终止点及控制点坐标，从而创建出所述圆角曲线的绘制路径。
[0077]
在一些实施例中，所述贝塞尔曲线为二阶贝塞尔曲线；当所述贝塞尔曲线为二阶贝塞尔曲线时，n具体取值为18，m具体取值为6。
[0078]
在又一些实施例中，根据所述圆角半径和高斯概率分布获取n个所述曲率半径。
[0079]
其中，高斯分布又称为正态分布，其分布曲线呈钟形，反映了随机变量的分布规律，用于计算随机变量落入任何范围内的概率。其中，标准差σ的取值决定了概率分布的幅度。在本发明实施例中，引入高斯概率分布函数用以获取出n个曲率半径，具体的，随机数y分布在区间(-jσ,+jσ)的高斯概率分布函数为：
[0080]
[0081]
其中，j为大于等于0且小于n的整数，在具体取值时，从j＝n-1开始，依次向下递减，直至j＝0，从而得到n个概率密度值。
[0082]
进而，将所述圆角半径依次与n个概率密度值进行乘积计算，从而得到n个曲率半径。
[0083]
应该说明的是，当j＝n-1时，其概率密度值趋近于1；当j＝0，其概率密度值等于0。
[0084]
在又一些实施例中，可以通过定义所述高斯概率分布的标准差σ的值，以得到不同幅值的分布曲线，从而改变了n个曲率半径的取值，进而改变绘制的贝塞尔曲线的形状。
[0085]
在本实施例中，通过自定义高斯概率分布曲线，以获取到不同幅值的分布曲线下的概率密度值，进而绘制出不同曲率的贝塞尔曲线。
[0086]
s24、依次连接m条所述贝塞尔曲线，以形成目标圆角曲线。
[0087]
在绘制出m条贝塞尔曲线后，依次将第i条所述贝塞尔曲线的终止点与第i+1条所述贝塞尔曲线的起始点进行连接，以形成目标圆角曲线，其中i为大于0的自然数。
[0088]
在本发明实施例中，提供一种圆角曲线绘制方法，通过将圆角控件中的圆角曲线分为m段贝塞尔曲线进行分段绘制，并依次连接m段贝塞尔曲线得到的目标圆角曲线，从而提高了目标圆角曲线的平滑度。
[0089]
其中，所述目标圆角曲线分别与所述第一直边和所述第二直边相切，为了使所述目标圆角曲线与所述第一直边、所述第二直边进行较好的过渡，请参阅图3a，所述绘制参数还包括所述第一直边的位置坐标和所述第二直边的位置坐标，所述根据所述绘制参数以及n个所述曲率半径，绘制m条贝塞尔曲线，包括：
[0090]
s31、根据所述第一直边的位置坐标、所述第二直边的位置坐标、所述圆角控件的高及n个所述曲率半径，获取所述贝塞尔曲线的起始点坐标、控制点坐标以及终止点坐标；
[0091]
具体的，以绘制圆角矩形左上角的圆角曲线为例进行说明，请参阅图3b，需要说明是，在canvas的坐标系xoy中，canvas坐标系有且只有一个，且是唯一不变的，其坐标原点在view的左上角，从坐标原点向右为x轴的正半轴，从坐标原点向下为y轴的正半轴。所述第一直边相对于坐标系的y轴平行，所述第二直边相对于坐标系的x轴平行。因此，所述第一直边的位置坐标是指第一直边投影在x轴的坐标x1，所述第二直边的位置坐标是指第二直边投影在y轴的坐标y2。
[0092]
于是，根据下述公式计算所述贝塞尔曲线的起始点坐标、控制点坐标及终止点坐标：
[0093][0094][0095][0096]
其中，为起始点的横坐标，起始点的纵坐标，为控制点的横坐标，控制点的纵坐标，为终止点的横坐标，为终止点的纵坐标，r为圆角半径，x1为第一直边的横坐标，y2为第二直边的纵坐标，height为圆角控件的高，ri为第i个曲率半径，i为大于0的自然数。
[0097]
s32、将所述起始点坐标、所述控制点坐标及所述终止点坐标代入所述贝塞尔曲线
的绘制函数，以依次绘制出对应的贝塞尔曲线。
[0098]
需要说明的是，canvas的drawpath方法中传入的各种坐标指的都是绘图坐标系中的坐标，而非canvas坐标系中的坐标。默认情况下，绘图坐标系与canvas坐标系完全重合。
[0099]
可以理解的是，当需要将所述圆角矩形的其他角绘制成圆角时，只需将上述计算所述贝塞尔曲线的起始点坐标、控制点坐标及终止点坐标的公式中的第一直边和第二直边的坐标替换为与当前绘制圆角曲线相切的两条直边即可。
[0100]
在本发明实施例中，通过分别确定各段贝塞尔曲线的起始点坐标、控制点坐标及终止点坐标，从而根据起始点坐标、控制点坐标及终止点坐标唯一绘制出对应的贝塞尔曲线。
[0101]
可以理解的，所述圆角控件中至少包含有一条圆角曲线，以及与所述圆角曲线连接的第一直边和第二直边，因此，在绘制出目标圆角曲线后，请参阅图4，所述方法还包括：
[0102]
s41、确定所述目标圆角曲线在所述第一直边的绘制起点的纵坐标；其中，所述绘制起点的纵坐标为：
[0103]y起
：width/2-r；
[0104]
其中，y
起
为所述目标圆角曲线的绘制起点的纵坐标，width为圆角控件的宽，r为圆角曲线的圆角半径。
[0105]
s42、依次将所述绘制起点、所述目标圆角曲线及所述第二直边顺序连接。
[0106]
可以理解的，所述绘制起点为所述目标圆角曲线在所述第一直边的切点，将所述目标圆角曲线与所述第一直边在所述绘制起点连接，使得所述目标圆角曲线与第一直边、第二直边的衔接能够平滑过渡，进而保证了所述圆角控件的顺滑效果，提高了用户体验。
[0107]
以上所描述的装置或设备实施例仅仅是示意性的，其中所述作为分离部件说明的单元模块可以是或者也可以不是物理上分开的，作为模块单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络模块单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
[0108]
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现圆角曲线绘制装置,当然也可以通过硬件实现。并且，由于圆角曲线绘制的构思与上述各个实施例所述的圆角曲线绘制方法的构思一样，在内容不互相冲突下，圆角曲线绘制的实施例可以引用上述各个实施例的内容，在此不赘述。
[0109]
本发明实施例提供了一种非易失性计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图2a、2b、3a及4的方法步骤。
[0110]
本发明实施例提供了一种计算机程序产品，包括存储在非易失性计算机可读存储介质上的计算程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行上述任意方法实施例中的本体构建方法，例如，执行以上描述的图2a、2b、3a及4的方法步骤。
[0111]
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；在本发明的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，步骤可以以任意顺序实现，并存在如上所述的本发明的不同方面的许多其它变化，为了简明，它们没有在细节中提供；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人
员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。