CN106681706B - 应用进度处理方法及终端 - Google Patents

Abstract

本发明公开了一种应用进度处理方法及终端；方法包括：基于目标应用下载或者安装的进度，确定与所述进度相应的偏移角度；调用支持可缩放矢量图形的绘制工具，在待渲染图形区域中绘制正方形区域，在所述正方形区域的直角区域绘制圆角边框；在所述正方形区域内绘制形成对应所述偏移角度的封闭区域；对所述封闭区域进行渲染，得到表征所述目标应用下载或者安装的进度的圆角进度图形。实施本发明，能够高效实现应用的圆角进度的效果。

Description

应用进度处理方法及终端

技术领域

本发明涉及通信领域的图形处理技术，尤其涉及一种应用进度处理方法及终端。

背景技术

伴随移动互联网的飞速发展，终端如智能手机、平板电脑快速普及，终端中可供安装的应用也日益增多，涵盖娱乐、学习、工作等诸多方面，在终端的使用较为常见的一个场景是：下载并安装应用。

提示下载以及安装进度的圆角进度图标在这一耗时的操作上给用户一个比较好的体验，可以实时向用户提醒下载以及安装的进度情况，不会让用户觉得在盲目等待，尤其是在用户同时下载多个应用并安装时(比如，批量更新)，用户需要了解应用的下载以及安装的进度，从而在安装完成后能够尽快使用应用。

目前，圆角进度图标的实现方式，通常是在应用的图标上叠加渐变的动态的显示效果，来提示应用下载以及安装的进度，但是，对于采用一种简单高效的方式实现圆角进度的动画效果，相关技术尚无有效解决方案。

发明内容

本发明实施例提供一种应用进度处理方法及终端，能够高效实现圆角进度的效果。

本发明实施例的技术方案是这样实现的：

第一方面，本发明实施例提供一种应用进度处理方法，所述方法包括：

基于目标应用下载或者安装的进度，确定与所述进度相应的偏移角度；

调用支持可缩放矢量图形的绘制工具，在待渲染图形区域中绘制正方形区域，在所述正方形区域的直角区域绘制圆角边框；

在所述正方形区域内绘制形成对应所述偏移角度的封闭区域；

对所述封闭区域进行渲染，得到表征所述目标应用下载或者安装的进度的圆角进度图形。

第二方面，本发明实施例提供一种终端，所述终端包括：

偏移角度确定单元，用于基于目标应用下载或者安装的进度，确定与所述进度相应的偏移角度；

圆角边框绘制单元，用于调用支持可缩放矢量图形的绘制工具，在待渲染图形区域中绘制正方形区域，在所述正方形区域的直角区域绘制圆角边框；

封闭区域绘制单元，用于调用支持可缩放矢量图形的绘制工具在所述正方形区域内绘制形成对应所述偏移角度的封闭区域；

渲染单元，用于对所述封闭区域进行渲染，得到表征所述目标应用下载或者安装的进度的圆角进度图形。

第三方面，本发明实施例提供一种终端，所述终端包括处理器和存储介质；所述存储介质中存储有可执行指令，所述可执行指令用于执行本发明实施例提供的应用进度处理方法。

本发明实施例具有以下有益效果：

1)使用可缩放矢量图形的绘制工具，例如SVG路径命令，或者Canvas API来绘制圆角进度绘制圆角边框以及与进度对应的封闭区域，由于SVG图形在缩放时具有任意缩放而不失真的特点，因此表征渲染时圆角进度的清晰的视觉效果。

2)可缩放矢量图形的绘制工具本身支持边框的圆角属性的设置，因此可以根据需要任意设置边框半径并高效绘制边框的圆角，避免了使用已有的hack方法模拟绘制导致的效率低的问题。

附图说明

图1是本发明实施例提供的圆角进度图标的一个可选的显示示意图；

图2是本发明实施例提供的圆角进度图标表征不同下载进度的一个可选的显示示意图；

图3是本发明实施例提供的终端的一个可选的硬件结构示意图；

图4是本发明实施例提供的绘制圆角进度图形的一个可选的流程示意图；

图5是本发明实施例提供的绘制圆角边框的一个可选的示意图；

图6是本发明实施例提供的从中心点绘制直线到扇形起点的一个可选的示意图；

图7是本发明实施例提供的绘制弧形的一个可选的示意图；

图8是本发明实施例提供的绘制弧形的一个可选的示意图；

图9是本发明实施例提供的圆角进度图形的一个可选的示意图；

图10是本发明实施例提供的绘制圆角进度图形的一个可选的流程示意图；

图11至图14是本发明实施例提供的不同偏移角度的圆角进度图形的可选的示意图；

图15是本发明实施例提供的绘制圆角进度图形的一个可选的流程示意图；

