CN114924821B - 环形进度条的显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明实施例涉及计算机技术领域，特别涉及一种环形进度条的显示方法、装置、电子设备及存储介质。其中，方法包括：获取环形进度条模型和显示环形进度条所需的目标数据；其中，目标数据包括初始进度值和结束进度值；基于初始进度值，对环形进度条模型进行初始着色；基于初始进度值和结束进度值，对环形进度条模型进行二次着色，以完成环形进度条的显示。本方案，可以对单个的环形进度条模型进行初始着色和二次着色，以完成环形进度条的显示，从而可以避免增加内存负担。

Description

环形进度条的显示方法、装置、电子设备及存储介质

技术领域

本发明实施例涉及计算机技术领域，特别涉及一种环形进度条的显示方法、装置、电子设备及存储介质。

背景技术

随着新媒体时代的来临，为了在海量的信息中，快速获得所需的、有用的信息，利用进度条将数据信息进行更加直观的可视化呈现，是数据发展的一种必然趋势。

相关技术中，例如采用CSS(Cascading Style Sheets，层叠样式表)和SVG(Scalable Vector Graphics，可缩放矢量图形)均可实现环形进度条的显示。然而，上述相关技术中均需要不同圆环的层叠遮盖来实现环形进度条的显示，因此会增加内存负担。

发明内容

为了解决利用不同圆环的层叠遮盖来实现环形进度条的显示会增加内存负担的问题，本发明实施例提供了一种环形进度条的显示方法、装置、电子设备及存储介质。

第一方面，本发明实施例提供了一种环形进度条的显示方法，包括：

获取环形进度条模型和显示环形进度条所需的目标数据；其中，所述目标数据包括初始进度值和结束进度值；

基于所述初始进度值，对所述环形进度条模型进行初始着色；

基于所述初始进度值和所述结束进度值，对所述环形进度条模型进行二次着色，以完成环形进度条的显示。

在一种可能的设计中，所述基于所述初始进度值，对所述环形进度条模型进行初始着色，包括：

在所述初始进度值为0时，将预设的背景颜色着色到所述环形进度条模型中的全部区域；

在所述初始进度值不为0时，执行：

将预设的进度颜色着色到所述环形进度条模型中不超过所述初始进度值的区域；

将预设的背景颜色着色到所述环形进度条模型中超过所述初始进度值的区域。

在一种可能的设计中，所述基于所述初始进度值和所述结束进度值，对所述环形进度条模型进行二次着色，包括：

按照由所述初始进度值指向所述结束进度值的方向，将所述环形进度条模型中超过所述初始进度值且不超过所述结束进度值的区域的所述背景颜色按照预设行进速度逐步替换为所述进度颜色。

在一种可能的设计中，所述基于所述初始进度值，对所述环形进度条模型进行初始着色，包括：

确定用于显示所述环形进度条所需的横向段数和纵向段数；其中，所述横向段数为连接所述环形进度条模型的两条边上最近两个点之间的线段数，所述纵向段数为所述环形进度条模型被分割后的段数；

基于所述横向段数和所述纵向段数，确定所述环形进度条模型的着色顶点；

基于所述初始进度值，利用所述环形进度条模型中的每个所述着色顶点对所述环形进度条模型进行初始着色。

在一种可能的设计中，所述基于所述初始进度值，利用所述环形进度条模型中的每个所述着色顶点对所述环形进度条模型进行初始着色，包括：

按照所述环形进度条模型的内环和外环的先后顺序，依次对每个所述着色顶点进行编号；其中，第一个所述着色顶点的编号为0；

基于每个所述着色顶点的编号，对所述环形进度条模型进行初始着色。

在一种可能的设计中，所述基于所述初始进度值和所述结束进度值，对所述环形进度条模型进行二次着色，包括：

基于每个所述着色顶点的编号，利用所述环形进度条模型中超过所述初始进度值且不超过所述结束进度值的区域的所有着色顶点对所述环形进度条模型进行二次着色。

在一种可能的设计中，所述基于每个所述着色顶点的编号，对所述环形进度条模型进行初始着色，包括：

将每个所述着色顶点的编号输入到如下第一判断公式中，若所述第一判断公式成立，则将预设的进度颜色设置到当前着色顶点，否则将预设的背景颜色设置到当前着色顶点；

其中，所述第一判断公式为：

i％(T+1)＜(T+1)*F

式中，i为当前着色顶点的编号，T为纵向段数，F为所述初始进度值；

所述基于每个所述着色顶点的编号，利用所述环形进度条模型中超过所述初始进度值且不超过所述结束进度值的区域的所有着色顶点对所述环形进度条模型进行二次着色，包括：

将每个所述着色顶点的编号输入到如下第二判断公式中，在所述第二判断公式成立，且当前着色顶点设置所述背景颜色时，则将当前着色顶点的所述背景颜色替换为所述进度颜色，以完成二次着色；

