CN106843639A - 图标的显示方法和图标的显示装置 - Google Patents

Abstract

本发明实施例涉及信息处理技术领域，公开了一种图标的显示方法和图标的显示装置。图标的显示方法应用于终端，其包括：预存图标的基础文件，其中，每一个图标对应一个基础文件；获取图标的属性值；根据基础文件、获取的属性值，生成可伸缩矢量图形SVG文件；在进行图标的显示时，根据SVG文件绘制图标。本发明实施例提供的图标的显示方法和图标的显示装置，针对每一个图标仅需存储一个基础文件，然后根据获取的图标属性生成一个SVG文件，从而无需存储多个文件，大大减小了对终端存储空间的占用。

Description

图标的显示方法和图标的显示装置

技术领域

本发明实施例涉及信息处理技术领域，特别涉及图标的显示方法和图标的显示装置。

背景技术

随着移动终端的发展，手机、平板电脑等移动终端已经成为生活中、工作中不可或缺的工具，从而人们对于移动终端及移动终端内应用程序的易用性、美观性要求越来越高。比如，用户可以根据日期、季节以及个人喜好切换移动终端或者应用程序的主题，使得移动终端或者应用程序可以拥有不同的外观，符合用户的心情。

目前，为了满足用户的这种需求，并且保证在用户切换主题时，保持各种图标与主题风格的统一，通常会为同一图片或动图，在不同主题下，存储相应的文件，在用户切换主题时，加载与主题对应的文件，从而保证主题与图片风格的统一。

但是在实现本发明的过程中，发明人发现现有技术中存在一些问题：虽然为同一图片或动图，在不同主题下，存储相应的文件，在用户切换主题时，通过加载与主题对应的文件，可以保证主题与图片风格的统一，但是却需要占用较多的存储空间，并且需要事先在移动终端内存储不同分辨率的图片以适应当前移动终端的分辨率，更加占用移动终端的存储空间。

发明内容

本发明实施方式的目的在于提供一种图标的显示方法和图标的显示装置，使得存储图标占用的存储资源减少。

为解决上述技术问题，本发明的实施方式提供了一种图标的显示方法应用于终端，包括：预存图标的基础文件，其中，每一个图标对应一个基础文件；获取图标的属性值；根据基础文件、获取的属性值，生成可伸缩矢量图形SVG文件；在进行图标的显示时，根据SVG文件绘制所述图标。

本发明的实施方式还提供了一种图标的显示装置包括：存储模块、获取模块、生成模块以及绘制模块；存储模块用于预存图标的基础文件，其中，每一个图标对应一个基础文件；获取模块用于获取图标的属性值；生成模块用于根据基础文件、获取的属性值，生成可伸缩矢量图形SVG文件；绘制模块用于在进行图标的显示时，根据SVG文件绘制图标。

本发明实施方式相对于现有技术而言，在进行图标显示时，通过提供的根据每一个图标对应的基础文件与获取到的图标的属性值，生成的可伸缩矢量图形SVG文件进行图标绘制的方式，从而无需专门为同一个图标，在不同显示场景下存储多个相应的文件，大大减小了对终端存储空间的占用。

另外，图标的属性值包括颜色值；在获取图标的属性值时，获取显示界面的主题颜色值；在生成可伸缩矢量图形SVG文件时，将获取的主题颜色值赋予SVG文件中用于标识SVG图形颜色的属性值。本发明实施方式提供了一种根据主题颜色，将需要显示的图标绘制为相应颜色图标的具体方法，无需为每一个图标存储多个与不同主题颜色相匹配图标文件，只需要一个基础文件，在切换主题时，将主题颜色更新到SVG文件相对应的属性值实现不同主题颜色的图标显示，从而有效减小了对终端存储空间的占用。

另外，图标的属性值还包括尺寸；在获取图标的属性值时，获取终端的屏幕分辨率，并计算与屏幕分辨率对应的图标尺寸；在生成可伸缩矢量图形SVG文件时，将计算得到的图标尺寸赋予SVG文件中用于标识SVG图形大小的属性值。本发明实施方式提供了一种根据屏幕分辨率，将需要显示的图标绘制为相应尺寸图标的具体方法，无需为同一个图标存储多个与不同屏幕分辨率相匹配的图标文件，可以根据终端的屏幕分辨率，计算与屏幕分辨率相匹配的图标尺寸，将图标尺寸更新到SVG文件相对应的属性值实现不同屏幕分辨率的图标显示，从而有效减小了对终端存储空间的占用。