图16是本发明实施例提供的绘制圆角进度图形的一个可选的流程示意图；

图17是本发明实施例提供的绘制圆角进度图形的五元数组的一个可选的示意图；

图18是本发明实施例提供的终端的一个可选的功能结构示意图。

具体实施方式

以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所提供的实施例仅仅用以解释本发明，并不用于限定本发明。另外，以下所提供的实施例是用于实施本发明的部分实施例，而非提供实施本发明的全部实施例，在不冲突的情况下，本发明实施例记载的技术方案可以任意组合的方式实施。

本发明实施例中涉及的名词和术语适用于如下的解释。

1)动画，通过按时间序列逐帧绘制的图像，由于视觉暂留所呈现出的连续的动态的效果。

2)可缩放矢量图形(SVG，Scalable Vector Graphics)，基于可扩展标记语言(标准通用标记语言(XML，eXtensible Markup Language)的子集，用于描述二维矢量图形的一种图形格式。

SVG技术中预定义的形状有一些预定义的基本形状可操作，例如：

矩形<rect>；圆形<circle>；线<line>；路径<path>。

除了以上基本形状以外，SVG技术中还使用路径(path)命令绘制路径，路径由一系列的点规定，路径的形状可以是开放的(如线)或闭合的(如多边形)，并可以包含一条或多条线、曲线和线段等。

常用的SVG路径命令包括：

Z，闭合路径(closepath)，将路径的开始和结束点用直线连接；

L，直线(lineTo)，当前坐标绘制一条直线到一个新坐标；

M，移动到(moveTo)新的位置；

A，elliptical arc，当前坐标绘制椭圆弧到新坐标；

O，到当前坐标绘制二次贝塞尔曲线到新坐标。

3)超文本标记语言(HTML，Hyper Text Mark-up Language)，标准通用标记语言下的一个应用，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

4)层叠样式表(CSS Cascading Style Sheets)，用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS目前最新版本为CSS3，能够真正网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持所有的字体字号样式。

5)自定义动画(animation)，CSS的复合属性，检索或设置对象所应用的动画特效，常用的参数有：

动画的名字；整个动画的持续时间；运动方式(动画方式)的贝赛尔曲线；

动画延迟执行的时间；动画循环执行的次数；动画循环方式：动画的最后状态等。

6)HTML 5画布(Canvas)应用程序接口(API)，提供与前述SVG路径命令类似的命令，支持在页面设定的画布中进行绘制操作。

发明人在实施本发明的过程中发现，以终端中应用的图标为图1示出的圆角进度图标10为例，如果圆角进度图标利用HTML+CSS3自定义动画(animation)相结合的方式，能够实现图2中示出的提示不同进度(如下载进度、安装进度)的动画效果。

但是，如果利用HTML+CSS3animation实现圆角进度图标的动画效果，由于CSS3无法直接绘制圆弧11，只能通过其它的hack的方法来模拟实现，其本质是将一套CSS逐步变化为另外一种CSS，导致实现过于复杂。

发明人在实施本发明的过程中还发现，SVG技术虽然目前是应用于网页图像绘制的技术，但是SVG技术具有的以下优点可以使得SVG技术应用于终端中的圆角进度图形的绘制：

优点1)基于XML，跨平台性和可扩展性。

基于XML，为了保证网络图像能够顺利地和目前已经由W3C开发的DOM1，SVG在web中的应用技术，以及其他标准化技术协调一致，SVG是完全基于可扩展标记语言，并能和标准化技术相融会的新一代的网络图像格式。

SVG并非仅仅是一种图像格式，由于它是一种基于XML的语言，也就意味着它继承了XML的跨平台性和可扩展性，如SVG可以内嵌于其他的XML文档中，而SVG文档中也可以嵌入其他的XML内容，各个不同的SVG图形可以方便地组合，构成新的SVG图形。

优点2)采用文本来描述SVG。

包括3种类型的对象：矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。

各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。

与传统的图像格式不同的是，SVG采用文本来描述矢量化的图形，这使得SVG图形文件可以像HTML网页一样有着很好的可读性。当绘制工具输出SVG图形后，可以用任何文字处理工具打开SVG图形，并可看到用来描述图像的文本代码。SVG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果，但却仍然是以文本的形式存在的，可以选择复制、粘贴。

例如一个实心圆的矢量图形可以这样来生成：

以坐标(50，80)为圆心，画一个半径为10个像素的圆，用红色填充。而SVG技术就是采用了这样的文本化的指令方式来描述：

<？xml version＝"1.0"？>

<svg width＝"100"height＝"200"version＝"1.1"xmlns＝"http://www.w3.org/2000/svg">

<circle style＝"fill:red"cx＝"50"cy＝"80"r＝"10"/>

