一种进度条图像生成方法、装置和存储介质与流程

本发明涉及图像处理技术领域，具体涉及一种进度条图像生成方法、装置和存储介质。

背景技术：

进度条可以在计算机处理任务时，实时的以图片形式显示处理任务的速度，完成度，剩余未完成任务量的大小，和可能需要处理时间等，一般以长条状显示，参考图1a为目前常用的进度条。

进度条可以根据任务类型划分成多种类型，如下载任务进度条、等级进度条等等。其中，下载任务进度条用于显示下载任务的完成度和未完成度等；等级进度条用于显示等级进度、以及达到目标等级的未完成的任务量等。

目前进度条的生成方式是基于图片合成的方式，具体地，当需要显示进度条时，获取进度条背景图片比如图1a、图1b中的背景图片100，根据当前任务进度从预置内容图片中选取相应的进度条内容图片比如图1a、图1b中内容图片1000，将进度图背景图片与进度条内容进行合成，然后根据渲染样本图片对合成后的图片进行渲染，以得到所需的进度条。其中，图1a和图1b指示的进度不一样。

然而，目前进度条的生成方式需要使用到多张图片，进行合成渲染得到进度条，进度条的生成效率较低，并且这些图片需要从网络侧设备获取，消耗大量的流量。

技术实现要素：

本发明实施例提供一种进度条图像生成方法、装置和存储介质，可以提升进度条的生成效率以及节省流量。

本发明实施例提供一种进度条图像生成方法，包括：

获取任务进度条图像的配置信息，所述配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；

根据所述图像参数信息在画布中绘制相应的进度条背景图像，所述进度条背景图像包括进度参照图像；

获取所述当前任务进度在所述进度参照图像中对应的目标进度位置信息；

根据所述目标进度位置信息在所述进度参照图像中插入相应的进度标识图像，得到所述用户标识对应的任务进度条图像。

相应的，本发明实施例还提供了一种进度条图像生成装置，包括：

配置获取单元，用于获取任务进度条图像的配置信息，所述配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；

绘制单元，用于根据所述图像参数信息在画布中绘制相应的进度条背景图像，所述进度条背景图像包括进度参照图像；

位置获取单元，用于获取所述当前任务进度在所述进度参照图像中对应的目标进度位置信息；

插入单元，用于根据所述目标进度位置信息在所述进度参照图像中插入相应的进度标识图像，得到所述用户标识对应的任务进度条图像。

相应的，本发明实施例还提供一种存储介质，所述存储介质存储有指令，所述指令被处理器执行时实现本发明实施例任一提供的进度条图像生成方法。

本发明实施例采用获取任务进度条图像的配置信息，配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括进度参照图像；获取当前任务进度在进度参照图像中对应的目标进度位置信息；根据目标进度位置信息在进度参照图像中插入相应的进度标识图像，得到用户标识对应的任务进度条图像。该方案可以基于进度条图像的配置信息绘制相应的进度条图像，避免采用多张图片合成进度条图像，也无需从网络侧设备获取图片，因此，可以提升进度条图像的生成效率以及节省流量。

附图说明

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

图1a是现有进度条的示意图；

图1b是现有进度条的另一示意图；

图2a是本发明实施例提供的图像生成系统的场景示意图；

图2b是本发明实施例提供的进度条图像生成方法的第一种流程示意图；

图2c是本发明实施例提供的参数与外观的对应关系示意图；

图2d是本发明实施例提供的进度条背景图像的第一种示意图；

图2e是本发明实施例提供的进度条背景图像的第二种示意图；

图2f是本发明实施例提供的进度条背景图像的第三种示意图；

图2g是本发明实施例提供的进度条图像的第一种示意图；

图2h是本发明实施例提供的当前进度的位置计算示意图；

图2i是本发明实施例提供的进度条图像的第二种示意图；

图2j是本发明实施例提供的进度条图像的一种动画示意图；

图3a是本发明实施例提供的关进度条图像生成方法的第二种流程示意图；

图3b是本发明实施例提供的进度条背景图像的第四种示意图；

图3c是本发明实施例提供的进度条背景图像的第五种示意图；

图3d是本发明实施例提供的另一种当前进度的位置计算示意图；

图3e是本发明实施例提供的进度条图像的第三种示意图；

图3f是本发明实施例提供的进度条图像的第四种示意图；

图4a是本发明实施例提供的关进度条图像生成方法的第三种流程示意图；

图4b是本发明实施例提供的又一种当前进度的位置计算示意图；

图4c是本发明实施例提供的进度条图像的第五种示意图；

图4d是本发明实施例提供的进度条图像的另一种动画示意图；

图5a是本发明实施例提供的进度条图像生成装置的第一种结构示意图；

图5b是本发明实施例提供的进度条图像生成装置的第二种结构示意图；

图5c是本发明实施例提供的进度条图像生成装置的第三种结构示意图；

图5d是本发明实施例提供的进度条图像生成装置的第三种结构示意图；

图6是本发明实施例提供的服务器的结构示意图。

具体实施方式

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

本发明实施例提供一种图像生成系统，该系统包括本发明实施例任一提供的进度条图像生成装置，该进度条图像生成装置可以集成在终端等设备中，该终端可以为手机、平板电脑等。此外，该系统还可以包括其他设备，如服务器等

参考图2a，本发明实施例提供了一种图像生成系统，包括：终端10和服务器20，终端10与服务器20通过网络30连接。其中，网络30中包括路由器、网关等等网络实体，图中并未示意出。终端10可以通过有线网络或无线网络与服务器20进行信息交互，比如可以从服务器20下载应用(如游戏应用)和/或应用更新数据包和/或与应用相关的数据信息或业务信息。其中，终端10可以为手机、平板电脑、笔记本电脑等设备，图2a是以终端10为手机为例。该终端10中可以安装有各种用户所需的应用，比如具备娱乐功能的应用(如视频应用，音频播放应用，阅读软件)，又如具备服务功能的应用(如地图导航应用、团购应用等)。