其中，所述第二判断公式为：

i％(T+1)＜(T+1)*E

式中，E为所述结束进度值。

第二方面，本发明实施例还提供了一种环形进度条的显示装置，包括：

获取单元，用于获取环形进度条模型和显示环形进度条所需的目标数据；其中，所述目标数据包括初始进度值和结束进度值；

初始着色单元，用于基于所述初始进度值，对所述环形进度条模型进行初始着色；

二次着色单元，用于基于所述初始进度值和所述结束进度值，利用所述着色器中的进度颜色对所述环形进度条模型进行二次着色，以完成环形进度条的显示。

第三方面，本发明实施例还提供了一种计算设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现本说明书任一实施例所述的方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行本说明书任一实施例所述的方法。

本发明实施例提供了一种环形进度条的显示方法、装置、电子设备及存储介质，首先获取环形进度条模型和显示环形进度条所需的目标数据，然后基于目标数据中的初始进度值，对获取到的环形进度条模型进行初始着色，最后基于目标数据中的初始进度值和结束进度值，对初始着色后的环形进度条模型进行二次着色，如此对单个的环形进度条模型进行初始着色和二次着色，以完成环形进度条的显示，从而可以避免增加内存负担。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例提供的一种环形进度条的显示方法流程图；

图2是本发明一实施例提供的一种环形进度条模型的示意图；

图3是本发明一实施例提供的另一种环形进度条模型的示意图；

图4是本发明一实施例提供的一种环形进度条模型的着色顶点编号示意图；

图5是本发明一实施例提供的另一种环形进度条的显示方法流程图；

图6是本发明一实施例提供的一种电子设备的硬件架构图；

图7是本发明一实施例提供的一种环形进度条的显示装置结构图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

如前所述，在相关技术中，采用CSS实现环形进度条的显示，通常是在着进度颜色的完整圆环上覆盖两个半圆环，通过旋转这两个带有背景颜色的半圆环，来对带有进度颜色的完整圆环进行旋转遮盖，来实现环形进度条的显示。而采用SVG则是利用两个重叠的完整圆环，一个作为背景圆环，另一个作为进度圆环，利用对位于上图层的进度圆环根据所要显示的进度进行进度颜色着色，来遮盖背景圆环的背景颜色，以此来实现环形进度条的显示。然而，上述相关技术中均需要不同圆环的层叠遮盖来实现环形进度条的显示，因此会增加内存负担。

为了解决上述技术问题，发明人可以考虑根据显示环形进度条所需的目标数据中的初始进度值和结束进度值，对单个环形进度条模型进行初始着色和二次着色来完成环形进度条的显示，以此来避免使用多个层叠圆环增加内存负担的问题。

下面描述以上构思的具体实现方式。

请参考图1，本发明实施例提供了一种环形进度条的显示方法，该方法包括：

步骤100：获取环形进度条模型和显示环形进度条所需的目标数据；其中，目标数据包括初始进度值和结束进度值；

步骤102：基于初始进度值，对环形进度条模型进行初始着色；

步骤104：基于初始进度值和结束进度值，对环形进度条模型进行二次着色，以完成环形进度条的显示。

本发明实施例中，首先获取环形进度条模型和显示环形进度条所需的目标数据，然后基于目标数据中的初始进度值，对获取到的环形进度条模型进行初始着色，最后基于目标数据中的初始进度值和结束进度值，对初始着色后的环形进度条模型进行二次着色，如此对单个的环形进度条模型进行初始着色和二次着色，以完成环形进度条的显示，从而可以避免增加内存负担。

下面描述图1所示的各个步骤的执行方式。

针对步骤100：

需要说明的是，本步骤中的环形进度条模型为三维空间模型，不论放大或缩小，都不容易出现失真的情况。当然，环形进度条模型也可以为二维空间模型，在此不做具体限定。

在本步骤中，环形进度条模型可以选用三维空间模型，首先根据所要显示的环形进度条的尺寸，获取对应的内半径、外半径、横向段数、纵向段数的环形进度条模型。其中，横向段数为连接环形进度条模型的两条边上最近两个点之间的线段数，纵向段数为环形进度条模型被分割后的段数，纵向段数越多，三维的环形进度条模型越接近圆。

在本步骤中，针对不同横向段数和纵向段数，分别提供了如图2和图3所示的三维的环形进度条模型的示意图。其中，图2所示的环形进度条模型的横向段数为1，纵向段数为20；图3所示的环形进度条模型的横向段数为2，纵向段数为100。

然后，获取显示环形进度条的进度变化所需的目标数据，其中，目标数据中包括初始进度值和结束进度值。例如，当初始进度值为20％，结束进度值为40％时，那么所显示的环形进度条就是从20％增大到40％。