</svg>

可以看出，建立在文本基础上的SVG图形中所有的描述语句都可以直接观察到，所以也非常容易进行二次修改与更新，可升级的特点在这里可以得到恰当的反映。

SVG技术的上述优点使得可以应用于终端的圆角进度图形的绘制，在本发明实施例中，如图2所示的表征用于的不同进度的圆角进度图标，可以分解为应用的圆角图标(也就是应用的原始图标，不能表征应用的进度)、以及表征应用的进度的圆角进度图形，应用的圆角进度图标可以通过在应用的圆角图标上叠加圆角进度图形而得到。

例如，由于SVG图形是基于XML描述的，从而终端可以通过任意的文本编辑工具创建图形元素对应的SVG节点，在本发明实施例中，SVG节点与圆角进度图形的帧对应，其中包括描述实现圆角进度的XML语句，调用SVG绘制工具(提供上述的SVG路径命令支持)执行SVG节点的语句，可以输出连续的表征不同进度的圆角进度图形，不断刷新在应用的圆角图标上刷新圆角进度图形，可以在应用的圆角进度图标上形成进度发生变化的动画效果。

鉴于此，本发明实施例提供基于SVG技术的应用进度处理方法，以及执行应用进度处理方法的终端。

终端可以采用各种方式来实施，例如智能手机、平板电脑、车载终端、穿戴式设备以及台式机电脑等计算设备。

图3示例性示出了终端20的一个可选的硬件结构示意图，图3示出的硬件结构仅为示例，并不构成对终端结构的限定。例如，可以根据实施需要设置较图3更多的组件，或者根据实施需要省略设置部分组件。

在图3中，终端20的一个可选的硬件结构包括：处理器21、输入/输出接口23，存储介质24以及网络接口22，组件可以经总线25连接通信。

处理器21可以采用中央处理器(CPU)、微处理器(MCU，Microcontroller Unit)、专用集成电路(ASIC，Application Specific Integrated Circuit)或逻辑可编程门阵列(FPGA，Field－Programmable Gate Array)实现。

输入/输出接口23可以采用如显示屏、触摸屏、扬声器等输入/输出器件实现。

存储介质24可以采用闪存、硬盘、光盘等非易失性存储介质实现，也可以采用双倍率(DDR，Double Data Rate)动态缓存等易失性存储介质实现，示例性地，存储介质24可以与硬件结构中的其他组件共同在同一设备设置，也可以相对硬件结构中的其他组件异地远程设置。

网络接口22向处理器21提供外部数据如异地设置的存储介质24的访问能力，示例性地，网络接口22可以基于近场通信(NFC，Near Field Communication)技术、蓝牙(Bluetooth)技术、紫蜂(ZigBee)技术进行的近距离通信，另外，还可以实现如基于码分多址(CDMA，Code Division Multiple Access)、宽带码分多址(WCDMA，Wideband CodeDivision Multiple Access)等通信制式及其演进制式的通信。

以下以终端基于SVG技术绘制圆角进度图形进行说明，终端的处理器在显示器上进行渲染形成图形用户界面，并执行可缩放矢量图形绘制工具绘制表征应用的不同进度(如下载进度或者安装进度)的圆角进度图形的帧(后续也简称为圆角进度)，将表征不同进度的圆角进度图形作为一个图层与应用的圆角图标的图层叠加，在应用的进度发生更新时，刷新在应用的圆角图标的图层上叠加的圆角进度图形，即可形成表征如图2所示的表征应用的进度更新的动画效果。

下面，以调用的支持SVG绘制工具进行的处理为SVG路径命令为例进行说明，由于Canvas API提供的绘图命令与SVG绘图命令是类似的，因此可以参考下述基于SVG路径命令的调用而实施。

如前，圆角进度图形的帧可以通过SVG节点中的XML语句描述，通过调用SVG绘制工具执行圆角进度图形的XML语句描述可以形成圆角进度。下面，假设已经具有圆角进度图形的XML语句描述，对调用SVG绘制工具执行SVG节点中的XML语句描述，从而绘制圆角进度图形的过程进行说明。

如参见图4示出的绘制圆角进度图形的一个可选的流程示意图，包括以下步骤：

步骤101，基于应用下载或者安装的更新的进度，确定与进度相应的偏移角度。

在另一个实施例中，圆角进度图形可以用于表征应用的下载进度，从终端操作系统的下载器中读取应用的安装包的下载进度，特别地，当终端在同时下载多个应用的安装包时，读取每个应用的安装包的下载进度，基于下载进度计算圆角进度的偏移角度，例如当下载进度为4％时，圆角进度图形的偏移角度为360度×4％＝15度，当下载进度为13％时，圆角进度的偏移角度为360度×13％＝45度，从而对应形成如图9、图11示出的圆角进度。以此类推，当下载进度为25％、50％、75％时，对应形成如图12、图13和图14示出的圆角进度图形。