基于上述图2a所示的系统，以游戏应用为例，终端10可以通过网络30从服务器20中按照需求下载游戏应用和/或游戏应用更新数据包和/或与游戏应用相关的数据信息或业务信息(如游戏画面数据)。采用本发明实施例，终端10可以获取任务进度条图像的配置信息，配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括进度参照图像；获取当前任务进度在进度参照图像中对应的目标进度位置信息；根据目标进度位置信息在进度参照图像中插入相应的进度标识图像，得到用户标识对应的任务进度条图像；终端10可以显示用户标识对应的任务进度条图像。

上述图2a的例子只是实现本发明实施例的一个系统架构实例，本发明实施例并不限于上述图2a所示的系统结构，基于该系统架构，提出本发明各个实施例。

在一实施例中，提供了一种进度条图像生成方法，可以由终端的处理器执行，如图2b所示，该进度条图像生成方法包括：

101、获取任务进度条图像的配置信息，配置信息包括用户标识对应的任务进度、以及进度条背景图像的图像参数信息。

其中，任务进度条图像用于以图像形式显示任务的状态进展情况，如当前任务完成度、未完成任务量的大小等。该任务可以包括用户标识对应的等级任务、下载任务、上传任务等等。

比如，当任务为等级任务时，此时，任务进度条图像可以为等级进度条图像，用于显示用户标识的等级进展情况，如用户标识的当前等级、距离目标等级所需的进度情况等等。

其中，等级进度条图像可以应用在各种场景中，如游戏场景、社交场景、购物场景等等。譬如，应用在游戏场景中，该等级进度条图像可以用于显示游戏中用户标识(如游戏账号)的游戏等级进展情况，如用户标识(如游戏账号)的当前游戏等级、距离目标游戏等级所需的进度情况等等。

又例如，等级进度条图像应用在社交场景中，该等级进度条可以用于显示社交中用户标识(社交账号)的等级(如会员等级、活跃等级、登录时间等级等等)进展情况，如用户标识(社交账号)的当前社交等级、距离目标游戏等级所需的进度情况等等。

又比如，等级进度条图像应用在网络购物场景中，该等级进度条可以用于显示网络购物平台中用户标识(购物账号)的等级(如会员等级)进展情况，如用户标识(购物账号)的当前社交等级、距离目标游戏等级所需的进度情况等等。

其中，任务进度条图像的配置信息用于指示任务进度条图像的绘制；该配置信息可以包括：用户标识对应的当前任务进度、进度条背景图像的图像参数信息、目标任务进度等等。

其中，进度条背景图像为任务进度条图像的背景或者基础图像，其可以作为任务进度的参照图像。任务进度条图像一般包括进度条背景图像以及进度标识图像。进度条背景图像以及进度标识图像组合在一起来表示任务进度。

该进度条背景图像的图像参数可以为进度条背景图像的图像外观参数；可以包括：与图像形状相关的形状样式信息、与图像大小相关的图像尺寸信息(如宽高)、与图像线条相关的线条样式信息(如图像线宽信息)等等此外，该图像参数还可以包括颜色配置信息等等。

比如，当进度条背景图像呈圆弧形时，与图像形状相关的形状样式信息可以包括：圆弧半径、圆弧角度信息(如圆弧展开角度)等。

以进度条背景图像为半圆环形条状图像为例，该图像参数可以包括：画布宽高(对应进度条背景图像的整体大小)、圆环半径(对应圆环大小)、圆环线宽(对应圆环的粗细)、展开角度(对应圆环的角度、圆环展开的程度)、内外环之间的距离(对应内外圆环之间的间隙)等等。参考图2c，图中展示了各图像参数与进度条背景图像外观之间的关系。

102、根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括进度参照图像。

其中，进度条背景图像为任务进度条图像的背景或者基础图像，任务进度条图像一般包括进度条背景图像以及进度标识图像。进度条背景图像可以包括进度参照图像，该进度参照图像为任务进度的参考或参照图像，进度参照图像表示了所有可能的任务进度，即从初始进度到目标进度之间的所有任务进度。在进度参照图像中加入进度标识图像便可以表示出当前任务进度。

此外，进度条背景图像还可以包括一些其他图像，比如、用户头像等。

比如，可以根据图像参数信息以及采用canvas在画布绘制相应的进度条背景图像。

html5canvas用于在网页上绘制图像，html5的canvas元素使用javascript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

其中，进度条背景图像可以包括进度参照图像；该进度参照图像的形状可以多种，比如可以为条状图像。条状图像为形状呈条状的图像，如长方形条状图像、圆形条状图像、圆环形条状图像、半圆环形条状图像等等。其中，条状图的形状可以根据实际需求配置，此时，进度条背景图像的图像参数信息可以包括条状图像的形状参数信息。

本发明实施例中，半圆环条状图像的展开角度可以有多种，不仅限于180°，还可以为0-360°中的任一角度，如45度、50度、60度等等。也就时说，该半圆环不仅限于圆环的一半这种特殊情况，还可以为圆环的四分之一、五分之一等等。

比如，参考图2d，利用canvas画布技术，根据图像参数信息在矩形画布上绘制相应的进度条背景图像，该进度条背景图像包括半圆环条状图像。

