CN104239053B - 进度条显示方法和系统 - Google Patents

Abstract

一种进度条显示方法，其步骤包括：将第一进度条图形以及第二进度条图形加载到系统显存中，其中，所述第一进度条图形以及第二进度条图为形状大小相同的闭合或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同；每隔特定时间段检测软件加载的进度值是否有增加或者缩减，若是，根据检测到的当前进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形；将与当前进度值相匹配的匹配进度条图形覆盖到第一进度条图形上得到最终进度条图形；显示最终进度条图形。根据本发明方案，可以使进度条的呈现效果更加清晰，提高用户体验感，而且还可以充分利用屏幕空间。

Description

进度条显示方法和系统

技术领域

本发明涉及计算机技术领域，特别是涉及一种进度条显示方法和系统。

背景技术

在计算机技术领域中，为了展示在加载某一软件功能时的加载进度值或者展示网页的加载的进度等情形，会采用显示进度条的方式进行展示。

在现有的显示进度条技术中一般都是利用长条矩形控件作为载体对进度值进行显示，即利用绘制矩形图像向某一固定方向增长以展示进度值的增加。然而，这种展示方式比较单一，美观度不高而导致用户体验感较差；另外，由于矩形图像的增长一般会占用屏幕较大的空间，挤占了其他控件的空间，间接影响其他控件的使用，进而导致屏幕空间利用率不高。

发明内容

基于此，有必要针对背景技术现有的显示进度条技术的方式比较单一，美观度不高而导致用户体验感较差，而且屏幕空间利用率不高的问题，提供一种进度条显示方法，使进度条的呈现效果更加清晰，提高用户体验感，而且可以充分利用屏幕空间。

为实现上述目的，本发明实施例采用的技术方案如下：

一种进度条显示方法包括步骤：

将第一进度条图形以及第二进度条图形加载到系统显存中，其中，所述第一进度条图形以及第二进度条图形为形状大小相同的闭合或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同；

每隔特定时间段检测软件加载的进度值是否有增加或者缩减，若是，根据检测到的当前进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形；

将与当前进度值相匹配的匹配进度条图形覆盖到第一进度条图形上得到最终进度条图形；

显示最终进度条图形。

根据上述的一种进度条显示方法，本发明方案还提供一种进度条显示系统，包括加载模块、截取模块、覆盖模块、显示模块；

所述加载模块将第一进度条图形以及第二进度条图形加载到系统显存中，其中，所述第一进度条图形以及第二进度条图形为形状大小相同的闭合或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同；

所述截取模块每隔特定时间段检测软件加载的进度值是否有增加或者缩减，若是，根据检测到的当前进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形；

所述覆盖模块将与当前进度值相匹配的匹配进度条图形覆盖到第一进度条图形上得到最终进度条图形；

所述显示模块显示最终进度条图形。

根据本发明方案，先是第一进度条图形以及第二进度条图形加载到系统显存中，其中，所述第一进度条图形以及第二进度条图形为形状大小相同的闭合或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同；然后根据检测到的进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形，进而将与进度值相匹配的匹配进度条图形覆盖到加载在系统显存中的第一进度条图形得到最终进度条图形，从而将最终进度条图形在界面上显示。由于第一进度条图形以及第二进度条图形为形状大小相同的闭合或半闭合环形状，而且采用先截取第二进度条图形再覆盖到第二进度条图形，可以使进度条的呈现效果更加清晰，提高用户体验感，而且还可以充分利用屏幕空间。

附图说明

图1为本发明进度条显示方法第一实施例流程图；

图2为本发明进度条显示方法第二实施例流程图；

图3为本发明进度条显示方法第二实施例中a1图形以及b1图形的效果图；

图4为本发明进度条显示方法第二实施例中通过截取b1图形得到c1图形的效果图；

图5为本发明进度条显示方法第二实施例中通过合成得到的d1图形的效果图；

图6为本发明进度条显示方法第三实施例流程图；

图7为本发明进度条显示方法第三实施例中a2图形以及b2图形的效果图；

图8为本发明进度条显示方法第三实施例中通过截取b2图形得到c2图形的效果图；