在另一个实施例中，与圆角进度图形表征安装进度的处理类似，圆角进度图形可以用于表征应用的安装进度，从终端操作系统的安装器中读取应用的安装包的安装进度，特别地，当终端在同时安装多个应用的安装包时，读取每个应用的安装包的安装进度，基于安装进度计算圆角进度图形的偏移角度，例如当安装进度为4％时，圆角进度图形的偏移角度为360度×4％＝15度，当安装进度为13％时，圆角进度图形的偏移角度为360度×13％＝45度，从而对应形成如图9、图11示出的圆角进度图形。以此类推，当安装进度为25％、50％、75％时，对应形成如图12、图13和图14示出的圆角进度图形。

步骤102，调用支持可缩放矢量图形的绘制工具。

示例性地，调用支持可缩放矢量图形的绘制工具，可以通过调用SVG绘制工具实现，也可以通过调用HTML5的Canvas API来实现，后续步骤以调用SVG绘制工具为例进行说明。

步骤103，在待渲染图形区域中加载正方形区域。

以调用SVG绘制工具为例，基于SVG节点中指示的参数height、width，在待渲染的图形区域中设定正方形的尺寸，单位为像素。

步骤104，在正方形区域的直角区域绘制圆角边框。

参见图5示出的绘制圆角边框的一个可选的示意图，以调用SVG绘制工具为例，基于SVG节点中指示的边框半径(border-radius)在正方形的直角区域绘制圆角边框。

由于SVG绘制工具直接提供形成圆角的功能，因此，可以避免前述的使用HACK方法导致的绘制圆角复杂的问题。

border-radius可以同时设置有1到4个值(单位为像素)，用于控制正方形的4个直角区域所形成的圆角的半径(边框半径)，例如：

如果设置有1个值，表示4个圆角都使用这个值。如果设置有两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置有三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

步骤105，从正方形的中心点绘制直线到扇形起点。

参见图6示出的从中心点绘制直线到扇形起点的一个可选的示意图，以调用SVG绘制工具为例，调用SVG路径L命令，基于SVG节点中指示的扇形起点的位置，绘制从中心点到扇形起点的直线。

步骤106，在以中心点为圆心的圆形上，以从中心点至扇形起点的距离为半径，从扇形起点绘制弧线直至偏移扇形起点至偏移角度的扇形终点。

参见图7示出的绘制弧形的一个可选的示意图，以调用SVG绘制工具为例，调用SVG路径A命令，基于SVG节点中指示的扇形终点的位置，在以从中心点至扇形起点的距离为半径的圆上，基于弧线方向标识所指示的顺时针方向或逆时针方向绘制弧形。在图7中，以顺时针方向为例，以扇形起点为起点，从扇形起点沿相应的顺时针方向或逆时针方向绘制弧线在圆上绘制弧形，直至偏移扇形起点为预定的偏移角度的扇形终点。

需要指出的是，为了在圆角正方形内部尽可能大的区域实现进度变化的动态效果，中心点与扇形起点之间的距离大于或等于正方形对角线的一半。

步骤107，封闭从扇形终点至中心点，在正方形区域内形成对应圆角进度图形的封闭区域。

参见图8示出的绘制弧形的一个可选的示意图，以调用SVG绘制工具为例，调用SVG路径M命令，基于SVG节点中指示的扇形终点和中心点的位置，封闭从扇形终点至中心点，也就是绘制从扇形终点至中心点的直线。

参见图9示出的圆角进度图形的一个可选的示意图，弧形的半径为正方形区域对角线的二分之一，以半径、偏移角度(在图9中，偏移角度为10度)绘制的扇形与圆角正方形区域形成交集(圆角正方形与圆形的相交部分，也即斜线阴影覆盖的部分)，圆角正方形区域中除交集的封闭区域构成圆角进度。

在一个实施例中，对构成圆角进度图形的封闭区域可以渲染透明度属性和颜色属性至少之一，在图9中以斜线阴影表示渲染透明度属性和颜色属性至少之一的视觉效果，形成表征进度为2％(10度/360度×100％)的圆角进度图形。

在一个实施例中，为了实现表征不同进度的圆角进度的动画效果，还需要对已经形成的圆角进度图形进行刷新，相应地，参见图10示出的圆角进度图形绘制的一个可选的流程示意图，基于图4，还可以包括以下步骤：

步骤108，基于应用下载或者安装的更新的进度，确定新偏移角度。

步骤109，在正方形区域内绘制形成对应新偏移角度的封闭区域，使用新偏移角度的封闭区域刷新对应历史偏移角度的封闭区域。