在一实施例中，为了能够精确地显示任务进度情况，进度条背景图像还可以包括初始任务进度信息(如初始任务量)、当前任务进度信息(当前已完成的任务量)以及目标任务进度信息(目标任务量)。

比如，以游戏等级任务为例，初始任务进度信息可以包括初始优游戏等级信息(如白银iv)、当前任务进度信息可以包括当前游戏等级信息(如白银ii)、以及目标任务进度信息可以包括目标游戏等级信息(如黄金iv)。在一实施例中，为了能够更精确地显示任务进度情况，进度条背景图像还可以包括：初始任务进度的标识图像、目标任务进度的标识图像；此时，初始任务进度的标识图像、进度参照图像、目标任务进度的标识图像依次连接。

其中，标识图像可以根据实际需求配置，比如，可以为点、虚拟人物头像图像、虚拟物品图像等等。此时，任务进度条图像的配置信息还可以包括：初始任务进度的标识图像的图像参数信息、目标任务进度的标识图像的图像参数信息。

例如，以任务为社交平台中会员等级任务为例，参考图2e，图中等级进度条背景图像2包括依次连接的初始任务进度的标识图像21、半圆环进度参照图像22、以及目标任务进度的标识图像23。该标识图像21为圆圈、该标识图像23为五角星图像。

此外，该等级进度条背景图像20还可以包括：初始任务进度对应的会员等级信息(如图2e中“白银会员”)、目标任务进度对应的目标会员等级信息(如图2e中“砖石会员”)。

103、获取当前任务进度在进度参照图像中对应的目标进度位置信息。

比如，在获取如图2d所示的进度条背景图像后，参考图2f，可以建立二维坐标系可以获取当前任务进度在条状图像中对应的进度位置信息(包括横坐标和纵坐标)，如图2f所示，进度位置信息的横纵坐标为(a，b)。

104、根据目标进度位置信息在进度参照图像中插入相应的进度标识图像，得到用户标识对应的进度条图像。

其中，进度标识图像可以根据实际需求设置，比如，可以为用户头像、虚拟物品图像、或者其他图像。

参考图2g，在确定进度位置信息的横纵坐标为(a，b)时，可以在该坐标对应的位置上插入圆形的进程标识图像。

其中，图2g中，还可以包括一些文字信息，比如，初始任务进度对应的会员等级信息(如图2e中“白银会员”)、目标任务进度对应的目标会员等级信息(如图2e中“砖石会员”)、以及当前任务进度对应的会员等级信息(如图2e中“黄金会员”)。此外，还可以包括：距离目标会员等级的进度信息，以及达到目标会员等级所产生的交互结果信息(如，“五折购买xxx物品”等)。

可选地，为增加进度条的可扩展性以及直观准确地反映任务进度情况，可以对进度进行细分，比如，可以将进度细分成若干小进度，反映在进度条图像中，就是需要对进度参照图像进行分段，每个小段表示一个小进度。

在一实施例中，可以根据目标任务进度来进行分段，然后，再获取目标进度位置信息。也即配置信息还包括目标任务进度；此时，步骤“获取当前任务进度在进度参照图像中对应的目标进度位置信息”可以包括：

根据目标任务进度将进度参照图像划分成多段子进度参照图像；

获取当前任务进度与目标任务进度之间的进度比值，

根据进度比值和图像参数信息，获取当前任务进度在进度参照图像对应的目标进度位置信息。

其中，任务进度可以由数值来表示，比如，目标任务进度可以为n，当前任务进度为m，该n和m为正整数，且n≤m。可选地，划分后的子进度参照图像数量与目标任务进度数值相等。比如，将进度参照图像划分成n段子进度参照图像。

分段之后，可以当前任务进度m与目标任务进度n之间的进度比值m/n，根据m/n和进度条背景图像的图像参数信息(如图像尺寸信息、角度信息等)，计算出当前任务进度m在进度参照图像中的位置信息(如横纵坐标值)。

比如，进度参照图像为半圆环形进度参照图像时，此时，进度条背景图像的图像参数信息可以包括：半圆环形进度参照图像的圆环半径、圆环角度等等；此时，可以根据目标任务进度将半圆环进度参照图像划分成多段子进度参照图像，然后，获取当前任务进度与目标任务进度之间的进度比值，根据进度比值以及圆环角度，获取在进度参照图像中任务进度对应的目标进度弧度；根据目标进度弧度和圆环半径，获取当前任务进度对应的目标位置信息。

比如，可以根据目标任务进度n将半圆环条状图像等份成n段，然后，基于进度比值m/n和半圆环角度θ获取当前任务进度m对应的进度弧度d。如弧度d＝(当前任务进度m/目标任务进度)*180*π/180。接着，通过进度弧度d和圆环半径r来计算出当前任务进度m在进度条背景图像的横纵坐标值。如可以通过以下公式得到横坐标x和纵坐标y：

横坐标x＝半径r*cos(弧度d*π/180)+半径r

纵坐标y＝半径r*sin(弧度d*π/180)+半径r。

例如，以m＝2、n＝5为例，参考图2h，在获取图2d所示的进度条背景图像后，可以将半圆环条状图像划分成5等份，然后，通过公式：弧度d＝(当前任务进度m/目标任务进度)*180*π/180，计算出当前任务进度2对应的弧度d，通过上述坐标值公式可以获取进度2对应的横纵坐标值(a1，b1)，如图2h所示，该横纵坐标值(a1，b1)对应的位置即为第二分段的末端位置。

参考图2i，可在横纵坐标值(a1，b1)对应的位置插入进度标识图像，如用户头像等。