针对步骤102：

需要说明的是，在本发明实施例中，是利用着色器对环形进度条模型进行初始着色和二次着色。因此，可以在着色器中预先设置包括进度颜色和背景颜色的颜色数组，该颜色数组包含多个用于对环形进度条模型进行着色的颜色数值，每个颜色数值包括R通道数值、G通道数值和B通道数值。

在步骤102中，本发明实施例提供了两种对环形进度条模型进行初始着色的方式，下面对这两种方式分别进行描述。

方式一：

在方式一中，步骤102可以包括：

在初始进度值为0时，将预设的背景颜色着色到环形进度条模型中的全部区域；

在初始进度值不为0时，执行：

将预设的进度颜色着色到环形进度条模型中不超过初始进度值的区域；

将预设的背景颜色着色到环形进度条模型中超过初始进度值的区域。

在本实施例中，可以先判断初始进度值是否为0，再根据初始进度值是否为0的两种情况，分别利用进度颜色和背景颜色对环形进度条模型的整个区域进行初始着色。

方式二：

在方式二中，步骤102可以包括：

确定用于显示环形进度条所需的横向段数和纵向段数；其中，横向段数为连接环形进度条模型的两条边上最近两个点之间的线段数，纵向段数为环形进度条模型被分割后的段数；

基于横向段数和纵向段数，确定环形进度条模型的着色顶点；

基于初始进度值，利用环形进度条模型中的每个着色顶点对环形进度条模型进行初始着色。

在本实施例中，可以根据横向段数和纵向段数确定环形进度条模型的着色顶点，然后基于初始进度值，利用着色器中预先设置的进度颜色和背景颜色的颜色数值设置到环形进度条模型中的每个着色顶点，利用着色器的像素着色器根据每个着色顶点设置的颜色数值对环形进度条模型进行初始着色。

需要说明的是，为了提高对环形进度条模型的着色速度，可以给环形进度条模型设置较小的横向段数，例如横向段数为1。而环形进度条模型的纵向段数则设置越多越好，这样可以增加环形进度条的纵向着色顶点，使环形进度条显示的进度百分比更加精确。

在一些实施方式中，步骤“基于初始进度值，利用环形进度条模型中的每个着色顶点对环形进度条模型进行初始着色”可以包括：

按照环形进度条模型的内环和外环的先后顺序，依次对每个着色顶点进行编号；其中，第一个着色顶点的编号为0；

基于每个着色顶点的编号，对环形进度条模型进行初始着色。

在本实施例中，可以通过对环形进度条模型的每个着色顶点进行编号，然后基于每个着色顶点的编号来确定每个着色顶点在初始着色时应该设置背景颜色还是着进度颜色，从而利用着色器的像素着色器根据每个着色顶点设置的颜色数值完成对环形进度条模型的初始着色。

例如，环形进度条模型的着色顶点的编号方式可以参照图4。其中，图4所示的环形进度条模型的横向段数为1，纵向段数为5。从环形进度条模型的内环开始对每个着色顶点从0开始依次编号，在内环中编号为5的着色顶点与编号0的着色顶点为同一位置，接着从与编号为0的着色顶点对应的外环的着色顶点开始进行编号，直至编号到11。同样，在外环中，编号为6的着色顶点与编号11的着色顶点为同一位置。

在一些实施方式中，步骤“基于每个着色顶点的编号，对环形进度条模型进行初始着色”可以包括：

将每个着色顶点的编号输入到如下第一判断公式中，若第一判断公式成立，则将预设的进度颜色设置到当前着色顶点，否则将预设的背景颜色设置到当前着色顶点；

其中，第一判断公式为：

i％(T+1)＜(T+1)*F

式中，i为当前着色顶点的编号，T为纵向段数，F为初始进度值。

在本实施例中，首先基于初始进度值，设置第一判断公式，然后将每个着色顶点的编号输入到第一判断公式中，若第一判断公式成立，则认为当前着色顶点位于不超过初始进度值的区域，故将预设的进度颜色设置到当前着色顶点，否则认为当前着色顶点位于超过初始进度值的区域，将预设的背景颜色设置到当前着色顶点，然后利用着色器的像素着色器根据每个着色顶点设置的颜色数值来完成对环形进度条模型的初始着色。

继续利用图4的环形进度条模型来进行举例说明，若获取的初始进度值为20％，且图4的环形进度条模型的纵向段数为5，那么将纵向段数和初始进度值代入上述第一判断公式中，则可以计算得到使第一判断公式成立的着色顶点的编号分别为0、1、6和7。因此，将预设的进度颜色的颜色数值设置到编号为0、1、6和7的着色顶点，并利用着色器中的像素着色器，根据各着色顶点设置的进度颜色的颜色数值对编号为0、6、1的着色顶点之间的三角区域和编号为6、1、7的着色顶点之间的三角区域进行进度颜色着色。可以理解，给编号不能使第一判断公式成立的着色顶点着预设背景颜色的颜色数值，并利用着色器中的像素着色器，对这些着色顶点之间的三角区域进行背景颜色着色，以此来完成对环形进度条模型的初始着色。