示例性地，图8中示出了偏移角度为10度的圆角进度图形对应的封闭区域，随着偏移角度沿顺时针方向的增长，图11至图14示出了偏移角度为45度、90度、180度、270度时，在圆角正方形区域中，以前述半径、相应偏移角度绘制的扇形与圆角正方形区域的交集之外的封闭区域，形成对应不同偏移角度的封闭区域。当然，对应偏移角度的封闭区域可以渲染颜色以突出视觉效果。

在一个实施例中，偏移角度对应的封闭区域的刷新可以通过读取定时器的方式实现，例如，读取定时器在定时时间到达时，计算形成新的偏移角度，设为10度，相应地，执行前述步骤102至步骤107，形成如图10所示的偏移角度为10度的圆角进度图形；之后，再次读取定时器，在定时时间到达时计算新的偏移角度，设为45度，相应地，执行前述步骤102至步骤107，形成如图11所示的偏移角度为45度的圆角进度图形。以此类推，圆角进度图形的偏移角度不断增大，形成如图12至14示出的不同偏移角度的圆角进度图形。

需要说明的是，在图10至图14中以绘制弧形的方向为顺时针为例进行说明，基于图10至图14中以顺时针方向绘制圆角进度图形的说明，可以轻易实施以逆时针方向绘制弧形而形成表征不同进度的圆角进度图形。

前述形成的圆角进度图形，如图9、图10至图14示出的圆角进度图形，在图形界面上表现为不同圆心角的封闭区域(相当于在圆角正方形区域去除相应偏移角度的扇形区域而得到)，为了实现表征不同应用的进度(下载进度或安装进度)的效果，可以着色处理(设置透明度或颜色)的圆角进度图形作为图层叠加到应用的圆角图标的图层之上，从而形成表征进度的圆角进度图标。

相应地，参见图15示出的绘制圆角进度图形的一个可选的流程示意图，基于图4，还可以包括以下步骤：

步骤110，将对应不同进度的圆角进度图形的封闭区域分别与目标应用的圆角图标合成，基于合成结果渲染形成用于表征不同进度的圆角进度图标。

例如设置0透明度，将表征不同进度的圆角进度图形(进行渲染后的封闭区域)以叠加在目标应用的圆角图标之上的方式进行合成，渲染合成的圆角进度图标，后续，通过应用的进度绘制新的圆角进度图形，并利用新的圆角进度图形刷新之前在应用的圆角图形上叠加的圆角进度图形(也就是历史圆角进度图形)，随着进度的增大，圆角进度图标中应用的图标因构成圆角进度图形的封闭区域的减小，显露的部分依次增大，从而起到实时提示进度的效果。

仍以调用SVG路径命令，再结合一个绘制圆角进度图形的具体示例进行说明，参见图16示出的绘制圆角进度图形的一个可选的流程示意图，包括以下步骤：

步骤201，指定正方形块S，宽度为w，中心点为Center(M)，坐标为(w/2，w/2)。

步骤202，从Center(M)画直线(L)到扇形起点Start。

扇形起点Start坐标为(w/2，w/2-r)，其中，r＝w*Math.sqrt(2)，sqrt(2)函数返回一个数的平方根；r取值是w的

使圆角扇形超出正方形块S，最终与S产生的交集视觉效果就是构成圆角进度图形的扇形。

步骤203，以Start为起点，终点为End绘制弧线。

终点End坐标计算为(w/2+r*sin(alpha)，w/2-r*cos(alpha))，并且若alpha大于180度，则取large-arc-flag为0，否则为1，large-arc-flag表示角度大小，决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。

sweep-flag取0(从Start到End弧形为逆时针)，x-axis-rotation(x-axis-rotation表示x轴旋转角度)取0，确定这5个参数(Start，End，large-arc-flag，sweep-flag，x-axis-rotation)，利用SVG路径命令(A)，可确认唯一的弧形；sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。

步骤204，从End点闭合(Z)到中心点Center，并着色即可形成偏移角度为alpha的扇形。

步骤205，设置S的border-radius，绘制角度为alpha的圆角扇形视觉效果。

border-radius用来设置边框圆角，当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果，影响如边框圆角效果。

步骤206，定时更新alpha值，动态计算End，刷新构成圆角进度图形的扇形区域，从而实现圆角下载进度动画。

针对上述处理的核心伪代码说明如下：

首先，设置SVG节点，并指定SVG节点的样式属性：宽度width，高度height，边框圆角属性border-radius并指定宽度和高度，及边框圆角属性，如下

<SVG style＝"width:100px；height:100px；border-radius:10px；">

<path id＝'arc'd＝”fill＝'rgba(33，32，32，.2)'></path>

</SVG>