图9为本发明进度条显示方法第三实施例中通过合成得到的d2图形的效果图；

图10为本发明进度条显示方法第四实施例流程图；

图11为本发明进度条显示方法第四实施例中a3图形以及b3图形的效果图；

图12为本发明进度条显示方法第四实施例中通过截取b3图形得到c3图形的效果图；

图13为本发明进度条显示方法第四实施例中通过合成得到的d3图形的效果图；

图14，为本发明进度条显示系统结构图。

具体实施方式

为使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步的详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不限定本发明的保护范围。

请参阅图1，为本发明进度条显示方法第一实施例流程图：

步骤S101：将第一进度条图形以及第二进度条图形加载到系统显存中，其中，所述第一进度条图形以及第二进度条图形为形状大小相同的闭合或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同；

具体地，利用Qt(图形用户界面应用程序框架)将第一进度条图形以及第二进度条图形的QPixmap(一种Qt图形处理类型)数据加载到系统显存中；

所述第一进度条图形以及第二进度条图形内填充视觉状态不同，例如，第一进度条图形可以是呈现白色，与第一进度条图形对应的第二进度条图形可以是呈现黑色；再如，第一进度条图形可以是呈现灰色，与第一进度条图形对应的第二进度条图形可以是呈现红色；

较优地，第一进度条图形可以是呈现灰色，与第一进度条图形对应的第二进度条图形可以是随着检测到的进度值的增加由呈现浅红色变化到呈现深红色，以使进度条的呈现效果更加清晰，提高用户体验感。

在一个实施例中，所述第一进度条图形以及第二进度条图形的形状可以为：圆环形状或椭圆环形状或方形环形状。

步骤S102：每隔特定时间段检测软件加载的进度值是否有增加或者缩减，若是，根据检测到的当前进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形；

所述特定时间段可以是指预先设定的一个时间段，例如，预先设定1秒的时间，每隔1秒检测软件加载的进度值是否有增加或者缩减；

所述检测到的当前进度值可以是指检测加载某一软件功能时的加载进度值，进而根据检测到的进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形；

在一个实施例中，在检测软件加载的进度值没有变化时，不进行截取，等待下一特定时间段到来时，重新检测软件加载的进度值；从而能够避免多次重复截取与当前进度值相匹配的匹配进度条图形，可以提高截取得到与进度值相匹配的匹配进度条图形的效率。

在一个实施例中，所述根据检测到的进度值对第二进度条图形进行截取得到与当前进度值相匹配的匹配进度条图形可以包括步骤：

根据检测到的当前进度值，以第二进度条图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；

截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形。

具体地，所述预先设定的半径的大小是基于第二进度条图形的半径大小进行设定；例如，假设第二进度条图形的半径为10，则设定预先设定的半径大于10以上。

其中，画弧的大小是根据检测到的进度值进行设定，例如，假设进度值100％对应的弧度是360度，若检测到的进度值为50％，则画弧的大小为整个弧度的一半，即180度。

进一步地，使用Qt的几何图形绘制类QPainterPath(一种Qt图形处理类型)的arcTo()方法(一种Qt绘图方法)，根据检测到的进度值，以第二进度条图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；进而，截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形，即是获取匹配进度条图形的QPixmap数据储存在系统显存中。

步骤S103：将与当前进度值相匹配的匹配进度条图形覆盖到第一进度条图形上得到最终进度条图形；

在一个实施例中，所述将与进度值相匹配的匹配进度条图形覆盖到第一进度条图形上得到最终进度条图形包括步骤：

确定第一进度条图形的起始点；

从第一进度条图形的起始点上开始覆盖与当前进度值相匹配的匹配进度条图形。

具体地，可以将第一进度条图形的端点确定为起始点，然后从第一进度条图形的端点上开始覆盖与当前进度值相匹配的匹配进度条图形得到一个最终进度条图形。

步骤S104：显示最终进度条图形；

所述显示最终进度条图形是指将最终进度条图形渲染到计算机显示屏幕上。

可以看到，本发明的进度条显示方法，采用的第一进度条图形以及第二进度条图形为形状大小相同的闭合或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同，而且采用先截取第二进度条图形再覆盖到第二进度条图形，可以使进度条的呈现效果更加清晰，提高用户体验感，而且还可以充分利用屏幕空间。