需要说明的是，实现步骤“基于每个着色顶点的编号，对环形进度条模型进行初始着色”的方式还可以为：

根据初始进度值，确定在内环中与初始进度值对应的着色顶点的编号；

根据在内环中与初始进度值对应的着色顶点的编号，确定在外环中与初始进度值对应的着色顶点的编号；

基于与初始进度值对应的每一环的着色顶点的编号，对环形进度条模型进行初始着色。

具体地，当横向段数为1时，可以根据如下公式计算在内环中与初始进度值对应的着色顶点的编号：

其中，[x]代表不超过x的最大整数，为在内环中与初始进度值对应的着色顶点的编号，T为纵向段数，F为初始进度值。

同样，当横向段数为1时，可以根据如下公式计算在外环中与初始进度值对应的着色顶点的编号：

其中，为在外环中与初始进度值对应的着色顶点的编号，/>为在内环中与初始进度值对应的着色顶点的编号，T为纵向段数。

继续利用图4的环形进度条模型来进行举例说明，若获取的初始进度值为20％，且图4的环形进度条模型的纵向段数为5，那么将纵向段数和初始进度值代入上述计算在内环中与初始进度值对应的着色顶点的编号公式中，可以计算得到在内环中与初始进度值对应的着色顶点的编号为1；接着，将纵向段数和在内环中与初始进度值对应的着色顶点的编号代入计算在外环中与初始进度值对应的着色顶点的编号公式中，可以计算得到在外环中与初始进度值对应的着色顶点的编号为7；那么，基于初始进度值对环形进度条模型进行初始着色，就需要将进度为0时内环和外环的着色顶点的编号计算出来，即进度为0时内环的着色顶点的编号为0，通过对进度为0时内环的着色顶点的编号加上纵向段数，再加1，即可得到进度为0时外环的着色顶点的编号为6；因此，可以将预设的进度颜色的颜色数值设置到编号为0、1、6和7的着色顶点，然后利用着色器中的像素着色器，对编号为0、6、1的着色顶点之间的三角区域和编号为6、1、7的着色顶点之间的三角区域进行进度颜色着色。同理，遍历每个着色顶点的编号时，将编号不为0、1、6和7的着色顶点设置预设的背景颜色的颜色数值，并利用着色器中的像素着色器，对这些着色顶点之间的三角区域进行背景颜色着色，以此来完成对环形进度条模型的初始着色。

针对步骤104：

对于方式一而言，步骤104可以包括：

按照由初始进度值指向结束进度值的方向，将环形进度条模型中超过初始进度值且不超过结束进度值的区域的背景颜色按照预设行进速度逐步替换为进度颜色。

需要说明的是，在步骤102中，对环形进度条模型中不超过初始进度值的区域进行进度颜色着色，对超过初始进度值的区域进行背景颜色着色，那么在进行二次着色时，则需要将环形进度条模型中超过初始进度值且不超过结束进度值的区域的背景颜色替换为进度颜色。在本实施例中，可以利用动画的更新方法，通过自定义动画的持续时间，来使显示的环形进度条从初始进度值逐步变化到结束进度值。

综上，方式一首先通过判断初始进度值是否为0，利用进度颜色和背景颜色对环形进度条模型的整个区域进行初始着色，在将环形进度条模型中超过初始进度值且不超过结束进度值的区域的背景颜色替换为进度颜色的过程中，可以由初始进度值指向结束进度值的方向，按照预设行进速度逐步替换，以完成对环形进度条模型的二次着色，实现环形进度条从初始进度值逐步变化到结束进度值的动态显示效果。

对于方式二而言，步骤104可以包括：

基于每个着色顶点的编号，利用环形进度条模型中超过初始进度值且不超过结束进度值的区域的所有着色顶点对环形进度条模型进行二次着色。

在本实施例中，利用步骤102中环形进度条模型的每个着色顶点的编号，确定环形进度条模型中超过初始进度值且不超过结束进度值的区域的所有着色顶点，来对环形进度条模型中超过初始进度值且不超过结束进度值的区域进行二次着色，以完成环形进度条的显示。

在一些实施方式中，步骤“基于每个着色顶点的编号，利用环形进度条模型中超过初始进度值且不超过结束进度值的区域的所有着色顶点对环形进度条模型进行二次着色”可以包括：

将每个着色顶点的编号输入到如下第二判断公式中，在第二判断公式成立，且当前着色顶点设置背景颜色时，则将当前着色顶点的背景颜色替换为进度颜色，以完成二次着色；