其次，设置指定偏移角度的path属性d为以下值：

如图17所示，通过指定五元组(圆心Start，圆弧固定起点，圆弧偏移角度，圆弧的方向，圆弧角度标记位)，来唯一表示指定扇形，其中圆弧的方向为逆时针。扇形区域与SVG正方形块相交部分即为圆角进度，如图9所示，圆形影与圆角正方形红色相交区域为当前进度为25％的圆角进度，此时偏移角度为90度。

再次，设置定时器，定时更新圆弧偏移角度来实时更新圆角进度。

图9、图10至图14示意描述偏移角度alpha从0到360度变化时的圆角进度图形的各关键帧。

再对前述终端的逻辑功能结构进行说明，参见图18示出的移动终端的一个可选的逻辑结构示意图，需要指出的是，图18中的逻辑功能单元可以进行进一步的拆分或者合并，因此终端的逻辑功能结构不限于图18示出的形式；在图18中，终端包括：偏移角度确定单元31、圆角边框绘制单元32、封闭区域绘制单元33、渲染单元34和合成单元35。图18中各单元可由图3中示出的处理器21通过执行存储介质24中存储的可执行指令来实现，以下对各单元进行说明。

偏移角度确定单元31，用于基于目标应用下载或者安装的进度，确定与进度相应的偏移角度。

例如，从终端操作系统的下载器中读取应用的安装包的下载进度，特别地，当终端在同时下载多个应用的安装包时，读取每个应用的安装包的下载进度，基于下载进度计算偏移角度的偏移角度，例如当下载进度为4％时，偏移角度的偏移角度为360度×4％＝15度，当下载进度为13％时，偏移角度的偏移角度为360度×13％＝45度，从而对应形成如图9、图11示出的偏移角度。以此类推，当下载进度为25％、50％、75％时，对应形成如图12、图13和图14示出的偏移角度。

圆角边框绘制单元32，用于调用支持可缩放矢量图形的绘制工具，在待渲染图形区域中绘制正方形区域，在正方形区域的直角区域绘制圆角边框。

示例性地，圆角边框绘制单元32调用支持可缩放矢量图形的绘制工具，可以通过调用SVG绘制工具实现，也可以通过调用HTML5的Canvas API来实现，后续步骤以调用SVG绘制工具为例进行说明。

以圆角边框绘制单元32调用SVG绘制工具为例，基于SVG节点中指示的参数height、width，在待渲染的图形区域中设定正方形的尺寸，单位为像素。

参见图5示出的绘制圆角边框的一个可选的示意图，以调用SVG绘制工具为例，基于SVG节点中指示的边框半径(border-radius)在正方形的直角区域绘制圆角边框。由于SVG绘制工具直接提供形成圆角的功能，因此，可以避免前述的使用HACK方法导致的绘制圆角复杂的问题。

封闭区域绘制单元33，用于调用支持可缩放矢量图形的绘制工具在正方形区域内绘制形成对应偏移角度的封闭区域。

示例性地，封闭区域绘制单元33包括：起点子单元331、终点子单元332和封闭子单元333(未示出)。

起点子单元331，用于从正方形的中心点绘制直线到扇形起点。

参见图6示出的从中心点绘制直线到扇形起点的一个可选的示意图，以调用SVG绘制工具为例，调用SVG路径L命令，基于SVG节点中指示的扇形起点的位置，绘制从中心点到扇形起点的直线。

终点子单元332，用于在以中心点为圆心、以从中心点至扇形起点的距离为半径的圆形上，从扇形起点绘制弧线直至偏移扇形起点至偏移角度的扇形终点；半径大于或等于正方形区域对角线的二分之一。

终点子单元332基于弧线方向标识所指示的顺时针方向或逆时针方向，从扇形起点沿相应的顺时针方向或逆时针方向绘制弧线，直至偏移扇形起点为预定的偏移角度的扇形终点。

参见图7示出的绘制弧形的一个可选的示意图，以调用SVG绘制工具为例，调用SVG路径A命令，基于SVG节点中指示的扇形终点的位置，在以从中心点至扇形起点的距离为半径的圆上，基于弧线方向标识所指示的顺时针方向或逆时针方向，在图7中，以顺时针方向为例，以扇形起点为起点，从扇形起点沿相应的顺时针方向或逆时针方向绘制弧线在圆上绘制弧形，直至偏移扇形起点为预定的偏移角度的扇形终点。

需要说明的是，在图10至图14中以绘制弧形的方向为顺时针为例进行说明，基于图10至图14中以顺时针方向绘制偏移角度的说明，可以轻易实施以逆时针方向绘制弧形而形成表征不同进度的偏移角度。

需要指出的是，为了在圆角正方形内部尽可能大的区域实现进度变化的动态效果，中心点与扇形起点之间的距离大于或等于正方形对角线的一半。