另外，图标为应用程序里的图标。本发明实施方式中提供的根据SVG文件绘制图标的方法，可以应用于应用程序里的图标，通过为对应的图标生成一个SVG文件的方法，实现了在应用程序里可以根据主题和屏幕分辨率的大小显示匹配的图标，无需额外保存多个图标，减小了应用程序对终端存储空间的占用。

另外，图标为图标尺寸小于预设值的小图标，或者简单线条图标。本发明实施方式中对根据SVG文件进行绘制的图标进行了具体的限制，将图标范围限制为尺寸小于预设值的小图标，或者简单线条的图标，在进行图标显示时，可以快速绘制，在减小对终端存储空间占用的同时，也保证了绘制速度，不影响用户的使用。

附图说明

一个或多个实施例通过与之对应的附图中的图片进行示例性说明，这些示例性说明并不构成对实施例的限定，附图中具有相同参考数字标号的元件表示为类似的元件，除非有特别申明，附图中的图不构成比例限制。

图1是本发明第一实施方式一种图标的显示方法的流程图；

图2是本发明第二实施方式一种图标的显示方法的流程图；

图3是本发明第五实施方式一种图标的显示装置的结构框图；

图4是本发明第六实施方式一种图标的显示装置的结构框图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明的各实施方式进行详细的阐述。然而，本领域的普通技术人员可以理解，在本发明各实施方式中，为了使读者更好地理解本申请而提出了许多技术细节。但是，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请所要求保护的技术方案。

本发明的第一实施方式涉及一种图标的显示方法，具体流程如图1所示。

图1所示的图标的显示方法可以在用户终端中使用，其中该用户终端可以为例如智能手机、平板电脑、个人数字助理、台式电脑、笔记本电脑等等。并且，本实施方式中涉及的图标的显示方法还可以适用于能够安装于上述终端的应用程序里的图标，如QQ、微信、微博、邮箱，等等。此外，本实施方式的图标可以是图片或者动图等。具体而言，图1涉及的图标的显示方法的流程可以包括：

在步骤101中，预存图标的基础文件。

具体的说，在预存图标的基础文件时，为每一个图标对应存储一个基础文件，即每一个图标都有一个与之一一对应的基础文件。

另外，值得一提的是，本实施方式中为每一个图标预存的基础文件中，可以包括与之对应的图标的名称、ID、所属类别，如是某一个应用程序里的图标，还是终端系统里的图标，等等，这里不再一一列举。

在步骤102中，获取图标的属性值。

具体的说，图标的属性值可以包括尺寸，在获取图标的属性值时，具体获取的为终端的屏幕分辨率。

需要说明的是，在实际应用中，终端的类型繁多，其屏幕分辨率的大小也各不相同。为了保证终端系统内的相同图标，或者相同应用程序里的图标在终端的显示界面显示时，可以为了使图标的尺寸与当前的屏幕分辨率相匹配，可以需要在获取到终端的屏幕分辨率后，计算与屏幕分辨率对应的图标尺寸。

在步骤103中，生成可伸缩矢量图形SVG文件。

具体的说，根据基础文件、获取的属性值，生成可伸缩矢量图形SVG文件。

需要说明的是，在生成可伸缩矢量图形SVG文件时，需要将步骤102中计算得到的图标尺寸赋予SVG文件中用于标识SVG图形大小的属性值，从而可以确保后续操作中可以根据该值绘制相应大小的图标。

另外，值得一提的是，本实施方式中生成的SVG文件为XML形式的SVG文件。

具体的，该XML形式的SVG文件可以包括：头文件和文档部分。头文件包括XML文件头定义和SVG绘制区域大小设定信息；文档部分包括元素、附加属性、施加于元素的仿射变换和滤镜特效。