其中，第二判断公式为：

i％(T+1)＜(T+1)*E

式中，i为当前着色顶点的编号，T为纵向段数，E为结束进度值。

在本实施例中，首先基于结束进度值，设置第二判断公式，然后将每个着色顶点的编号输入到第二判断公式中，若第二判断公式成立，则认为当前着色顶点位于不超过结束进度值的区域，且若第二判断公式成立的同时，当前着色顶点设置背景颜色的颜色数值时，则认为当前着色顶点位于超过初始进度值且不超过结束进度值的区域，则此时将当前着色顶点的背景颜色的颜色数值替换为进度颜色的颜色数值，以此来完成对环形进度条模型的二次着色。

继续利用图4的环形进度条模型来进行举例说明，若获取的初始进度值为20％，结束进度值为40％，且图4的环形进度条模型的纵向段数为5，那么将纵向段数和结束进度值代入上述第二判断公式中，则可以计算得到使第二判断公式成立的着色顶点的编号分别为0、1、2、6、7和8。而在步骤102中，编号为0、1、6和7的着色顶点之间的区域已经着了进度颜色，编号为2和8的着色顶点之间的区域已经着了背景颜色。因此，可以将预设的进度颜色的颜色数值设置到编号为2和8的着色顶点上，然后利用着色器中的像素着色器，对编号为1、7、2的着色顶点之间的三角区域和编号为7、2、8的着色顶点之间的三角区域进行进度颜色着色，以此来完成对环形进度条模型的二次着色。可以理解，编号不能使第二判断公式成立，且当前着色顶不设置背景颜色的颜色数值时，不需要对其设置的颜色数值进行改变。

需要说明的是，实现步骤“基于每个着色顶点的编号，利用环形进度条模型中超过初始进度值且不超过结束进度值的区域的所有着色顶点对环形进度条模型进行二次着色”的方式还可以为：

根据结束进度值，确定在内环中与结束进度值对应的着色顶点的编号；

根据在内环中与结束进度值对应的着色顶点的编号，确定在外环中与结束进度值对应的着色顶点的编号；

基于与初始进度值和结束进度值对应的每一环的着色顶点的编号，对环形进度条模型中超过初始进度值且不超过结束进度值的区域进行二次着色。

具体地，当横向段数为1时，可以根据如下公式计算在内环中与结束进度值对应的着色顶点的编号：

其中，[x]代表不超过x的最大整数，为在内环中与结束进度值对应的着色顶点的编号，T为纵向段数，E为结束进度值。

同样，当横向段数为1时，可以根据如下公式计算在外环中与结束进度值对应的着色顶点的编号：

其中，为在外环中与结束进度值对应的着色顶点的编号，/>为在内环中与结束进度值对应的着色顶点的编号，T为纵向段数。

继续利用图4的环形进度条模型来进行举例说明，若获取的初始进度值为20％，结束进度值为40％，且图4的环形进度条模型的纵向段数为5，那么将纵向段数和结束进度值代入上述计算在内环中与结束进度值对应的着色顶点的编号公式中，可以计算得到在内环中与结束进度值对应的着色顶点的编号为2；接着，将纵向段数和在内环中与结束进度值对应的着色顶点的编号代入计算在外环中与结束进度值对应的着色顶点的编号公式中，可以计算得到在外环中与结束进度值对应的着色顶点的编号为8；那么，基于与初始进度值和结束进度值对应的每一环的着色顶点的编号，即可确定环形进度条模型中超过初始进度值且不超过结束进度值的区域的所有着色顶点的编号为1、7、2和8。因此，可以将预设的进度颜色的颜色数值设置到编号为2和8的着色顶点，并利用着色器中的像素着色器，对编号为1、7、2的着色顶点之间的三角区域和编号为7、2、8的着色顶点之间的三角区域进行进度颜色着色，以完成对环形进度条模型中超过初始进度值且不超过结束进度值的区域进行二次着色。

综上，方式二首先利用环形进度条模型的横向段数和纵向段数确定环形进度条模型的所有着色顶点，然后按照环形进度条模型的内环和外环的先后顺序，依次对每个着色顶点进行编号，最后基于每个着色顶点的编号，对环形进度条模型进行初始着色，以及对环形进度条模型中超过初始进度值且不超过结束进度值的区域进行二次着色，以实现环形进度条从初始进度值到结束进度值的显示效果。

另外，现有技术中利用不同颜色圆环的层叠遮盖来实现环形进度条的显示方法，难以实现背景颜色和进度颜色的不同透明度显示，因为背景颜色和进度颜色深度不一致，当层叠的圆环透明度发生变化的时候，会出现背景颜色与进度颜色交叉的问题。相较于现有技术，本方案可以对单个的环形进度条模型进行初始着色和二次着色，来完成环形进度条的显示，因此可以调整环形进度条的显示透明度，且不会影响环形进度条的显示效果。