封闭子单元333，用于封闭从扇形终点至中心点，在正方形区域内形成对应偏移角度的封闭区域。

参见图8示出的绘制弧形的一个可选的示意图，以调用SVG绘制工具为例，调用SVG路径M命令，基于SVG节点中指示的扇形终点和中心点的位置，封闭从扇形终点至中心点，也就是绘制从扇形终点至中心点的直线。

参见图9示出的偏移角度的一个可选的示意图，弧形的半径为正方形区域对角线的二分之一，以半径、偏移角度(在图9中，偏移角度为10度)绘制的扇形与圆角正方形区域形成交集(圆角正方形与圆形的相交部分，也即斜线阴影覆盖的部分)，圆角正方形区域中除交集的封闭区域构成偏移角度。

渲染单元34，用于对封闭区域进行渲染，得到表征目标应用下载或者安装的进度的圆角进度图形，例如将对应偏移角度的封闭区域渲染透明度属性和/或颜色属性。

例如，对构成偏移角度的封闭区域可以设置透明度属性和颜色属性至少之一，在图9中以斜线阴影表示设置透明度属性和颜色属性至少之一的视觉效果，形成表征进度为2％(10度/360度×100％)的偏移角度。

在一个实施例中，为了实现表征不同的偏移角度，还需要对已经形成的偏移角度进行刷新。相应地，偏移角度确定单元31，还用于基于目标应用下载或者安装的更新的进度，确定新偏移角度；

封闭区域绘制单元33，还用于在正方形区域内绘制形成对应新偏移角度的封闭区域，使用新偏移角度的封闭区域刷新对应历史偏移角度的封闭区域。

示例性地，图8中示出了偏移角度为10度的偏移角度，随着偏移角度沿顺时针方向的增长，图11至图14示出了偏移角度为45度、90度、180度、270度时，在圆角正方形区域中，以前述半径、相应偏移角度绘制的扇形与圆角正方形区域的交集之外的封闭区域形成对应不同偏移角度的封闭区域。

在一个实施例中，合成单元35，用于将对应不同进度的所偏移角度的圆角进度图形分别与目标应用的圆角图标合成，基于合成结果渲染形成表征目标应用的不同进度的圆角进度图标。

例如，前述形成的偏移角度，如图9、图10至图14示出的偏移角度，在图形界面上表现为不同圆心角的封闭区域(相当于在圆角正方形区域去除相应偏移角度的扇形区域而得到)，为了实现表征不同应用的进度(下载进度或安装进度)的效果，可以将着色处理(设置透明度或颜色)的偏移角度作为图层叠加到应用的图标的图层之上，从而形成表征不同进度的偏移角度图标。

再例如，如果对偏移角度的封闭区域设置0透明度，当将表征不同进度的封闭区域以叠加在目标应用的圆角图标之上的方式进行合成，渲染合成的偏移角度图标并进行刷新，随着进度的增大，偏移角度图标中应用的图标因偏移角度的封闭区域的减小而显露的部分依次增大，从而起到实时提示进度的效果。

本发明实施例具有以下有益效果：

1)利用SVG技术，只需要设置1个SVG节点来描述圆角进度，然后调用绘图工具，利用SVG路径命令直接绘制圆角进度，从而高效地实现圆角进度条动画；

2)使用可缩放矢量图形的绘制工具如SVG路径命令，或者Canvas API来绘制圆角进度，由于SVG图形在缩放时具有任意缩放而不失真的特点，因此表征渲染时圆角进度的清晰的视觉效果。

3)可缩放矢量图形的绘制工具本身支持边框属性的设置，因此可以根据需要任意设置边框半径并高效绘制，避免了使用前述的hack方法模拟绘制导致的效率低的问题。

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

或者，本发明上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机装置(可以是个人计算机、服务器、或者网络装置等)执行本发明各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储装置、RAM、ROM、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (11)

1.一种应用进度处理方法，其特征在于，所述方法包括：

基于目标应用下载或者安装的进度，确定与所述进度相应的偏移角度；

调用支持可缩放矢量图形的绘制工具创建对应圆角进度图形的可缩放矢量图形节点，执行所述可缩放矢量图形节点中用于描述所述圆角进度图形的文本化指令，以完成以下操作：

基于所述可缩放矢量图形节点中指示的高度、宽度参数在待渲染图形区域中绘制设定尺寸的正方形区域，并基于所述可缩放矢量图形节点中指示的边框半径在所述正方形区域的直角区域绘制圆角边框，以形成圆角正方形区域；

在所述圆角正方形区域内绘制形成对应所述偏移角度的封闭区域；