其中，XML文件头定义中可以包含版本号、编码类型等；SVG绘制区域大小设定信息，即用于标识SVG图形大小的属性值，可以为根据SVG文件绘制的图标的宽、高。元素为各种用于绘制图标的标签；附加属性为预设的自定义字段，开发人员可以根据实际需要，赋予内容；施加于元素的仿射变换为平移、旋转、比例、剪切等用于在绘制图标过程中对图标做的变换操作；滤镜特效为模糊、高光、变形、图像合成、线条渐变、径向渐变、阴影、浮凸等用于对绘制好的图标做的特性处理。

在步骤104中，根据SVG文件绘制图标。

具体的说，在进行图标的显示时，根据SVG文件绘制图标。

需要说明的是，本实施方式中，根据SVG文件绘制的图标可以为应用程序里的图标，或者图标尺寸小于预设值的小图标，还或者为简单线条图标。因此，在进行图标显示时，可以快速绘制，在减小对终端存储空间占用的同时，也保证了绘制速度，不影响用户的使用。

现有技术中，为同一图标在不同分辨率下存储了不同的图标文件，在获取终端的屏幕分辨率之后，加载对应的图标，实现了对不同屏幕分辨率的兼容，这种方式显然需要为同一图标存储多个文件。而一个操作系统或者一个应用程序内包含众多图标，而且现在应用程序类型多样，这就导致一部终端中图标占用了太多的存储资源。与现有技术相比，本实施方式对每一个图标仅需要存储一个基础文件，再根据获取的屏幕分辨率生成一个SVG文件，无需为每一个屏幕分辨率存储一个文件，因此，大大减小了对终端存储空间的占用。

本发明的第二实施方式涉及一种图标的显示方法。本实施方式与第一实施方式大致相同，主要区别为：第一实施方式在获取到终端的屏幕分辨率后，需要进行计算得到与屏幕分辨率对应的图标尺寸，然后进行设置，生成SVG文件；本实施方式中在获取到显示界面的主题颜色值后，直接进行设置，生成SVG文件，具体流程如图2所示。

在步骤201中，预存图标的基础文件。

在步骤202中，获取显示界面的主题颜色值。

具体的说，图标的属性值可以包括颜色值，在获取图标的属性值时，具体获取的为显示界面的主题颜色值。

在步骤203中，将主题颜色值赋予SVG文件中用于标识SVG图形颜色的属性值。

具体的说，在生成可伸缩矢量图形SVG文件时，需要将上述步骤202中获取的主题颜色值赋予SVG文件中用于标识SVG图形颜色的属性值，从而可以确保后续操作中可以根据该值绘制相应颜色的图标

在步骤204中，生成可伸缩矢量图形SVG文件。

在步骤205中，根据SVG文件绘制图标。

下面针对一个XML形式的SVG文件中发一段代码进行说明：

如上所示，<？xml version＝"1.0"encoding＝"utf-8"？>为头文件中的XML文件头定义部分，其中version为当前的版本号，encoding为当前的编码类型；vector部分为标识SVG矢量图形的部分，其中height、width、viewportHeight、viewportWidth为用于标识SVG图形大小的高度、宽度、可视界面的高度及宽度；在vector标签下共有3个标签：path、clip-path、group，本发明实施方式中主要利用path标签下的fillColor(用于定义填充路径的颜色，即用于标识SVG图形颜色的属性值)和pathData(绘制路径)实现图标的绘制。

由于可伸缩矢量图形的绘制方式，及用于绘制图标的SVG文件中各个标签的具体用途已经是本领域的公知常识，本领域的技术人员，在根据SVG文件绘制图标时，可以根据实际需要设置和修改SVG文件中的标签及相应属性，此处不再赘述。

与现有技术相比，本实施方式中，为每一个图标存储一个基础文件，无需为不同的主题存储不同的图标文件，切换主题颜色时，只需要将主题颜色值更新到SVG文件的颜色属性值即可实现不同主题下不同颜色的图标的显示，从而大大减小了对存储资源的占用。基于此，可以设置更加丰富多彩的主题颜色，而无需考虑存储图标所占用的存储资源的大小，从而为用户提供更加精彩的视觉体验。