图5示出根据另一个实施例的环形进度条的显示方法的流程图。参见图5，该方法包括：

步骤500：获取环形进度条模型和显示环形进度条所需的目标数据；其中，目标数据包括初始进度值和结束进度值；

步骤502：确定用于显示环形进度条所需的横向段数和纵向段数；其中，横向段数为连接环形进度条模型的两条边上最近两个点之间的线段数，纵向段数为环形进度条模型被分割后的段数；

步骤504：基于横向段数和纵向段数，确定环形进度条模型的着色顶点；

步骤506：按照环形进度条模型的内环和外环的先后顺序，依次对每个着色顶点进行编号；其中，第一个着色顶点的编号为0；

步骤508：在初始进度值为0时，将预设的背景颜色设置到环形进度条模型中的全部区域中的着色顶点上，以对环形进度条模型进行初始着色；

步骤510：在初始进度值不为0时，将每个着色顶点的编号输入到如下第一判断公式中，若第一判断公式成立，则将预设的进度颜色设置到当前着色顶点，否则将预设的背景颜色设置到当前着色顶点，以将预设的进度颜色着色到环形进度条模型中不超过初始进度值的区域，将预设的背景颜色着色到环形进度条模型中超过初始进度值的区域，从而完成对环形进度条模型的初始着色；

其中，第一判断公式为：

i％(T+1)＜(T+1)*F

式中，i为当前着色顶点的编号，T为纵向段数，F为初始进度值。

步骤512：按照由初始进度值指向结束进度值的方向，将环形进度条模型中超过初始进度值且不超过结束进度值的区域的每个着色顶点的编号按照预设行进速度逐步输入到如下第二判断公式中，在第二判断公式成立，且当前着色顶点设置背景颜色时，则将当前着色顶点的背景颜色替换为进度颜色，以完成二次着色；

其中，第二判断公式为：

i％(T+1)＜(T+1)*E

式中，i为当前着色顶点的编号，T为纵向段数，E为结束进度值。

在本发明实施例中，首先利用环形进度条模型的横向段数和纵向段数确定环形进度条模型的所有着色顶点，然后按照环形进度条模型的内环和外环的先后顺序，依次对每个着色顶点进行编号，最后基于每个着色顶点的编号，对环形进度条模型进行初始着色，以及按照由初始进度值指向结束进度值的方向，利用环形进度条模型中超过初始进度值且不超过结束进度值的区域的每个着色顶点的编号，按照预设行进速度逐步对环形进度条模型进行二次着色，以实现环形进度条从初始进度值逐步变化到结束进度值的动态显示效果。

如图6、图7所示，本发明实施例提供了一种环形进度条的显示装置。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。从硬件层面而言，如图6所示，为本发明实施例提供的一种环形进度条的显示装置所在计算设备的一种硬件架构图，除了图6所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的计算设备通常还可以包括其他硬件，如负责处理报文的转发芯片等等。以软件实现为例，如图7所示，作为一个逻辑意义上的装置，是通过其所在计算设备的CPU将非易失性存储器中对应的计算机程序读取到内存中运行形成的。

如图7所示，本实施例提供的一种环形进度条的显示，包括：

获取单元700，用于获取环形进度条模型和显示环形进度条所需的目标数据；其中，目标数据包括初始进度值和结束进度值；

初始着色单元701，用于基于初始进度值，对环形进度条模型进行初始着色；

二次着色单元702，用于基于初始进度值和结束进度值，利用着色器中的进度颜色对环形进度条模型进行二次着色，以完成环形进度条的显示。

在本发明的一个实施例中，初始着色单元701，用于执行如下操作：

在初始进度值为0时，将预设的背景颜色着色到环形进度条模型中的全部区域；

在初始进度值不为0时，执行：

将预设的进度颜色着色到环形进度条模型中不超过初始进度值的区域；

将预设的背景颜色着色到环形进度条模型中超过初始进度值的区域。

在本发明的一个实施例中，二次着色单元702，用于执行如下操作：

按照由初始进度值指向结束进度值的方向，将环形进度条模型中超过初始进度值且不超过结束进度值的区域的背景颜色按照预设行进速度逐步替换为进度颜色。

在本发明的一个实施例中，初始着色单元701，用于执行如下操作：

确定用于显示环形进度条所需的横向段数和纵向段数；其中，横向段数为连接环形进度条模型的两条边上最近两个点之间的线段数，纵向段数为环形进度条模型被分割后的段数；

基于横向段数和纵向段数，确定环形进度条模型的着色顶点；

基于初始进度值，利用环形进度条模型中的每个着色顶点对环形进度条模型进行初始着色。