较优地，在一个实施例中，在截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形时，可以采用反锯齿方式进行截取；

具体地，利用Qt的高效反锯齿图像方式，即使用方法setRenderHint()(一种Qt绘图方法)设置QPainter对象(一种Qt绘图对象)的QPainter::Antialiasing属性(一种Qt绘图属性)，由此QPainter对象负责将QPixmap数据绘制到计算机显示屏幕的界面上。在截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形时，采用反锯齿方式进行截取，可以确保截取完成的匹配进度条图形边缘线条光滑无锯齿，进一步使进度条的呈现效果更加清晰。

为了进一步详细说明本发明的进度条显示方法是如何实现的，下面结合一个具体实施例进行说明；在此指出，下述实施例以第一进度条图形以及第二进度条图形的形状为圆环形状为例进行说明，请参阅图2，为本发明进度条显示方法第二实施例流程图：

步骤201：将a1图形以及b1图形加载到系统显存中；

具体地，请参阅图3，为本发明进度条显示方法第二实施例中a1图形(第一进度条图形)以及b1图形(第二进度条图形)的效果图。

步骤202：检测进度值，根据检测到的进度值对b1图形进行截取得到与进度值相匹配的c1图形；

具体地，请参阅图4，为本发明进度条显示方法第二实施例中通过截取b图形得到c1图形的效果图：

根据检测到的进度值，以b1图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；

截取落在所述扇形区域内的b1图形得到与进度值相匹配的c1图形。

步骤203：将与进度值相匹配的c1图形与a1图形进行合成得到d1图形；

具体地，请参阅图5，为本发明进度条显示方法第二实施例中通过合成得到的d1图形的效果图：将a1图形的端点确定为起始点，然后从a1图形的端点上开始覆盖与当前进度值相匹配的c1图形得到d1图形。

步骤204：将d1图形渲染到计算机显示屏幕上。

在此，应当指出，在检测到进度值有增加或缩减时，可重复上述步骤，经过截取、合成得到新的d1图形，进而将新的d1图形渲染到计算机显示屏幕上，在此不再重复详加赘述。

下面再结合一个具体实施例进行说明；在此指出，下述实施例以第一进度条图形以及第二进度条图形的形状为椭圆环形状为例进行说明，请参阅图6，为本发明进度条显示方法第三实施例流程图：

步骤301：将a2图形以及b2图形加载到系统显存中；

具体地，请参阅图7，为本发明进度条显示方法第三实施例中a2图形(第一进度条图形)以及b2图形(第二进度条图形)的效果图。

步骤302：检测进度值，根据检测到的进度值对b2图形进行截取得到与进度值相匹配的c2图形；

具体地，请参阅图8，为本发明进度条显示方法第三实施例中通过截取b2图形得到c2图形的效果图：

根据检测到的进度值，以b2图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；

截取落在所述扇形区域内的b2图形得到与进度值相匹配的c2图形。

步骤303：将与进度值相匹配的c2图形与a2图形进行合成得到d2图形；

具体地，请参阅图8，为本发明进度条显示方法第三实施例中通过合成得到的d2图形的效果图：将a2图形的右边顶点确定为起始点，然后从a2图形的右边顶点上开始覆盖与当前进度值相匹配的c2图形得到d2图形。

步骤304：将d2图形渲染到计算机显示屏幕上。

下面更结合一个具体实施例进行说明；在此指出，下述实施例以第一进度条图形以及第二进度条图形的形状方形环形状为例进行说明，请参阅图9，为本发明进度条显示方法第四实施例流程图：

步骤401：将a3图形以及b3图形加载到系统显存中；

具体地，请参阅图10，为本发明进度条显示方法第四实施例中a3图形(第一进度条图形)以及b3图形(第二进度条图形)的效果图。

步骤402：检测进度值，根据检测到的进度值对b3图形进行截取得到与进度值相匹配的c3图形；

具体地，请参阅图11，为本发明进度条显示方法第四实施例中通过截取b3图形得到c3图形的效果图：

根据检测到的进度值，以b3图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；