上面各种方法的步骤划分，只是为了描述清楚，实现时可以合并为一个步骤或者对某些步骤进行拆分，分解为多个步骤，只要包含相同的逻辑关系，都在本专利的保护范围内；对算法中或者流程中添加无关紧要的修改或者引入无关紧要的设计，但不改变其算法和流程的核心设计都在该专利的保护范围内。

本发明的第三实施方式涉及一种图标的绘制装置，如图3所示。

图标的显示装置300包括：存储模块301、获取模块302、生成模块303、计算模块304、设置模块305以及绘制模块306。

其中，存储模块301用于预存图标的基础文件，其中，每一个图标对应一个基础文件。

获取模块302用于获取图标的属性值。

具体的说，获取模块302在获取图标的属性值时，具体获取终端的屏幕分辨率。

生成模块303用于根据基础文件、获取的属性值，生成可伸缩矢量图形SVG文件。

计算模块304用于计算与屏幕分辨率对应的图标尺寸。

设置模块305用于在生成模块303生成可伸缩矢量图形SVG文件时，将计算模块304计算得到的图标尺寸赋予SVG文件中用于标识SVG图形大小的属性值。

绘制模块306用于在进行图标的显示时，根据SVG文件绘制图标。

具体的说，在本实施方式中图标的显示装置显示的图标为应用程序里的图标或者为图标尺寸小于预设值的小图标，还或者为简单线条图标。

需要说明的是，用于判断图标尺寸的预设值为开发人员预先设定的，在实际开发中，开发人员可以根据现有可以显示于终端上的图标的尺寸作为衡量标准，根据图标需要显示的场合、终端进行设定；也可以由服务器根据获取到的可以显示与终端界面中的图标的基础文件或者其他含有标识图标大小的文件进行合理计算，设定预设值，在图标尺寸小于预设值时，生成与之对应的SVG文件，实现图标的绘制。通过这种将图标范围限制为尺寸小于预设值的小图标，或者简单线条的图标，或者应用程序中的图标，在进行图标显示时，可以快速绘制，在减小对终端存储空间占用的同时，也保证了绘制速度，不影响用户的使用。

现有技术中，为同一图标在不同分辨率下存储了不同的图标文件，在获取终端的屏幕分辨率之后，加载对应的图标，实现了对不同屏幕分辨率的兼容，这种方式显然需要为同一图标存储多个文件。而一个操作系统或者一个应用程序内包含众多图标，而且现在应用程序类型多样，这就导致一部终端中图标占用了太多的存储资源。与现有技术相比，本实施方式对每一个图标仅需要存储一个基础文件，再根据获取的屏幕分辨率生成一个SVG文件，无需为每一个屏幕分辨率存储一个文件，因此，大大减小了对终端存储空间的占用。

不难发现，本实施方式为与第一实施方式相对应的装置实施例，本实施方式可与第一实施方式互相配合实施。第一实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第一实施方式中。

值得一提的是，本实施方式中所涉及到的各模块均为逻辑模块，在实际应用中，一个逻辑单元可以是一个物理单元，也可以是一个物理单元的一部分，还可以以多个物理单元的组合实现。此外，为了突出本发明的创新部分，本实施方式中并没有将与解决本发明所提出的技术问题关系不太密切的单元引入，但这并不表明本实施方式中不存在其它的单元。

本发明的第四实施方式涉及一种图标的显示装置。本实施方式与第三实施方式大致相同，主要区别为：在第三实施方式中获取模块在获取到终端的屏幕分辨率后，需要经过计算模块进行计算得到与屏幕分辨率对应的图标尺寸，然后由设置模块进行设置，生成SVG文件；在本实施方式中获取模块在获取到显示界面的主题颜色值后，直接通过设置模块进行设置，生成SVG文件，具体模块直接的连接关系如图4所示。

其中，获取模块302在获取图标的属性值时，具体获取显示界面的主题颜色值。

设置模块304用于在生成模块305生成可伸缩矢量图形SVG文件时，将获取模块302获取的主题颜色值赋予SVG文件中用于标识所述SVG图形颜色的属性值。