在本发明的一个实施例中，初始着色单元701在执行基于初始进度值，利用环形进度条模型中的每个着色顶点对环形进度条模型进行初始着色时，用于执行如下操作：

按照环形进度条模型的内环和外环的先后顺序，依次对每个着色顶点进行编号；其中，第一个着色顶点的编号为0；

基于每个着色顶点的编号，对环形进度条模型进行初始着色。

在本发明的一个实施例中，二次着色单元702在执行基于初始进度值和结束进度值，对环形进度条模型进行二次着色时，用于执行如下操作：

基于每个着色顶点的编号，利用环形进度条模型中超过初始进度值且不超过结束进度值的区域的所有着色顶点对环形进度条模型进行二次着色。

在本发明的一个实施例中，初始着色单元701在执行基于每个着色顶点的编号，对环形进度条模型进行初始着色，用于执行如下操作：

将每个着色顶点的编号输入到如下第一判断公式中，若第一判断公式成立，则将预设的进度颜色设置到当前着色顶点，否则将预设的背景颜色设置到当前着色顶点；

其中，第一判断公式为：

i％(T+1)＜(T+1)*F

式中，i为当前着色顶点的编号，T为纵向段数，F为初始进度值。

在本发明的一个实施例中，二次着色单元702在执行基于每个着色顶点的编号，利用所述环形进度条模型中超过所述初始进度值且不超过所述结束进度值的区域的所有着色顶点对所述环形进度条模型进行二次着色时，用于执行如下操作：

将每个着色顶点的编号输入到如下第二判断公式中，在第二判断公式成立，且当前着色顶点设置背景颜色时，则将当前着色顶点的背景颜色替换为进度颜色，以完成二次着色；

其中，第二判断公式为：

i％(T+1)＜(T+1)*E

式中，i为当前着色顶点的编号，T为纵向段数，E为结束进度值。

可以理解的是，本发明实施例示意的结构并不构成对一种环形进度条的显示装置的具体限定。在本发明的另一些实施例中，一种环形进度条的显示装置可以包括比图示更多或者更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件、软件或者软件和硬件的组合来实现。

上述装置内的各模块之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

本发明实施例还提供了一种计算设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现本发明任一实施例中的一种环形进度条的显示方法。

本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序在被处理器执行时，使所述处理器执行本发明任一实施例中的一种环形进度条的显示方法。

具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。

在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。

用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RAM、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。

此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。

此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展模块中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展模块上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。

综上所述，本发明提供了一种环形进度条的显示方法、装置、电子设备及存储介质，本发明至少具有如下有益效果：

1、在本发明一个实施例中，首先获取环形进度条模型和显示环形进度条所需的目标数据，然后基于目标数据中的初始进度值，对获取到的环形进度条模型进行初始着色，最后基于目标数据中的初始进度值和结束进度值，对初始着色后的环形进度条模型进行二次着色，如此对单个的环形进度条模型进行初始着色和二次着色，以完成环形进度条的显示，从而可以避免增加内存负担。

2、在本发明一个实施例中，可以根据横向段数和纵向段数确定环形进度条模型的着色顶点，然后基于初始进度值，利用着色器中预先设置的进度颜色和背景颜色的颜色数值设置到环形进度条模型中的每个着色顶点，利用着色器的像素着色器根据每个着色顶点设置的颜色数值对环形进度条模型进行初始着色。

3、在本发明一个实施例中，首先基于初始进度值，设置第一判断公式，然后将每个着色顶点的编号输入到第一判断公式中，若第一判断公式成立，则认为当前着色顶点位于不超过初始进度值的区域，故将预设的进度颜色的颜色数值设置到当前着色顶点，否则认为当前着色顶点位于超过初始进度值的区域，将预设的背景颜色的颜色数值设置到当前着色顶点，以此来完成对环形进度条模型的初始着色。

4、在本发明一个实施例中，首先利用环形进度条模型的横向段数和纵向段数确定环形进度条模型的所有着色顶点，然后按照环形进度条模型的内环和外环的先后顺序，依次对每个着色顶点进行编号，最后基于每个着色顶点的编号，对环形进度条模型进行初始着色，以及对环形进度条模型中超过初始进度值且不超过结束进度值的区域进行二次着色，以实现环形进度条从初始进度值到结束进度值的显示效果。

5、在本实施例中，首先利用环形进度条模型的横向段数和纵向段数确定环形进度条模型的所有着色顶点，然后按照环形进度条模型的内环和外环的先后顺序，依次对每个着色顶点进行编号，最后基于每个着色顶点的编号，对环形进度条模型进行初始着色，以及按照由初始进度值指向结束进度值的方向，利用环形进度条模型中超过初始进度值且不超过结束进度值的区域的每个着色顶点的编号，按照预设行进速度逐步对环形进度条模型进行二次着色，以实现环形进度条从初始进度值逐步变化到结束进度值的动态显示效果。