可选地，为了能够直观精确地表达出任务进度情况，还可以针对不同的分段填充不同的颜色，比如，进度条图像的配置信息还可以包括：子进度参照图像对应的颜色配置信息；在将进度参照图像划分成多段子进度参照图像之后，还可以包括：据子进度参照图像对应的颜色配置信息，对子进度参照图像进行颜色填充。

例如，可以图2h中不同的分段填充不同的颜色，通过颜色来识别任务进度如游戏等级，减少学习成本。

可选地，为了节省资源，本发明实施例可以在当前任务进度与初始任务进度不相等时，进行进度划分，在当前任务进度与初始任务进度相等时，可以直接在进度参照图像的起始位置插入相应的进度标识图像即可，无需进行进度划分和位置计算，节省了终端资源。此时，进度条背景图像的配置信息还包括初始任务进度。

其中，初始任务进度可以根据实际需求设定，比如，当采用数值表示任务进度时，可以设置初始任务进度值为0、1、2等。

以任务为游戏等级任务为例，初始任务进度可以设置为最低游戏等级、或者、其他游戏等级。

可选地，为了提升用户体验，还可以设置进度动画，该进度动画可以为缓动动画，缓动动画具有进度标识图像移动到的目标进度位置的动画效果。其中，进度动画可以根据实际需求配置，比如，进度条图像的配置信息还可以包括进度动画的模型信息、以及进度动画的持续时间。

本发明实施例中，可以基于进度动画的模型信息计算出每个动画显示时间点对应的位置，然后，在该位置插入相应的进度标识图像，这样便会得到一系列的进度条图像，根据动画显示时间点显示相应的进度条图像，便会产生进行标识图像向目标进度位置移动的动画效果。

也即步骤“根据目标进度位置信息在进度参照图像中插入相应的进度标识图像”，可以包括：

获取初始任务进度在进度参照图像中的初始进度位置信息；

根据动画模型信息、持续时间、初始进行位置信息以及目标进度位置信息，获取动画显示时间点对应的图像插入位置信息；

根据图像插入位置信息在进度参照图像中插入相应的进度标识图像。

其中，动画模型信息可以包括动画函数；该动画函数用于计算每个动画显示时间点对应的图像插入位置信息。比如，该动画函数公式可以包括如下公式：

时间点t对应的图像插入位置值l＝(目标进度位置值m-初始进度位置值c)*当前时间t/持续时间t+初始进度位置值c。其中，目标位置值m可以包括当前任务进度对应的位置值如包括横坐标值、和/或纵坐标值；初始进度位置值可以包括初始任务进度对应的位置值如包括横坐标值、和/或纵坐标值。一般初始进度位置值为0。

比如，可以获取当前的动画显示时间点t，判断t是否小于持续时间t，若小于，则根据上述动画函数计算动画显示时间点t对应的图像插入位置值，根据图像插入位置值在进度参照图像中插入相应的进度标识图像；若不小于，如等于持续时间t时，停止计算。在得到每个动画显示时间点对应的进度标识图像，然后，根据动画显示时间点显示进度标识图像，便会实现进度标识图像向目标位置移动的动画效果，参考图2j。

本发明实施例的方法可以由处理器加载存储器中进度图像生成代码实现，该进度图像生成代码可以使用json对象进行了统一存放，提升了该方案的适用范围。

本发明实施例采用获取任务进度条图像的配置信息，配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括进度参照图像；获取当前任务进度在进度参照图像中对应的目标进度位置信息；根据目标进度位置信息在进度参照图像中插入相应的进度标识图像，得到用户标识对应的任务进度条图像；该方案可以基于进度条图像的配置信息绘制相应的进度条图像，避免采用多张图片合成进度条图像，也无需从网络侧设备获取图片，因此，可以提升进度条图像的生成效率以及节省流量。

并且，该方案还可以对进度进一步细分，如将进度条图像进行分段，可以使得进度条图像直观地、准确性显示任务进度状态，方案的可扩展性较强，提升了用户体验，

此外，采用该方案，当用户需要修改进度条图像时，用户可以根据实际需求修改配置参数(如角度、尺寸等)改变进度条图像的外观，来生成所需的进度条图像，可以快速对进度条图像进行修改，减低修改成本，提升了方案的可复用性和可扩展性较强。

在一实施例，本发明实施例还提供了另一种进度条图像生成方法，如图3a所示，该进度条图像生成方法的具体流程如下：

201、终端获取任务进度条图像的配置信息，配置信息包括用户标识对应的当前任务进度、初始任务进度、目标任务进度、进度条背景图像的图像参数信息。

其中，任务进度条图像用于以图像形式显示任务的状态进展情况，如当前任务完成度、未完成任务量的大小等。该任务可以包括用户标识对应的等级任务、下载任务、上传任务等等。

比如，当任务为等级任务时，此时，任务进度条图像可以为等级进度条图像，用于显示用户标识的等级进展情况，如用户标识的当前等级、距离目标等级所需的进度情况等等。

其中，任务进度条图像的配置信息用于指示任务进度条图像的绘制。配置信息包括用户标识对应的当前任务进度、初始任务进度、目标任务进度、进度条背景图像的图像参数信息等等。

其中，任务进度可以由数值表示，比如，当前任务进度值为m，初始任务进度值为0目标任务进度值为n。

该进度条背景图像的图像参数可以为进度条背景图像的图像外观参数；可以包括：与图像形状相关的形状样式信息、与图像大小相关的图像尺寸信息(如宽高)、与图像线条相关的线条样式信息(如图像线宽信息)等等此外，该图像参数还可以包括颜色配置信息等等。比如，当进度条背景图像呈圆弧形时，与图像形状相关的形状样式信息可以包括：圆弧半径、圆弧角度信息(如圆弧展开角度)等。