从而，在用户点击终端的显示界面时，可以直接根据当前显示界面的主题颜色值和基础文件生成的SVG文件进行图标的绘制，实现了终端中显示的图标与主题颜色保持一致。

与现有技术相比，本实施方式中提供的图标的绘制装置，为每一个图标存储一个基础文件，无需为不同的主题存储不同的图标文件，切换主题颜色时，只需要将主题颜色值更新到SVG文件的颜色属性值即可实现不同主题下不同颜色的图标的显示，从而大大减小了对存储资源的占用。基于此，可以设置更加丰富多彩的主题颜色，而无需考虑存储图标所占用的存储资源的大小，从而为用户提供更加精彩的视觉体验。

由于第二实施方式与本实施方式相互对应，因此本实施方式可与第二实施方式互相配合实施。第二实施方式中提到的相关技术细节在本实施方式中依然有效，在第二实施方式中所能达到的技术效果在本实施方式中也同样可以实现，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第二实施方式中。

本领域技术人员可以理解实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本领域的普通技术人员可以理解，上述各实施方式是实现本发明的具体实施例，而在实际应用中，可以在形式上和细节上对其作各种改变，而不偏离本发明的精神和范围。

Claims (10)

1.一种图标的显示方法，其特征在于，应用于终端；所述图标的显示方法包括：

预存图标的基础文件，其中，每一个图标对应一个基础文件；

获取图标的属性值；

根据所述基础文件、获取的所述属性值，生成可伸缩矢量图形SVG文件；

在进行图标的显示时，根据所述SVG文件绘制所述图标。

2.根据权利要求1所述的图标的显示方法，其特征在于，所述图标的属性值包括颜色值；

在获取图标的属性值时，获取所述显示界面的主题颜色值；

在生成可伸缩矢量图形SVG文件时，将获取的所述主题颜色值赋予所述SVG文件中用于标识所述SVG图形颜色的属性值。

3.根据权利要求1或2所述的图标的显示方法，其特征在于，所述图标的属性值还包括尺寸；

在获取图标的属性值时，获取所述终端的屏幕分辨率，并计算与所述屏幕分辨率对应的图标尺寸；

在生成可伸缩矢量图形SVG文件时，将计算得到的所述图标尺寸赋予所述SVG文件中用于标识所述SVG图形大小的属性值。

4.根据权利要求1所述的图标的显示方法，其特征在于，所述图标为应用程序里的图标。

5.根据权利要求1所述的图标的显示方法，其特征在于，所述图标为图标尺寸小于预设值的小图标，或者简单线条图标。

6.一种图标的显示装置，其特征在于，包括：存储模块、获取模块、生成模块以及绘制模块；

所述存储模块用于预存图标的基础文件，其中，每一个图标对应一个基础文件；

所述获取模块用于获取图标的属性值；

所述生成模块用于根据所述基础文件、获取的所述属性值，生成可伸缩矢量图形SVG文件；

所述绘制模块用于在进行图标的显示时，根据所述SVG文件绘制所述图标。

7.根据权利要求6所述的图标的显示装置，其特征在于，所述图标的显示装置还包括设置模块；

所述获取模块在获取图标的属性值时，具体获取所述显示界面的主题颜色值；

所述设置模块用于在所述生成模块生成可伸缩矢量图形SVG文件时，将所述获取模块获取的所述主题颜色值赋予所述SVG文件中用于标识所述SVG图形颜色的属性值。

8.根据权利要求6或7所述的图标的显示装置，其特征在于，所述图标的显示装置还包括：计算模块；

所述获取模块在获取图标的属性值时，具体获取所述终端的屏幕分辨率；

所述计算模块用于计算与所述屏幕分辨率对应的图标尺寸；

设置模块用于在所述生成模块生成可伸缩矢量图形SVG文件时，将所述计算模块计算得到的所述图标尺寸赋予所述SVG文件中用于标识所述SVG图形大小的属性值。

9.根据权利要求6所述的图标的显示装置，其特征在于，所述图标为应用程序里的图标。

10.根据权利要求6所述的图标的显示装置，其特征在于，所述图标为图标尺寸小于预设值的小图标，或者简单线条图标。