需要说明的是，在本文中，诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个…”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储在计算机可读取的存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质中。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (6)

1.一种环形进度条的显示方法，其特征在于，包括：

获取环形进度条模型和显示环形进度条所需的目标数据；其中，所述目标数据包括初始进度值和结束进度值；

基于所述初始进度值，对所述环形进度条模型进行初始着色；

基于所述初始进度值和所述结束进度值，对所述环形进度条模型进行二次着色，以完成环形进度条的显示；

所述基于所述初始进度值，对所述环形进度条模型进行初始着色，包括：

确定用于显示所述环形进度条所需的横向段数和纵向段数；其中，所述横向段数为连接所述环形进度条模型的两条边上最近两个点之间的线段数，所述纵向段数为所述环形进度条模型被分割后的段数；

基于所述横向段数和所述纵向段数，确定所述环形进度条模型的着色顶点；

基于所述初始进度值，利用所述环形进度条模型中的每个所述着色顶点对所述环形进度条模型进行初始着色；

所述基于所述初始进度值，利用所述环形进度条模型中的每个所述着色顶点对所述环形进度条模型进行初始着色，包括：

按照所述环形进度条模型的内环和外环的先后顺序，依次对每个所述着色顶点进行编号；其中，第一个所述着色顶点的编号为0；

基于每个所述着色顶点的编号，对所述环形进度条模型进行初始着色；

所述基于每个所述着色顶点的编号，对所述环形进度条模型进行初始着色，包括：

将每个所述着色顶点的编号输入到如下第一判断公式中，若所述第一判断公式成立，则将预设的进度颜色设置到当前着色顶点，否则将预设的背景颜色设置到当前着色顶点；

其中，所述第一判断公式为：

i％(T+1)<(T+1)*F

式中，i为当前着色顶点的编号，T为纵向段数，F为所述初始进度值。

2.根据权利要求1所述的方法，其特征在于，所述基于所述初始进度值和所述结束进度值，对所述环形进度条模型进行二次着色，包括：

基于每个所述着色顶点的编号，利用所述环形进度条模型中超过所述初始进度值且不超过所述结束进度值的区域的所有着色顶点对所述环形进度条模型进行二次着色。

3.根据权利要求2所述的方法，其特征在于，

所述基于每个所述着色顶点的编号，利用所述环形进度条模型中超过所述初始进度值且不超过所述结束进度值的区域的所有着色顶点对所述环形进度条模型进行二次着色，包括：

将每个所述着色顶点的编号输入到如下第二判断公式中，在所述第二判断公式成立，且当前着色顶点设置所述背景颜色时，则将当前着色顶点的所述背景颜色替换为所述进度颜色，以完成二次着色；

其中，所述第二判断公式为：

i％(T+1)＜(T+1)*E

式中，E为所述结束进度值。

4.一种环形进度条的显示装置，其特征在于，包括：

获取单元，用于获取环形进度条模型和显示环形进度条所需的目标数据；其中，所述目标数据包括初始进度值和结束进度值；

初始着色单元，用于基于所述初始进度值，对所述环形进度条模型进行初始着色；

二次着色单元，用于基于所述初始进度值和所述结束进度值，利用着色器中的进度颜色对所述环形进度条模型进行二次着色，以完成环形进度条的显示；

初始着色单元，用于执行如下操作：

确定用于显示环形进度条所需的横向段数和纵向段数；其中，横向段数为连接环形进度条模型的两条边上最近两个点之间的线段数，纵向段数为环形进度条模型被分割后的段数；

基于横向段数和纵向段数，确定环形进度条模型的着色顶点；

基于初始进度值，利用环形进度条模型中的每个着色顶点对环形进度条模型进行初始着色；

初始着色单元在执行基于初始进度值，利用环形进度条模型中的每个着色顶点对环形进度条模型进行初始着色时，用于执行如下操作：

按照环形进度条模型的内环和外环的先后顺序，依次对每个着色顶点进行编号；其中，第一个着色顶点的编号为0；

基于每个着色顶点的编号，对环形进度条模型进行初始着色；

初始着色单元在执行基于每个着色顶点的编号，对环形进度条模型进行初始着色，用于执行如下操作：

将每个着色顶点的编号输入到如下第一判断公式中，若第一判断公式成立，则将预设的进度颜色设置到当前着色顶点，否则将预设的背景颜色设置到当前着色顶点；

其中，第一判断公式为：

i％(T+1)＜(T+1)*F

式中，i为当前着色顶点的编号，T为纵向段数，F为初始进度值。

5.一种计算设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现如权利要求1-3中任一项所述的方法。

6.一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行权利要求1-3中任一项所述的方法。