以进度条背景图像为半圆环形条状图像为例，该图像参数可以包括：画布宽高(对应进度条背景图像的整体大小)、圆环半径(对应圆环大小)、圆环线宽(对应圆环的粗细)、展开角度(对应圆环的角度、圆环展开的程度)、内外环之间的距离(对应内外圆环之间的间隙)等等。参考图2c，图中展示了各图像参数与进度条背景图像外观之间的关系。

202、终端判断当前任务进度是否与初始任务进度相同，若否，则执行步骤203，若是，则步骤207。

比如，当初始任务进度值为0时，可以判断当前任务进度值是否为零。

203、终端根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括依次连接初始进度标识图像、进度参照图像、目标进度标识图像。

其中，进度条背景图像为任务进度条图像的背景或者基础图像，任务进度条图像一般包括进度条背景图像以及进度标识图像。进度条背景图像可以包括进度参照图像，该进度参照图像为任务进度的参考或参照图像，进度参照图像表示了所有可能的任务进度，即从初始进度到目标进度之间的所有任务进度。在进度参照图像中加入进度标识图像便可以表示出当前任务进度。

比如，可以根据图像参数信息以及采用canvas在画布绘制相应的进度条背景图像。

其中，进度参照图像的形状可以有多种，比如可以为条状图像。条状图像即为形状呈条状的图像，如长方形条状图像、圆形条状图像、圆环形条状图像、半圆环形条状图像等等。其中，条状图的形状可以根据实际需求配置，此时，任务进度条图像的配置信息可以包括条状图像的形状参数信息。

本发明实施例中，半圆环进度参照图像的展开角度可以有多种，不仅限于180°，还可以为0-360°中的任一角度，如45度、52度、60度等等。

比如，参考图3b，利用canvas画布技术，根据图像参数信息在矩形画布上绘制相应的进度条背景图像，该进度条背景图像包括依次连接的初始进度标识图像31、半圆环进度参照图像32以及目标任务进度标识图像33。

其中，标识图像可以根据实际需求配置，比如，可以为点、虚拟人物头像图像、虚拟物品图像等等。此时，任务进度条图像的配置信息还可以包括：初始进度标识图像的图像参数信息、目标任务进度标识图像的图像参数信息。例如，参考图3b，以任务为等级任务为例，初始进度标识图像为圆圈，目标任务进度图像为正方形框图。图3b所示图像中还可以包括初始等级以及目标等级。

204、终端根据目标任务进度将进度参照图像等分成多段子进度参照图像。

比如，进度参照图像为条状图像、目标任务进度值为n时，可以将条状图像等份成n段子条状图像。参考图3c，假设n＝5，此时，可以将半圆环形条状图像等份成5段子条状图像320。

205、终端获取当前任务进度与目标任务进度之间的进度比值，根据进度比值和图像参数信息，获取当前任务进度在进度参照图像中对应的目标进度位置信息。

其中，目标进度位置信息可以包括当前任务进度在进度参照图像中对应的横纵坐标值。

比如，进度参照图像为条状图像，在分段之后，可以当前任务进度m与目标任务进度n之间的进度比值m/n，根据m/n和进度条背景图像的图像参数信息(如图像尺寸信息、角度信息等)，计算出当前任务进度m在条状图像中的位置信息(如横纵坐标值)。

以进度参照图像为半圆环条状图像为例，据目标任务进度n将半圆环条状图像等份成n段，然后，基于进度比值m/n和半圆环角度θ获取当前任务进度m对应的进度弧度d。如弧度d＝(当前任务进度m/目标任务进度)*180*π/180。接着，通过进度弧度d和圆环半径r来计算出当前任务进度m在进度条背景图像的横纵坐标值。如可以通过以下公式得到横坐标x和纵坐标y：

横坐标x＝半径r*cos(弧度d*π/180)+半径r

纵坐标y＝半径r*sin(弧度d*π/180)+半径r。

例如，以m＝3、n＝5为例，参考图3d，在获取图3c所示的进度条背景图像后，可以将半圆环条状图像划分成5等份，然后，通过公式：弧度d＝(当前任务进度m/目标任务进度)*180*π/180，计算出当前任务进度3对应的弧度d，通过上述坐标值公式可以获取进度3对应的横纵坐标值(a2，b2)，如图3d所示，该横纵坐标值(a2，b2)对应的位置即为第三分段的末端位置。

206、终端绘制进度标识图像，并根据目标进度位置信息在进度参照图像中插入进度标识图像。

终端可以离线绘制进度标识图像，进度标识图像可以根据实际需求设置，比如，可以为用户头像、虚拟物品图像、或者其他图像。

参考图3e，可以根据目标任务进度对应的位置的横纵坐标值(a2，b2)，在第三分段的末端位置插入进度标识图像，这里进度标识图像可以为三角块。其中，图3e中还包括当前等级信息。在其他实施例中，该进度条图像中还可以包括其他与进度相关的信息。

207、终端根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括依次连接初始进度标识图像、进度参照图像、目标进度标识图像。

进度条背景图像的绘制过程可以参考上述的介绍，此处不再赘述。

208、终端绘制进度标识图像，并在进度参照图像的起始位置插入进度标识图像。

比如，参考图3f，可以在图3d所示的进度参照图像的起始位置插入进度标识图像，该进度标识图像为一个三角块。

可选地，为了提升用户体验，还可以设置进度动画，该进度动画可以为缓动动画，缓动动画具有进度标识图像移动到的目标进度位置的动画效果。其中，进度动画可以根据实际需求配置，比如，进度条图像的配置信息还可以包括进度动画的模型信息、以及进度动画的持续时间。具体地如下：