截取落在所述扇形区域内的b3图形得到与进度值相匹配的c3图形。

步骤403：将与进度值相匹配的c3图形与a3图形进行合成得到d3图形；

具体地，请参阅图12，为本发明进度条显示方法第四实施例中通过合成得到的d3图形的效果图：将a3图形的右边中心点确定为起始点，然后从a3图形的右边中心点上开始覆盖与当前进度值相匹配的c3图形得到d3图形。

步骤404：将d3图形渲染到计算机显示屏幕上。

根据上述的一种进度条显示方法，本发明方案还提供一种进度条显示系统，请参阅图13，为本发明进度条显示系统结构图：

一种进度条显示系统，包括加载模块10、截取模块20、覆盖模块30、显示模块40；

所述加载模块10将第一进度条图形以及第二进度条图形加载到系统显存中，其中，所述第一进度条图形以及第二进度条图形为形状大小相同的闭合或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同；

所述截取模块20每隔特定时间段检测软件加载的进度值是否有增加或者缩减，若是，根据检测到的当前进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形；

所述覆盖模块20将与当前进度值相匹配的匹配进度条图形覆盖到第一进度条图形上得到最终进度条图形；

所述显示模块40显示最终进度条图形。

其中，具体地，所述加载模块10利用Qt(图形用户界面应用程序框架)将第一进度条图形以及第二进度条图形的QPixmap(一种Qt图形处理类型)数据加载到系统显存中；

所述第一进度条图形以及第二进度条图形内填充视觉状态不同，例如，第一进度条图形可以是呈现白色，与第一进度条图形对应的第二进度条图形可以是呈现黑色；再如，第一进度条图形可以是呈现灰色，与第一进度条图形对应的第二进度条图形可以是呈现红色；

较优地，第一进度条图形可以是呈现灰色，与第一进度条图形对应的第二进度条图形可以是随着检测到的进度值的增加由呈现浅红色变化到呈现深红色，以使进度条的呈现效果更加清晰，提高用户体验感。

在一个实施例中，所述第一进度条图形以及第二进度条图形的形状可以为：圆环形状或椭圆环形状或方形环形状。

在一个实施例中，所述截取模块20包括画弧单元、截取单元；

所述画弧单元根据检测到的当前进度值，以第二进度条图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；

所述截取单元截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形。

具体地，所述特定时间段可以是指预先设定的一个时间段，例如，预先设定1秒的时间，每隔1秒检测软件加载的进度值是否有增加或者缩减；

所述检测到的当前进度值可以是指检测加载某一软件功能时的加载进度值，进而根据检测到的进度值截取第二进度条图形得到与当前进度值相匹配的匹配进度条图形；

在一个实施例中，所述截取模块20在检测软件加载的进度值没有变化时，不进行截取，等待下一特定时间段到来时，重新检测软件加载的进度值；从而能够避免多次重复截取与当前进度值相匹配的匹配进度条图形，可以提高截取得到与进度值相匹配的匹配进度条图形的效率。

所述预先设定的半径的大小是基于第二进度条图形的半径大小进行设定；例如，假设第二进度条图形的半径为10，则设定预先设定的半径大于10以上。

所述画弧的大小是根据检测到的进度值进行设定，例如，假设进度值100％对应的弧度是360度，若检测到的进度值为50％，则画弧的大小为整个弧度的一半，即180度。

进一步地，所述截取模块20使用Qt的几何图形绘制类QPainterPath(一种Qt图形处理类型)的arcTo()方法(一种Qt绘图方法)，根据检测到的进度值，以第二进度条图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；进而，截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形，即获取匹配进度条图形的QPixmap数据储存在系统显存中。

在一个实施例中，所述覆盖模块20包括确定单元、覆盖单元；

所述确定单元确定第一进度条图形的起始点；

所述覆盖单元从第一进度条图形的起始点上开始覆盖与当前进度值相匹配的匹配进度条图形。

具体地，所述确定单元可以将第一进度条图形的端点确定为起始点，然后所述覆盖单元从第一进度条图形的端点上开始覆盖与当前进度值相匹配的匹配进度条图形得到一个最终进度条图形。

