环形进度条的绘制方法、装置及存储介质与流程

文档序号:24132025发布日期:2021-03-02 18:33阅读:158来源:国知局
环形进度条的绘制方法、装置及存储介质与流程

[0001]
本发明涉及显示控制技术领域,具体涉及一种环形进度条的绘制方法、装置及存储介质。


背景技术:

[0002]
环形进度条常被开发用于任务完成进度的显示,在任务进行过程中,环形进度条会随着任务进度增长而逐渐增长,当任务完成时进度条会形成一封闭的圆环。
[0003]
在ios应用开发环境中,进度条的端部呈半圆形绘制,使得在绘制环形进度条时,会在进度条的起始端多出一部分区域,对于颜色渐变的环形进度条,进度条起始端多显示出的部分区域的颜色会与进度条起始端其他区域的颜色存在极大差异,使得在进度条起始端形成颜色差异明显的两个区域,影响进度条的展示效果,进而影响用户的使用体验。


技术实现要素:

[0004]
为了解决现有技术中存在的环形进度条的起始端形成颜色差异明显的两个区域,而影响进度条的展示效果的问题,本发明的目的在于提供一种环形进度条的绘制法、装置及存储介质,使得在进度条的起始端部分不会呈现颜色差异明显的两个区域,保障进度条的展示效果,提升用户的使用体验。
[0005]
第一方面,本发明提供了一种环形进度条的绘制方法,包括:
[0006]
获取待绘制环形进度条的任务的任务进度值,其中,所述待绘制环形进度条对应第一参数和第二参数,所述第一参数用于表征所述待绘制环形进度条起始位置占总路径的比例,所述第二参数用于表征所述待绘制环形进度条终止位置占所述总路径的比例;
[0007]
根据所述待绘制环形进度条的线宽和所述待绘制环形进度条的周长确定所述第一参数的初始值;
[0008]
判断所述任务进度值与所述初始值之和是否小于1;
[0009]
若小于1,则将所述初始值赋予所述第一参数,得到第一赋值后的第一参数,将所述任务进度值赋予所述第二参数,得到第一赋值后的第二参数;
[0010]
根据所述赋值后的第一参数和所述赋值后的第二参数绘制所述待绘制环形进度条。
[0011]
通过上述设计,本发明根据待绘制环形进度条的线宽和待绘制环形进度条的周长确定用于表征待绘制环形进度条起始位置占总路径的比例的第一参数的初始值,并在任务进度值与初始值之和小于1时,将初始值赋予第一参数,得到第一赋值后的第一参数,将任务进度值赋予用于表征待绘制环形进度条终止位置占总路径的比例的第二参数,得到第一赋值后的第二参数,然后根据赋值后的第一参数和赋值后的第二参数绘制待绘制环形进度条。如此,形进度条起始位置占总路径的比例能够大于起始端多出部分占总路径的比例,因此在绘制进度条时不会在进度条起始端呈现颜色差异明显的两个区域,保障进度条的展示效果,提升用户的使用体验。
[0012]
在一个可能的设计中,若不小于1,计算所述任务进度值与所述初始值之和与1之间的差值;
[0013]
将所述初始值与二分之一所述差值之间的差值赋予所述第一参数,得到第二赋值后的第一参数,将所述任务进度值与二分之一所述差值之间的差值赋予所述第二参数,得到第二赋值后的第二参数;
[0014]
根据所述第二赋值后的第一参数和所述第二赋值后的第二参数绘制所述待绘制环形进度条。
[0015]
基于上述公开的内容,由于将初始值与二分之一差值之间的差值赋予第一参数,得到第二赋值后的第一参数,将任务进度值与二分之一差值之间的差值赋予第二参数,得到第二赋值后的第二参数,并根据第二赋值后的第一参数和第二赋值后的第二参数绘制待绘制环形进度条。当任务进度值接近1时,绘制的环形进度条的起始端和末端不会发生重合的情形,从而使环形进度条能够准确展示任务进度。
[0016]
在一个可能的设计中,若小于1,则将所述初始值赋予所述第一参数,得到第一赋值后的第一参数,将所述任务进度值赋予所述第二参数,得到第一赋值后的第二参数,包括:
[0017]
判断所述任务进度值是否小于所述初始值;
[0018]
若小于,将所述初始值赋予所述第一参数,得到所述第一赋值后的第一参数,将初始值与预设值之和赋予所述第二参数,得到所述第一赋值后的第二参数。
[0019]
基于上述公开的内容,当任务进度值过低导致由于任务进度值小于初始值而无法绘制环形进度条时,将初始值赋予第一参数,将初始值与预设值之和作为任务进度值赋予第二参数,从而使得任务进度过低时也能够绘制出环形进度条来显示任务进度。
[0020]
在一个可能的设计中,所述初始值为利用所述待绘制环形进度条的线宽除以所述待绘制环形进度条的2倍周长得到的。
[0021]
基于上述公开的内容,当任务进度值为1时,可使得绘制的环形进度条的起始端和末端刚好处于闭合状态,进一步确保环形进度条的展示效果。
[0022]
在一个可能的设计中,所述方法还包括:
[0023]
生成目标图像,所述目标图像包括并排设置的第一图像区域与第二图像区域,所述第一图像区域与所述第二图像区域沿第一方向依次分布;
[0024]
根据各颜色通道的起始色和所述各颜色通道的终止色,确定出所述各颜色通道的中间色;
[0025]
基于所述各颜色通道的起始色和所述各颜色通道的中间色,对所述第一图像区域的进行渲染,以实现所述第一图像区域的颜色沿第二方向由所述起始色到所述中间色的渐变;
[0026]
基于所述各颜色通道的终止色亮度值和所述各颜色通道的中间色,对所述第二图像区域进行渲染,以实现所述第二图像区域的颜色沿所述第二方向由所述终止色到所述中间色的渐变;
[0027]
从所述目标图层中选取一环形区域作为所述环形进度条的展示区域;
[0028]
其中,所述第一方向与所述第二方向垂直,所述环形区域的一部分位于所述第一图像区域,所述环形区域的另一部分位于所述第二图像区域。
[0029]
基于上述公开的内容,可构建颜色渐变的环形进度条,以便与环形进度条任务进行增加时,能够通过渐变显示不同颜色,达到较好的任务进度展示效果。
[0030]
在一个可能的设计中,所述方法还包括:
[0031]
在所述环形区域生成所述待绘制环形进度条起始位置;
[0032]
对所述环形区域进行旋转,以使所述待绘制环形进度条起始位置与所述环形区域上的颜色分界线重合,所述颜色分界线为所述环形区域上起始色与终止色的分界线。
[0033]
基于上述公开的内容,可根据需要任意设置环形进度条起始位置。
[0034]
第二方面,本发明提供了一种环形进度条的绘制装置,包括:
[0035]
获取单元,用于获取待绘制环形进度条的任务的任务进度值,其中,所述待绘制环形进度条对应第一参数和第二参数,所述第一参数用于表征所述待绘制环形进度条起始位置占总路径的比例,所述第二参数用于表征所述待绘制环形进度条终止位置占所述总路径的比例;
[0036]
确定单元,用于根据所述待绘制环形进度条的线宽和所述待绘制环形进度条的周长确定所述第一参数的初始值;
[0037]
判断单元,用于判断所述任务进度值与所述初始值之和是否小于1;
[0038]
赋值单元,用于若所述任务进度值与所述初始值之和小于1,则将所述初始值赋予所述第一参数,得到第一赋值后的第一参数,将所述任务进度值赋予所述第二参数,得到第一赋值后的第二参数;
[0039]
绘制单元,用于根据所述赋值后的第一参数和所述赋值后的第二参数绘制所述待绘制环形进度条。
[0040]
在一个可能的设计中,所述赋值单元还用于若所述任务进度值与所述初始值之和不小于1,则计算所述任务进度值与所述初始值之和与1之间的差值;
[0041]
所述赋值单元还用于将所述初始值与二分之一所述差值之间的差值赋予所述第一参数,得到第二赋值后的第一参数,将所述任务进度值与二分之一所述差值之间的差值赋予所述第二参数,得到第二赋值后的第二参数;
[0042]
所述绘制单元还用于根据所述第二赋值后的第一参数和所述第二赋值后的第二参数绘制所述待绘制环形进度条。
[0043]
在一个可能的设计中,赋值单元在用于若所述任务进度值与所述初始值之和小于1,则将所述初始值赋予所述第一参数,得到第一赋值后的第一参数,将所述任务进度值赋予所述第二参数,得到第一赋值后的第二参数时,具体用于:
[0044]
判断所述任务进度值是否小于所述初始值;
[0045]
若小于,将所述初始值与预设值之和赋予所述第一参数,得到所述第一赋值后的第一参数,将初始值与预设值之和赋予所述第二参数,得到所述第一赋值后的第二参数。
[0046]
在一个可能的设计中,所述初始值为利用所述待绘制环形进度条的线宽除以所述待绘制环形进度条的2倍周长得到的。
[0047]
在一个可能的设计中,环形进度条的绘制还包括生成单元、渲染单元和选取单元;
[0048]
所述生成单元用于生成目标图像,所述目标图像包括并排设置的第一图像区域与第二图像区域,所述第一图像区域与所述第二图像区域沿第一方向依次分布;
[0049]
所述确定单元还用于根据各颜色通道的起始色和所述各颜色通道的终止色,确定
出所述各颜色通道的中间色;
[0050]
所述渲染单元用于基于所述各颜色通道的起始色和所述各颜色通道的中间色,对所述第一图像区域的进行渲染,以实现所述第一图像区域的颜色沿第二方向由所述起始色到所述中间色的渐变;以及
[0051]
基于所述各颜色通道的终止色亮度值和所述各颜色通道的中间色,对所述第二图像区域进行渲染,以实现所述第二图像区域的颜色沿所述第二方向由所述终止色到所述中间色的渐变;
[0052]
所述选取单元用于从所述目标图层中选取一环形区域作为所述环形进度条的展示区域;
[0053]
其中,所述第一方向与所述第二方向垂直,所述环形区域的一部分位于所述第一图像区域,所述环形区域的另一部分位于所述第二图像区域。
[0054]
在一个可能的设计中,环形进度条的绘制还包括旋转单元;
[0055]
所述生成单元还用于在所述环形区域生成所述待绘制环形进度条起始位置;
[0056]
所述旋转单元用于对所述环形区域进行旋转,以使所述待绘制环形进度条起始位置与所述环形区域上的颜色分界线重合,所述颜色分界线为所述环形区域上起始色与终止色的分界线。
[0057]
第三方面,本发明提供了一种环形进度条的绘制装置,包括包括依次通信相连的存储器、处理器和收发器,其中,所述存储器用于存储计算机程序,所述收发器用于收发消息,所述处理器用于读取所述计算机程序,执行如上述第一方面所述的环形进度条的绘制方法。
[0058]
第四方面,本发明提供了一种计算机可读存储介质,所述计算机可读存储介质上存储有指令,当所述指令在计算机上运行时,执行第一方面所述的环形进度条的绘制方法。
[0059]
第五方面,本发明提供了一种包含指令的计算机程序产品,当所述指令在计算机上运行时,使所述计算机执行如第一方面所述的环形进度条的绘制方法。
附图说明
[0060]
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
[0061]
图1是本发明提供的环形进度条的绘制方法的流程图。
[0062]
图2是本发明提供的环形进度条上初始起点位置、环形进度条起始位置以及环形进度条终止位置的示意图。
[0063]
图3是本发明提供的在初始起点位置绘制环形进度条的效果图。
[0064]
图4是本发明提供的环形进度条的绘制示装置的结构示意图。
[0065]
图5是本发明提供的另一环形进度条的绘制装置的结构示意图。
具体实施方式
[0066]
下面结合附图及具体实施例来对本发明作进一步阐述。在此需要说明的是,对于
这些实施例方式的说明虽然是用于帮助理解本发明,但并不构成对本发明的限定。本文公开的特定结构和功能细节仅用于描述本发明的示例实施例。然而,可用很多备选的形式来体现本发明,并且不应当理解为本发明限制在本文阐述的实施例中。
[0067]
应当理解,尽管本文可能使用术语第一、第二等等来描述各种单元,但是这些单元不应当受到这些术语的限制。这些术语仅用于区分一个单元和另一个单元。例如可以将第一单元称作第二单元,并且类似地可以将第二单元称作第一单元,同时不脱离本发明的示例实施例的范围。
[0068]
应当理解,对于本文中可能出现的术语“和/或”,其仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,a和/或b,可以表示:单独存在a,单独存在b,同时存在a和b三种情况;对于本文中可能出现的术语“/和”,其是描述另一种关联对象关系,表示可以存在两种关系,例如,a/和b,可以表示:单独存在a,单独存在a和b两种情况;另外,对于本文中可能出现的字符“/”,一般表示前后关联对象是一种“或”关系。
[0069]
应当理解,在本文中若将单元称作与另一个单元“连接”、“相连”或“耦合”时,它可以与另一个单元直相连接或耦合,或中间单元可以存在。相対地,在本文中若将单元称作与另一个单元“直接相连”或“直接耦合”时,表示不存在中间单元。另外,应当以类似方式来解释用于描述单元之间的关系的其他单词(例如,“在
……
之间”对“直接在
……
之间”,“相邻”对“直接相邻”等等)。
[0070]
应当理解,本文使用的术语仅用于描述特定实施例,并不意在限制本发明的示例实施例。若本文所使用的,单数形式“一”、“一个”以及“该”意在包括复数形式,除非上下文明确指示相反意思。还应当理解,若术语“包括”、“包括了”、“包含”和/或“包含了”在本文中被使用时,指定所声明的特征、整数、步骤、操作、单元和/或组件的存在性,并且不排除一个或多个其他特征、数量、步骤、操作、单元、组件和/或他们的组合存在性或增加。
[0071]
应当理解,还应当注意到在一些备选实施例中,所出现的功能/动作可能与附图出现的顺序不同。例如,取决于所涉及的功能/动作,实际上可以实质上并发地执行,或者有时可以以相反的顺序来执行连续示出的两个图。
[0072]
应当理解,在下面的描述中提供了特定的细节,以便于对示例实施例的完全理解。然而,本领域普通技术人员应当理解可以在没有这些特定细节的情况下实现示例实施例。例如可以在框图中示出系统,以避免用不必要的细节来使得示例不清楚。在其他实例中,可以不以不必要的细节来示出众所周知的过程、结构和技术,以避免使得示例实施例不清。
[0073]
实施例
[0074]
本实施例第一方面所提供的环形进度条的绘制方法,可应用于用户终端,所述用户终端可以是,但不限于人电脑、智能手机、平板电脑、膝上型便携计算机、车载电脑、个人数字助理等。本实施例第一方面提供的环形进度条的绘制方法,可根据待绘制环形进度条的线宽和待绘制环形进度条的周长确定用于表征待绘制环形进度条起始位置占总路径的比例的第一参数的初始值,并在任务进度值与初始值之和小于1时,将初始值赋予第一参数,得到第一赋值后的第一参数,将任务进度值赋予用于表征待绘制环形进度条终止位置占总路径的比例的第二参数,得到第一赋值后的第二参数,然后根据赋值后的第一参数和赋值后的第二参数绘制待绘制环形进度条,从而在绘制进度条时不会在进度条起始端呈现颜色差异明显的两个区域,保障进度条的展示效果,提升用户的使用体验。
[0075]
下面将对本申请实施例提供的环形进度条的绘制方法进行详细说明。
[0076]
如图1所示,是本申请实施例提供的应用于用户终端的环形进度条的绘制方法的流程图,所述环形进度条的绘制方法可以包括如下步骤:
[0077]
步骤s101.获取待绘制环形进度条的任务的任务进度值。
[0078]
任务的任务进度值,可以是指该任务的完成比例。例如,一任务为资源下载任务,所需要下载资源的大小总共为100m,当前已下载的资源为50m,则该任务的任务进度值可以表示为0.5或50%。
[0079]
其中,待绘制环形进度条对应第一参数和第二参数,第一参数用于表征待绘制环形进度条起始位置占总路径的比例,第二参数用于表征待绘制环形进度条终止位置占总路径的比例。
[0080]
本申请实施例中,环形进度条设置有一初始起点位置,刚初始起点位置的两侧刚好是颜色亮度差别最大的两个区域,待绘制环形进度条起始位置占总路径的比例,可以是指待绘制环形进度条起始位置与初始起点位置之间的圆弧距离占环形进度条总路径的比例。例如,假定环形进度条的总路径为1,设定初始起点位置为0,待绘制环形进度条起始位置为0.01,则待绘制环形进度条起始位置占总路径的比例为0.01,也即第一参数为0.1。同理,待绘制环形进度条终止位置占总路径的比例,可以是指待绘制环形进度条终止位置与初始起点位置之间的圆弧距离占环形进度条总路径的比例。如图2所示,是一环形进度条的示意图,其中a为初始起点位置,其对应的值为0,b为环形进度条起始位置,其对应的值为a到b的圆弧距离除以环形进度条的周长,c为环形进度条终止位置,其对应的值为a到c的圆弧距离除以环形进度条的周长。
[0081]
步骤s102.根据待绘制环形进度条的线宽和待绘制环形进度条的周长确定第一参数的初始值。
[0082]
如图3所示,在ios应用开发环境中,进度条的端部呈半圆形绘制,因此在初始起点位置绘制环形进度条时,会在进度条的起始端多出一部分区域(如图3中竖线部分右侧的黑色区域),对于颜色渐变的环形进度条,进度条起始端多显示出的部分区域的颜色会与进度条起始端其他区域的颜色存在极大差异,使得在进度条起始端形成颜色差异明显的两个区域,影响进度条的展示效果。
[0083]
基于此,本申请实施例提供的环形进度条的绘制方法,会在绘制环形进度条之前会先确定出第一参数的初始值,以确保在绘制环形进度条时,不会出现在进度条起始端形成颜色差异明显的两个区域的情形。
[0084]
本申请实施例中,在确定第一参数的初始值时可根据待绘制环形进度条的线宽和待绘制环形进度条的周长确定出第一参数的初始值。由于进度条起始端多显示出的部分区域为呈半圆形,多出部分的长度为环形进度条的线宽的二分之一。即在绘制环形进度条时,要确保初始起点位置向进度条延伸方向移动至少环形进度条的线宽的二分之一,也即初始起点位置至少需要加上线宽的二分之一与环形进度条的周长的比值。
[0085]
其中,确定环形进度条的周长时,环形进度条的半径可取环形进度条的内圆半径与外圆半径的平均值。假定环形进度条内圆半径为a,外圆半径为b,则环形进度条的半径可以表示为(a+b)/2。仍基于上述步骤s101中的例子,初始起点位置为0,假定环形进度条的线宽与环形进度条的周长的比值为r,因而待绘制环形进度条起始位置占总路径的比例至少
应该是r*0.5,即第一参数的初始值应该大于或等于r*0.5。
[0086]
步骤s103.判断任务进度值与初始值之和是否小于1,若是,则执行步骤s104。
[0087]
步骤s104.将初始值赋予第一参数,得到第一赋值后的第一参数,将任务进度值赋予所述第二参数,得到第一赋值后的第二参数。
[0088]
如果任务进度值与初始值之和小于1,则可将初始值赋予第一参数,得到第一赋值后的第一参数,将任务进度值赋予所述第二参数,得到第一赋值后的第二参数。
[0089]
步骤s105.根据赋值后的第一参数和赋值后的第二参数绘制待绘制环形进度条。
[0090]
在将初始值赋予第一参数,得到第一赋值后的第一参数,将任务进度值赋予所述第二参数,得到第一赋值后的第二参数之后,可根据赋值后的第一参数和赋值后的第二参数绘制待绘制环形进度条。即以赋值后的第一参数作为待绘制环形进度条起始位置,以赋值后的第二参数作为待绘制环形进度条终止位置开始绘制环形进度条。
[0091]
由此通过前述步骤s101~s105所述的环形进度条的绘制方法,由于根据待绘制环形进度条的线宽和待绘制环形进度条的周长,确定出第一参数的初始值,并在任务进度值与初始值之和小于1时,将初始值赋予第一参数,得到第一赋值后的第一参数,将任务进度值赋予第二参数,得到第一赋值后的第二参数,然后根据赋值后的第一参数和赋值后的第二参数绘制待绘制环形进度条。如此,形进度条起始位置占总路径的比例能够大于起始端多出部分占总路径的比例,因此在绘制进度条时,进度条的起始端全部位于初始起点位置的同一侧,因而不会在进度条起始端呈现颜色差异明显的两个区域,保障进度条的展示效果,提升用户的使用体验。
[0092]
本实施例在前述第一方面的技术方案基础上,还具体提出了一种避免绘制的环形进度条的起始端和末端发生重合的可能设计一。本可能设计一适用于初始值为环形进度条的线宽与环形进度条的周长的比值,即初始值为r的情形。所述方法还包括但不限于有如下步骤s201-s203。
[0093]
步骤s201.如果任务进度值与初始值之和不小于1,计算任务进度值与所述初始值之和与1之间的差值。
[0094]
步骤s202.将初始值与二分之一所述差值之间的差值赋予第一参数,得到第二赋值后的第一参数,将任务进度值与二分之一差值之间的差值赋予第二参数,得到第二赋值后的第二参数。
[0095]
如果任务进度值与初始值之和等于1,此时以初始值赋予第一参数作为待绘制环形进度条起始位置,以任务进度值赋予第二参数作为待绘制环形进度条终止位置开始绘制环形进度条,则绘制的环形进度条的起始端和末端刚好处于闭合状态。由于初始值为一大于0的值,也就是说在此时任务进度值并未达到100%,随着任务进度值继续增加,会导致绘制的环形进度条的起始端与末端出现重合的情形,从而使得使环形进度条不能够准确展示任务进度。
[0096]
因此,如果任务进度值与初始值之和不小于1时,可计算任务进度值与初始值之和与1之间的差值,然后将初始值与二分之一所述差值之间的差值赋予第一参数,得到第二赋值后的第一参数,将任务进度值与二分之一所述差值之间的差值赋予第二参数,得到第二赋值后的第二参数。
[0097]
步骤s203.根据所述第二赋值后的第一参数和所述第二赋值后的第二参数绘制所
述待绘制环形进度条。
[0098]
由于将初始值与二分之一所述差值之间的差值赋予第一参数,得到第二赋值后的第一参数,将任务进度值与二分之一所述差值之间的差值赋予第二参数,得到第二赋值后的第二参数。也就是说,任务进度值与初始值之和超出1的部分,初始值减去该部分的二分之一,任务进度值减去该部分的二分之一。当任务进度值接近100%,且任务进度值与初始值之和超出1时,由于将初始值与二分之一所述差值之间的差值赋予第一参数,将任务进度值与二分之一所述差值之间的差值赋予第二参数,从而使得第二赋值后的第二参数到第二赋值后的第一参数之间的差大于该初始值,因此在绘制环形进度条时,不会出现环形进度条的起始端和末端闭合的情形。随着任务进度值的增加,第二赋值后的第二参数到第二赋值后的第一参数之间的差逐渐减小,并在任务进度值为100%时,第二赋值后的第二参数到第二赋值后的第一参数之间的差刚好等于该初始值,此时绘制的环形进度条的起始端和末端闭刚好闭合。
[0099]
例如,初始值(等于环形进度条的线宽与环形进度条的周长的比值)为0.02,当任务进度为98%时,两者之和刚好为1,则任务进度值与初始值之和与1之间的差值为0,将初始值与二分之一所述差值之间的差值赋予第一参数,得到第二赋值后的第一参数为0.02,将任务进度值与二分之一所述差值之间的差值赋予第二参数,得到第二赋值后的第二参数为0.98,第二赋值后的第二参数与第二赋值后的第一参数之间的差为(1-0.98)+0.02=0.04,而初始值(环形进度条的线宽与环形进度条的周长的比值)为0.02,因而在绘制环形进度条时环形进度条的起始端和末端之间对应的差值刚好为0.02,也即环形进度条为一个圆环的98%,与任务进度98%对应。当任务进度值达到99%时,任务进度值与初始值之和与1之间的差值为0.01,二分之一所述差值为0.005,将初始值与二分之一所述差值之间的差值赋予第一参数,得到第二赋值后的第一参数为0.015,将任务进度值与二分之一所述差值之间的差值赋予第二参数,得到第二赋值后的第二参数为0.985,第二赋值后的第二参数与第二赋值后的第一参数之间的差为(1-0.985)+0.015=0.03,环形进度条的线宽与环形进度条的周长的比值为0.02,因而在绘制环形进度条时环形进度条的起始端和末端之间对应的差值刚好为0.01,也即环形进度条为一个圆环的99%,与任务进度99%对应。随着任务进度值增加并达到100%时,任务进度值与初始值之和与1之间的差值为0.02,二分之一所述差值为0.01,量将初始值与二分之一所述差值之间的差值赋予第一参数,得到第二赋值后的第一参数为0.01,将任务进度值与二分之一所述差值之间的差值赋予第二参数,得到第二赋值后的第二参数为0.99,第二赋值后的第二参数与第二赋值后的第一参数之间的差为(1-0.99)+0.01=0.02,环形进度条的线宽与环形进度条的周长的比值为0.02,因而在绘制环形进度条时环形进度条的起始端和末端之间对应的差值刚好为0,也即环形进度条为一个圆环的100%,与任务进度100%对应。
[0100]
因此,当任务进度值接近100%时,绘制的环形进度条的的起始端和末端之间不会闭合,且随着任务进度值的增加,环形进度条的的起始端和末端逐渐相互靠近,并在任务进度值达到100%时完全闭合,从而使环形进度条能够准确展示任务进度。
[0101]
同时,由于当任务进度值刚好达到100%时,第二赋值后的第一参数减去二分之一差值,刚好等于绘制进度条时起始端多出一部分区域占环形进度条的周长的比值。第二赋值后的第二参数减去二分之一差值,刚好等于绘制进度条时末端多出一部分区域占环形进
度条的周长的比值。因而绘制的环形进度条的起始端的端部刚好位于初始起点位置,绘制的环形进度条的末端的端部刚好也位于初始起点位置,环形进度条的起始端和末端刚好是亮度值差别最大的两种颜色,从而环形进度条的颜色刚好从起始端渐变到末端,不会出现环形进度条的起始端或末端颜色骤变的情形,进一步确保环形进度条的展示效果,提升用户使用体验。
[0102]
本实施例在前述第一方面的技术方案基础上,还具体提出了一种确保环形进度条能够准确展示任务进度可能设计二,所述方法还包括但不限于有如下步骤s301-s302。
[0103]
s301.判断任务进度值是否小于初始值。
[0104]
s302.如果任务进度值小于初始值,则将初始值赋予第一参数,得到第一赋值后的第一参数,将初始值与预设值之和作为任务进度值赋予第二参数,得到第一赋值后的第二参数。
[0105]
在绘制环形进度条时,会以赋予初始值的第一参数为环形进度条的起点位置,赋予任务进度值的第二参数为环形进度条的终止位置绘制环形进度条,若当前任务进度值小于初始值,则会导致起点位置大于终止位置的情形,从而使得在任务进度值小于初始值时无法绘制出环形进度条。因此,本申请实施例中,在任务进度值小于初始值时,会将初始值赋予第一参数,得到第一赋值后的第一参数,将初始值与预设值之和作为任务进度值赋予第二参数,得到第一赋值后的第二参数。如此,即使任务任务进度值在较低时也能够绘制出相应的环形进度条。本申请实施例中,所述预设值不宜过大,一般要求小于初始值。
[0106]
例如,该预设值为0.001,当前任务的任务进度值为0.005,而初始值为0.01,由于赋予初始值的第一参数为0.01,赋予任务进度值的第二参数为0.005,则会导致起点位置大于终止位置的情形,从而使得无法绘制出环形进度条。此时,将初始值赋予第一参数,得到第一赋值后的第一参数0.01,将初始值与预设值之和作为所述任务进度值赋予第二参数,得到第一赋值后的第二参数0.011,此时起点位置小于终止位置,可以完成环形进度条的绘制。本可能设计二的方案适用于任务进度值较小的情形,在此情形下所绘制的进度条十分短,因而在视觉上能够使进度条与任务进度保持一致。
[0107]
本实施例在前述第一方面或可能设计一至二任意项的技术方案基础上,还提出了一种生成环形进度条的可能设计三,即所述方法还包括但不限于有如下步骤s401-s405。
[0108]
步骤s401.响应用户的输入操作生成目标图像。
[0109]
在步骤s201中,目标图像包括并排设置的第一图像区域与第二图像区域,第一图像区域与第二图像区域沿第一方向依次分布。第一图像区域与第二图像区域以规则的图像区域为宜,例如可以是长方形、半圆形等。
[0110]
步骤s402.根据各颜色通道的起始色和所述各颜色通道的终止色,确定出所述各颜色通道的中间色。
[0111]
所述各颜色通道可以是,但不限于rgb、hsv等色彩模式的。例如,当各颜色通道是基于rgb色彩模式的,则该各颜色通道可以是红(r)、绿(g)、蓝(b)三个颜色通道。
[0112]
在生成环形进度条时,用户可输入各颜色通道的起始色和各颜色通道的终止色,起始色的亮度与终止色的亮度不同,用户终端可根据各颜色通道的起始色和各颜色通道的终止色值确定出各颜色通道的中间色,中间色的亮度值等于起始色的亮度值与终止色的亮度值的平均值。仍基于上述的例子,假如r颜色通道的起始色的亮度值为51,g颜色通道的起
始色的亮度值为61,b颜色通道的起始色的亮度值为71,r颜色通道的终止色的亮度值为149,g颜色通道的终止色的亮度值为159,b颜色通道的终止色的亮度值为169,则r颜色通道的中间色的亮度值为100,g颜色通道的中间色的亮度值为110,b颜色通道的中间色的亮度值为120。
[0113]
步骤s403.基于各颜色通道的起始色和各颜色通道的中间色,对第一图像区域的颜色沿进行渲染,以实现第一图像区域的颜色沿第二方向由起始色到中间色的渐变。
[0114]
其中,第一方向与第二方向垂直。例如,第一图像区域与第二图像区域从左至右依次分布,则第一方向可以是从上向下方向或从下向上方向。
[0115]
步骤s404.基于各颜色通道的终止色和各颜色通道的中间色,对第二图像区域的颜色沿进行渲染,以实现所述第二图像区域的颜色沿所述第二方向由所述终止色到所述中间色的渐变。
[0116]
步骤s405.从目标图层中选取一环形区域作为环形进度条的展示区域。
[0117]
其中环形区域的一部分位于第一图像区域,环形区域的另一部分位于第二图像区域。
[0118]
由于,第一方向与第二方向垂直,第一图像区域的颜色沿第二方向由起始色到中间色的渐变,第二图像区域的颜色沿第二方向由终止色到中间色的渐变,因此从目标图层中选取一环形区域后,环形区域的颜色亮度会沿顺时针或逆时针反向渐变。
[0119]
在将选取一环形区域作为环形进度条的展示区域后,还可在环形区域生成待绘制环形进度条起始位置,并对环形区域进行旋转,以使待绘制环形进度条起始位置与所形区域上的颜色分界线重合,该颜色分界线为环形区域上起始色与终止色的分界线。如此,可根据需要任意设置环形进度条起始位置。
[0120]
第二方面,请参阅图4,本申请实施例提供了一种环形进度条的绘制装置,该环形进度条的绘制包括:
[0121]
获取单元,用于获取待绘制环形进度条的任务的任务进度值,其中,所述待绘制环形进度条对应第一参数和第二参数,所述第一参数用于表征所述待绘制环形进度条起始位置占总路径的比例,所述第二参数用于表征所述待绘制环形进度条终止位置占所述总路径的比例;
[0122]
确定单元,用于根据所述待绘制环形进度条的线宽和所述待绘制环形进度条的周长确定所述第一参数的初始值;
[0123]
判断单元,用于判断所述任务进度值与所述初始值之和是否小于1;
[0124]
赋值单元,用于若所述任务进度值与所述初始值之和小于1,则将所述初始值赋予所述第一参数,得到第一赋值后的第一参数,将所述任务进度值赋予所述第二参数,得到第一赋值后的第二参数;
[0125]
绘制单元,用于根据所述赋值后的第一参数和所述赋值后的第二参数绘制所述待绘制环形进度条。
[0126]
在一个可能的设计中,所述赋值单元还用于若所述任务进度值与所述初始值之和不小于1,则计算所述任务进度值与所述初始值之和与1之间的差值;
[0127]
所述赋值单元还用于将所述初始值与二分之一所述差值之间的差值赋予所述第一参数,得到第二赋值后的第一参数,将所述任务进度值与二分之一所述差值之间的差值
赋予所述第二参数,得到第二赋值后的第二参数;
[0128]
所述绘制单元还用于根据所述第二赋值后的第一参数和所述第二赋值后的第二参数绘制所述待绘制环形进度条。
[0129]
在一个可能的设计中,赋值单元在用于若所述任务进度值与所述初始值之和小于1,则将所述初始值赋予所述第一参数,得到第一赋值后的第一参数,将所述任务进度值赋予所述第二参数,得到第一赋值后的第二参数时,具体用于:
[0130]
判断所述任务进度值是否小于所述初始值;
[0131]
若小于,将所述初始值与预设值之和赋予所述第一参数,得到所述第一赋值后的第一参数,将初始值与预设值之和赋予所述第二参数,得到所述第一赋值后的第二参数。
[0132]
在一个可能的设计中,所述初始值为利用所述待绘制环形进度条的线宽除以所述待绘制环形进度条的2倍周长得到的。
[0133]
在一个可能的设计中,环形进度条的绘制还包括生成单元、渲染单元和选取单元;
[0134]
所述生成单元用于生成目标图像,所述目标图像包括并排设置的第一图像区域与第二图像区域,所述第一图像区域与所述第二图像区域沿第一方向依次分布;
[0135]
所述确定单元还用于根据各颜色通道的起始色和所述各颜色通道的终止色,确定出所述各颜色通道的中间色;
[0136]
所述渲染单元用于基于所述各颜色通道的起始色和所述各颜色通道的中间色,对所述第一图像区域的进行渲染,以实现所述第一图像区域的颜色沿第二方向由所述起始色到所述中间色的渐变;以及
[0137]
基于所述各颜色通道的终止色亮度值和所述各颜色通道的中间色,对所述第二图像区域进行渲染,以实现所述第二图像区域的颜色沿所述第二方向由所述终止色到所述中间色的渐变;
[0138]
所述选取单元用于从所述目标图层中选取一环形区域作为所述环形进度条的展示区域;
[0139]
其中,所述第一方向与所述第二方向垂直,所述环形区域的一部分位于所述第一图像区域,所述环形区域的另一部分位于所述第二图像区域。
[0140]
在一个可能的设计中,环形进度条的绘制还包括旋转单元;
[0141]
所述生成单元还用于在所述环形区域生成所述待绘制环形进度条起始位置;
[0142]
所述旋转单元用于对所述环形区域进行旋转,以使所述待绘制环形进度条起始位置与所述环形区域上的颜色分界线重合,所述颜色分界线为所述环形区域上起始色与终止色的分界线。
[0143]
本实施例第二方面提供的装置的工作过程、工作细节和技术效果,可以参见实施例第一方面,于此不再赘述。
[0144]
如图5所示,本申请实施例第三方面提供了一种环形进度条的绘制装置,包括依次通信相连的存储器、处理器和收发器,其中,所述存储器用于存储计算机程序,所述收发器用于收发消息,所述处理器用于读取所述计算机程序,执行如实施例第一方面所述的环形进度条的绘制方法。
[0145]
具体举例的,所述存储器可以但不限于包括随机存取存储器(ram)、只读存储器(rom)、闪存(flash memory)、先进先出存储器(fifo)和/或先进后出存储器(filo)等等;所
述处理器可以不限于采用型号为stm32f105系列的微处理器、arm(advanced risc machines)、x86等架构处理器或集成npu(neural-network processing units)的处理器;所述收发器可以但不限于为wifi(无线保真)无线收发器、蓝牙无线收发器、通用分组无线服务技术(general packet radio service,gprs)无线收发器、紫蜂协议(基于ieee802.15.4标准的低功耗局域网协议,zigbee)无线收发器、3g收发器、4g收发器和/或5g收发器等。
[0146]
本实施例第三方面提供的装置的工作过程、工作细节和技术效果,可以参见实施例第一方面,于此不再赘述。
[0147]
本实施例第四方面提供了一种存储包含有实施例第一方面所述的环形进度条的绘制方法的指令的计算机可读存储介质,即所述计算机可读存储介质上存储有指令,当所述指令在计算机上运行时,执行如第一方面所述的环形进度条的绘制方法。其中,所述计算机可读存储介质是指存储数据的载体,可以但不限于包括软盘、光盘、硬盘、闪存、优盘和/或记忆棒(memory stick)等,所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。
[0148]
本实施例第四方面提供的计算机可读存储介质的工作过程、工作细节和技术效果,可以参见实施例第一方面,于此不再赘述。
[0149]
本实施例第五方面提供了一种包含指令的计算机程序产品,当所述指令在计算机上运行时,使所述计算机执行如实施例第一方面所述的环形进度条的绘制方法,其中,所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。
[0150]
以上所描述的多个实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下,即可以理解并实施。
[0151]
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如rom/ram、磁碟、光盘等,包括若干指令用以使得一台仓库代码的合并装置执行各个实施例或者实施例的某些部分所述的方法。
[0152]
本发明不局限于上述可选实施方式,任何人在本发明的启示下都可得出其他各种形式的产品,但不论在其形状或结构上作任何变化,凡是落入本发明权利要求界定范围内的技术方案,均落在本发明的保护范围之内。
当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1