获取初始任务进度在进度参照图像中的初始进度位置信息；

根据动画模型信息、持续时间、初始进行位置信息以及目标进度位置信息，获取动画显示时间点对应的图像插入位置信息；

根据图像插入位置信息在进度参照图像中插入相应的进度标识图像；

根据动画显示时间点显示相应的进度条图像，以实现进度动画。

其中，动画模型信息可以包括动画函数；该动画函数用于计算每个动画显示时间点对应的图像插入位置信息。比如，该动画函数公式可以包括如下公式：

时间点t对应的图像插入位置值l＝(目标进度位置值m-初始进度位置值c)*当前时间t/持续时间t+初始进度位置值c。其中，目标位置值m可以包括当前任务进度对应的位置值如包括横坐标值、和/或纵坐标值；初始进度位置值可以包括初始任务进度对应的位置值如包括横坐标值、和/或纵坐标值。一般初始进度位置值为0。

比如，可以获取当前的动画显示时间点t，判断t是否小于持续时间t，若小于，则根据上述动画函数计算动画显示时间点t对应的图像插入位置值，根据图像插入位置值在进度参照图像中插入相应的进度标识图像；若不小于，如等于持续时间t时，停止计算。在得到每个动画显示时间点对应的进度标识图像，然后，根据动画显示时间点显示进度标识图像，便会实现进度标识图像向目标位置移动的动画效果，参考图2j。

本发明实施例的方法可以由处理器加载存储器中进度图像生成代码实现，该进度图像生成代码可以使用json对象进行了统一存放，提升了该方案的适用范围。

本发明实施例采用获取任务进度条图像的配置信息，配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括进度参照图像；获取当前任务进度在进度参照图像中对应的目标进度位置信息；根据目标进度位置信息在进度参照图像中插入相应的进度标识图像，得到用户标识对应的进度条图像；该方案可以基于进度条图像的配置信息绘制相应的进度条图像，避免采用多张图片合成进度条图像，也无需从网络侧设备获取图片，因此，可以提升进度条图像的生成效率以及节省流量。并且，该方案还可以对进度进一步细分，如将进度条图像进行分段，可以使得进度条图像直观地、准确性显示任务进度状态，方案的可扩展性较强，提升了用户体验，

此外，采用该方案，当用户需要修改进度条图像时，用户可以根据实际需求修改配置参数(如角度、尺寸等)改变进度条图像的外观，来生成所需的进度条图像，可以快速对进度条图像进行修改，减低修改成本，提升了方案的可复用性和可扩展性较强。

在一实施例中，以任务为等级任务、进度条为半圆环进度条为例，来详细介绍本发明提供的方法。一种等级进度条生成方法，参考图4a，具体流程如下：

401、终端获取等级进度条图像的配置信息，配置信息包括用户标识对应的当前等级进度值、初始等级进度、目标任务进度、以及半圆环条状图像的图像参数信息。

其中，等级进度条图像，用于显示用户标识的等级进展情况，如用户标识的当前等级、距离目标等级所需的进度情况等等。

其中，等级进度条图像可以应用在各种场景中，如游戏场景、社交场景、购物场景等等，此时，等级可以包括游戏等级、社交等级、购物等级等等。譬如，应用在游戏场景中，该等级进度条图像可以用于显示游戏中用户标识(如游戏账号)的游戏等级进展情况，如用户标识(如游戏账号)的当前游戏等级、距离目标游戏等级所需的进度情况等等。

其中，图像参数可以包括：画布宽高、圆环半径、圆环线宽、展开角度、内外环之间的距离等等。参考图2c，图中展示了各图像参数与半圆环条状图像外观之间的关系。

本发明实施例中，半圆环条状的展开角度可以有多种，不仅限于180°，还可以为0-360°中的任一角度，如45度、52度、60度等等。

其中，等级进度可以由数值表示，比如，当前等级进度值为m，初始等级进度值为0、目标等级进度值为n。

初始等级进度对应的初始等级、和目标等级进度对应的目标等级可以根据实际需求设定，如在某个游戏中，初始等级进度对应的初始等级可以为白银iv，目标等级进度对应的目标等级可以为黄金iv等。

402、终端判断当前等级进度是否与初始等级进度相同，若否，则执行步骤403，若是，则执行步骤40。

比如，当初始等级进度值为0时，可以判断当前等级进度值是否为零。

403、终端根据图像参数信息在画布中绘制依次连接的初始等级进度标识图像、半圆环条状图像、以及目标等级进度标识图像。

比如，终端可以利用canvas画布技术，根据图像参数信息在矩形画布上绘制相应的图像。

其中，标识图像可以根据实际需求配置，比如，可以为点、虚拟人物头像图像、虚拟物品图像等等。此时，等级进度条图像的配置信息还可以包括：初始等级进度标识图像的图像参数信息、目标等级进度标识图像的图像参数信息。

404、终端根据目标等级进度将半圆环条状图像等份多段子条状图像。

比如，根据目标等级进度n将半圆环条状图像等份成n段。

在一实施例，终端还可以根据子条状图像对应的颜色配置信息，对子条状图像进行颜色填充，丰富等级进度条图像的颜色，便于用户识别等级。此时，等级进度条图像的配置信息还可以包括划分后子条状图像的颜色配置信息。

405、终端获取当前等级进度与目标等级进度之间的进度比值，根据进度比值和半圆环展开角度计算当前等级进度对应的进度弧度，根据进度弧度以及圆环半径计算出当前等级进度在半圆环条状图像中的目标进度位置信息。