可以看到，本发明的进度条显示系统，采用的第一进度条图形以及第二进度条为形状大小相同的闭合或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同，而且采用先截取第二进度条图形再覆盖到第二进度条图形，可以使进度条的呈现效果更加清晰，提高用户体验感，而且还可以充分利用屏幕空间。

较优地，在一个实施例中，所述截取单元在截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形时，采用反锯齿方式进行截取。

具体地，利用Qt的高效反锯齿图像方式，即使用方法setRenderHint()(一种Qt绘图方法)设置QPainter对象(一种Qt绘图对象)的QPainter::Antialiasing属性(一种Qt绘图属性)，由此QPainter对象负责将QPixmap数据绘制到计算机显示屏幕的界面上。所述截取单元在截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形时，采用反锯齿方式进行截取，可以确保截取完成的匹配进度条图形边缘线条光滑无锯齿，进一步使进度条的呈现效果更加清晰。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

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

将第一进度条图形以及第二进度条图形加载到系统显存中，其中，所述第一进度条图形以及第二进度条图形为形状大小相同的闭合环形状或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同；

每隔特定时间段检测软件加载的进度值是否有增加或者缩减，若是，根据检测到的当前进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形；其中，所述第二进度条图形内填充视觉状态随检测到的进度值的增加而变化；

将与当前进度值相匹配的匹配进度条图形覆盖到第一进度条图形上得到最终进度条图形；

显示最终进度条图形。

2.根据权利要求1所述的进度条显示方法，其特征在于，所述第一进度条图形以及第二进度条图形的形状均为：圆环形状或椭圆环形状或方形环形状。

3.根据权利要求2所述的进度条显示方法，其特征在于，所述根据检测到的进度值对第二进度条图形继续截取得到与进度值相匹配的匹配进度条图形包括步骤：

根据检测到的当前进度值，以第二进度条图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；

截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形。

4.根据权利要求3所述的进度条显示方法，其特征在于，在截取落在所述扇形区域内的第二进度条图形时，采用反锯齿方式进行截取。

5.根据权利要求1所述的进度条显示方法，其特征在于，所述将与进度值相匹配的匹配进度条图形覆盖到第一进度条图形上包括步骤：

确定第一进度条图形的起始点；

从第一进度条图形的起始点上开始覆盖与当前进度值相匹配的匹配进度条图形。

6.一种进度条显示系统，其特征在于，包括加载模块、截取模块、覆盖模块、显示模块；

所述加载模块将第一进度条图形以及第二进度条图形加载到系统显存中，其中，所述第一进度条图形以及第二进度条图形为形状大小相同的闭合环形状或半闭合环形状，且第一进度条图形以及第二进度条图形内填充视觉状态不同；

所述截取模块每隔特定时间段检测软件加载的进度值是否有增加或者缩减，若是，根据检测到的当前进度值对第二进度条图形进行截取得到与进度值相匹配的匹配进度条图形；其中，所述第二进度条图形内填充视觉状态随检测到的进度值的增加而变化；

所述覆盖模块将与当前进度值相匹配的匹配进度条图形覆盖到第一进度条图形上得到最终进度条图形；

所述显示模块显示最终进度条图形。

7.根据权利要求6所述的进度条显示系统，其特征在于，所述第一进度条图形以及第二进度条图形的形状均为：圆环形状或椭圆环形状或方形环形状。

8.根据权利要求7所述的进度条显示系统，其特征在于，所述截取模块包括画弧单元、截取单元；

所述画弧单元根据检测到的当前进度值，以第二进度条图形的中心为原点，并以预先设定的半径画弧，得到一块扇形区域；

所述截取单元截取落在所述扇形区域内的第二进度条图形得到与进度值相匹配的匹配进度条图形。

9.根据权利要求8所述的进度条显示系统，其特征在于，所述截取单元在截取落在所述扇形区域内的第二进度条图形时，采用反锯齿方式进行截取。

10.根据权利要求6所述的进度条显示系统，其特征在于，所述覆盖模块包括确定单元、覆盖单元；

所述确定单元确定第一进度条图形的起始点；

所述覆盖单元从第一进度条图形的起始点上开始覆盖与当前进度值相匹配的匹配进度条图形。