对所述封闭区域进行渲染，得到表征所述目标应用下载或者安装的进度的所述圆角进度图形，并将所述圆角进度图形作为一个图层叠加在所述目标应用的圆角图标的图层上；

在所述目标应用的所述圆角图标的图层上刷新所述圆角进度图形，以在所述目标应用的所述圆角图标上形成变化的进度。

2.根据权利要求1所述的方法，其特征在于，所述在所述圆角正方形区域内绘制形成对应所述偏移角度的封闭区域，包括：

调用支持可缩放矢量图形的绘制工具执行以下操作：

从所述正方形的中心点绘制直线到扇形起点，在以所述中心点为圆心、以从所述中心点至所述扇形起点的距离为半径的圆形上，从所述扇形起点绘制弧线直至偏移所述扇形起点至偏移角度的扇形终点；所述半径大于或等于所述正方形区域对角线的二分之一；

封闭从所述扇形终点至所述中心点，在所述正方形区域内形成对应所述偏移角度的封闭区域。

3.根据权利要求2所述的方法，其特征在于，所述从所述扇形起点绘制弧线直至偏移所述扇形起点至偏移角度的扇形终点，包括：

基于弧线方向标识所指示的顺时针方向或逆时针方向，从所述扇形起点沿相应的顺时针方向或逆时针方向绘制弧线，直至偏移所述扇形起点为预定的所述偏移角度的扇形终点。

4.根据权利要求2所述的方法，其特征在于，所述对所述封闭区域进行渲染，包括：

将对应所述偏移角度的封闭区域渲染透明度属性和/或颜色属性。

5.根据权利要求1所述的方法，其特征在于，所述在所述目标应用的所述圆角图标的图层上刷新所述圆角进度图形，包括：

基于所述目标应用下载或者安装的更新的进度，确定新偏移角度；

在所述正方形区域内绘制形成对应所述新偏移角度的封闭区域，使用所述新偏移角度的封闭区域刷新对应历史偏移角度的封闭区域。

6.一种终端，其特征在于，所述终端包括：

偏移角度确定单元，用于基于目标应用下载或者安装的进度，确定与所述进度相应的偏移角度；

圆角边框绘制单元，用于调用支持可缩放矢量图形的绘制工具创建对应圆角进度图形的可缩放矢量图形节点，执行所述可缩放矢量图形节点中用于描述所述圆角进度图形的文本化指令，以完成以下操作：

基于所述可缩放矢量图形节点中指示的高度、宽度参数在待渲染图形区域中绘制设定尺寸的正方形区域，并基于所述可缩放矢量图形节点中指示的边框半径在所述正方形区域的直角区域绘制圆角边框，以形成圆角正方形区域；

封闭区域绘制单元，用于调用支持可缩放矢量图形的绘制工具在所述圆角正方形区域内绘制形成对应所述偏移角度的封闭区域；

渲染单元，用于对所述封闭区域进行渲染，得到表征所述目标应用下载或者安装的进度的所述圆角进度图形；

合成单元，用于将所述圆角进度图形作为一个图层叠加在所述目标应用的圆角图标的图层上；

所述封闭区域绘制单元，还用于在所述目标应用的所述圆角图标的图层上刷新所述圆角进度图形，以在所述目标应用的所述圆角图标上形成变化的进度。

7.根据权利要求6所述的终端，其特征在于，所述封闭区域绘制单元，包括：

起点子单元，用于从所述正方形的中心点绘制直线到扇形起点；

终点子单元，用于在以所述中心点为圆心、以从所述中心点至所述扇形起点的距离为半径的圆形上，从所述扇形起点绘制弧线直至偏移所述扇形起点至偏移角度的扇形终点；所述半径大于或等于所述正方形区域对角线的二分之一；

封闭子单元，用于封闭从所述扇形终点至所述中心点，在所述正方形区域内形成对应所述偏移角度的封闭区域。

8.根据权利要求7所述的终端，其特征在于，

所述终点子单元，还用于基于弧线方向标识所指示的顺时针方向或逆时针方向，从所述扇形起点沿相应的顺时针方向或逆时针方向绘制弧线，直至偏移所述扇形起点为预定的所述偏移角度的扇形终点。

9.根据权利要求6所述的终端，其特征在于，

所述渲染单元，还用于将对应所述偏移角度的封闭区域渲染透明度属性和/或颜色属性。

10.根据权利要求6所述的终端，其特征在于，

所述偏移角度确定单元，还用于基于所述目标应用下载或者安装的更新的进度，确定新偏移角度；

所述封闭区域绘制单元，还用于在所述正方形区域内绘制形成对应所述新偏移角度的封闭区域，使用所述新偏移角度的封闭区域刷新对应历史偏移角度的封闭区域。

11.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-5任一项所述的应用进度处理方法。

Images