比如，基于进度比值m/n和半圆环角度θ获取当前等级进度m对应的进度弧度d。如弧度d＝(当前等级进度m/目标等级进度)*180*π/180。接着，通过进度弧度d和圆环半径r来计算出当前等级进度m在进度条背景图像的横纵坐标值。如可以通过以下公式得到横坐标x和纵坐标y：

横坐标x＝半径r*cos(弧度d*π/180)+半径r

纵坐标y＝半径r*sin(弧度d*π/180)+半径r。

例如，以m＝1、n＝5，等级为游戏等级为例，参考图4b，在绘制图像之后，可以将半圆环条状图像划分成5等份，然后，通过公式：弧度d＝(当前等级进度m/目标等级进度)*180*π/180，计算出当前等级进度1对应的弧度d，通过上述坐标值公式可以获取进度1对应的横纵坐标值(a3，b3)，如图4b所示，该横纵坐标值(a3，b3)对应的位置即为第一分段的末端位置。

406、终端绘制进度标识图像，并根据目标进度位置信息在条状图像中插入进度标识图像。

比如，终端可以离线绘制进度标识图像，进度标识图像可以根据实际需求设置，比如，可以为用户头像、虚拟物品图像、或者其他图像。

在绘制进度标识图像后，可以将进度标识图像插入目标进度位置信息对应的位置，参考，图4c，插入到第一分段的末端位置。

参考图4c，等级进度条图像还可以包括：初始等级进度对应的初始等级信息(如游戏等级“黄金iv”)、目标等级进度对应的目标等级信息(如游戏等级“铂金v”)，当前等级进度对应的等级信息(如游戏等级“黄金iii”)。

此外，在一些实施例中，等级进度条图像还可以包括：当前等级距离目标等级的进度信息，以及达到目标等级关联的结果输出信息，比如，参考图4c，在游戏等级进度条图像中还包括当前游戏等级距离目标游戏等级的进度信息“再胜5场到铂金v”、结果输出信息包括“获取xxx皮肤”。

407、终端根据图像参数信息在画布中绘制依次连接的初始等级进度标识图像、半圆环条状图像、以及目标等级进度标识图像。

进度条背景图像的绘制过程可以参考上述的介绍，此处不再赘述。

408、终端绘制进度标识图像，并在半圆环条状图像的起始位置插入进度标识图像。

比如，参考图3f，可以在图3d所示的条状图像的起始位置插入进度标识图像，该进度标识图像为一个三角块。

可选地，为了提升用户体验，还可以设置进度动画，该进度动画可以为缓动动画，缓动动画具有进度标识图像移动到的目标进度位置的动画效果。其中，进度动画可以根据实际需求配置，比如，进度条图像的配置信息还可以包括进度动画的动画函数、以及进度动画的持续时间。具体地如下：

该动画函数用于计算每个动画显示时间点对应的图像插入位置信息。比如，该动画函数公式可以包括如下公式：

时间点t对应的图像插入位置值l＝(目标进度位置值m-初始进度位置值c)*当前时间t/持续时间t+初始进度位置值c。其中，目标位置值m可以包括当前等级进度对应的位置值如包括横坐标值、和/或纵坐标值；初始进度位置值可以包括初始等级进度对应的位置值如包括横坐标值、和/或纵坐标值。一般初始进度位置值为0。

比如，可以获取当前的动画显示时间点t，判断t是否小于持续时间t，若小于，则根据上述动画函数计算动画显示时间点t对应的图像插入位置值，根据图像插入位置值在条状图像中插入相应的进度标识图像；若不小于，如等于持续时间t时，停止计算。在得到每个动画显示时间点对应的进度标识图像，然后，根据动画显示时间点显示进度标识图像，便会实现进度标识图像向目标位置移动的动画效果，参考图4d。

本发明实施例的方法可以由处理器加载存储器中进度图像生成代码实现，该进度图像生成代码可以使用json对象进行了统一存放，提升了该方案的适用范围。

本发明实施提供方案可以对进度条的长宽，半径，角度，线宽，起始点，进度配色等变量进行了参数化，并使用了json对象进行了统一存放，采用canvas代码绘制的方式，在画布上根据配置变量参数进行绘制，从而改变进度条的外观大小样式，无需使用图片。可通过配置参数的方式来改变进度条的外观，若有外观需求大小颜色等变更时，则可以根据需要修改相关参数来满足，不需要制作替换图片，节省了流量。

此外，本发明对进度条进行了扩展，可以对进度条进行二次细分，利用简单的弧形来表示多种状态。对比传统技术需要在文字上进行说明，使用了图形化的技术将复杂的信息化繁为简，进一步提高了用户认知，提升了用户体验。

为了便于更好的实施本发明实施例提供的进度条图像生成方法，在一实施例中还提供了一种进度条图像生成装置。其中名词的含义与上述进度条图像生成方法中相同，具体实现细节可以参考方法实施例中的说明。

在一实施例中，还提供了一种进度条图像生成装置，如图5a所示，该关进度条图像生成装置可以包括：配置获取单元501、绘制单元502、位置获取单元503、以及插入单元504；

配置获取单元501，用于获取任务进度条图像的配置信息，所述配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；

绘制单元502，用于根据所述图像参数信息在画布中绘制相应的进度条背景图像，所述进度条背景图像包括进度参照图像；

位置获取单元503，用于获取所述当前任务进度在所述进度参照图像中对应的目标进度位置信息；

插入单元504，用于根据所述目标进度位置信息在所述进度参照图像中插入相应的进度标识图像，得到所述用户标识对应的任务进度条图像。

在一实施例中，所述配置信息还可以包括：目标任务进度；参考图5b，位置获取单元503可以包括：划分子单元5031、比值获取子单元5032以及位置获取子单元5033；

划分子单元5031，用于根据目标任务进度将所述进度参照图像划分成多段子进度参照图像；

比值获取子单元5032，用于获取所述当前任务进度与所述目标任务进度之间的进度比值，

位置获取子单元5033，用于根据所述进度比值和所述图像参数信息，获取所述当前任务进度在所述进度参照图像对应的目标进度位置信息。

在一实施例中，所述进度参照图像为半圆环形进度参照图像；所述图像参数信息包括：半圆环形进度参照图像的圆环半径、圆环角度；此时，位置获取子单元5033可以用于：

根据所述进度比值以及所述圆环角度，获取在所述进度参照图像中所述任务进度对应的目标进度弧度；

根据所述目标进度弧度和所述圆环半径，获取所述当前任务进度对应的目标位置信息。

在一实施例中，所述配置信息还包括：子进度参照图像对应的颜色配置信息；参考图5c，该进度条图像生成装置还可以包括颜色填充单元505；

所述颜色填充单元505，用于：在划分子单元5031将所述进度参照图像划分成多段子进度参照图像之后，根据所述子进度参照图像对应的颜色配置信息，对所述子进度参照图像进行颜色填充。

在一实施例中，所述配置信息还包括：初始任务进度；

所述划分子单元5031，用于在所述当前任务进度与所述初始任务进度不相等时，根据目标任务进度将所述进度参照图像划分成多段子进度参照图像

所述插入单元504，还用于在所述当前任务进度与所述初始任务进度相等时，在所述进度参照图像的起始位置插入相应的进度标识图像。

在一实施例中，所述配置信息还包括：进度动画的动画模型信息、以及进度动画的持续时间；

所述插入单元504，用于：

获取所述初始任务进度在所述进度参照图像中的初始进度位置信息；

根据所述动画模型信息、所述持续时间、所述初始进行位置信息以及所述目标进度位置信息，获取动画显示时间点对应的图像插入位置信息；

根据所述图像插入位置信息在所述进度参照图像中插入相应的进度标识图像。

可选地，参考图5d，进度条图像生成装置还可以包括显示单元506；用于根据动画显示时间点显示相应的进度标识图像，以实现进度动画。

具体实施时，以上各个单元可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个单元的具体实施可参见前面的方法实施例，在此不再赘述。

该文字动画实现装置具体可以集成终端，比如以客户端的形式集成在终端中，该终端可以为手机、平板电脑等设备。

由上可知，本发明实施例进度条图像生成装置采用配置获取单元501获取任务进度条图像的配置信息，配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；由绘制单元502根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括进度参照图像；由位置获取单元503获取当前任务进度在进度参照图像中对应的目标进度位置信息；由插入单元504根据目标进度位置信息在进度参照图像中插入相应的进度标识图像，得到用户标识对应的任务进度条图像。该方案可以基于进度条图像的配置信息绘制相应的进度条图像，避免采用多张图片合成进度条图像，也无需从网络侧设备获取图片，因此，可以提升进度条图像的生成效率以及节省流量。

参考图6，本发明实施例提供了一种终端600，可以包括一个或者一个以上处理核心的处理器601、一个或一个以上计算机可读存储介质的存储器602、射频(radiofrequency，rf)电路603、电源604、输入单元605、以及显示单元606等部件。本领域技术人员可以理解，图6中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

处理器601是该终端的控制中心，利用各种接口和线路连接整个终端的各个部分，通过运行或执行存储在存储器602内的软件程序和/或模块，以及调用存储在存储器602内的数据，执行终端的各种功能和处理数据，从而对终端进行整体监控。可选的，处理器601可包括一个或多个处理核心；优选的，处理器601可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器601中。

存储器602可用于存储软件程序以及模块，处理器601通过运行存储在存储器602的软件程序以及模块，从而执行各种功能应用以及数据处理。

rf电路603可用于收发信息过程中，信号的接收和发送。

终端还包括给各个部件供电的电源604(比如电池)，优选的，电源可以通过电源管理系统与处理器601逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

该终端还可包括输入单元605，该输入单元605可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

该终端还可包括显示单元606，该显示单元606可用于显示由用户输入的信息或提供给用户的信息以及终端的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。具体在本实施例中，终端中的处理器601会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器602中，并由处理器601来运行存储在存储器602中的应用程序，从而实现各种功能，如下：

获取任务进度条图像的配置信息，所述配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；根据所述图像参数信息在画布中绘制相应的进度条背景图像，所述进度条背景图像包括进度参照图像；获取所述当前任务进度在所述进度参照图像中对应的目标进度位置信息；根据所述目标进度位置信息在所述进度参照图像中插入相应的进度标识图像，得到所述用户标识对应的任务进度条图像。

进度条图像生成方法详细步骤介绍可以参考上述方法实例的描述，这里不再赘述。

由上可知，本发明实施例终端可以获取任务进度条图像的配置信息，配置信息包括用户标识对应的当前任务进度、以及进度条背景图像的图像参数信息；根据图像参数信息在画布中绘制相应的进度条背景图像，进度条背景图像包括进度参照图像；获取当前任务进度在进度参照图像中对应的目标进度位置信息；根据目标进度位置信息在进度参照图像中插入相应的进度标识图像，得到用户标识对应的任务进度条图像。该方案可以基于进度条图像的配置信息绘制相应的进度条图像，避免采用多张图片合成进度条图像，也无需从网络侧设备获取图片，因此，可以提升进度条图像的生成效率以及节省流量。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(rom，readonlymemory)、随机存取记忆体(ram，randomaccessmemory)、磁盘或光盘等。

以上对本发明实施例所提供的一种进度条图像生成方法、装置和存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。