图标的处理方法和装置、计算机设备和存储介质与流程

本发明涉及计算机技术领域，特别是涉及一种图标的处理方法和装置、计算机设备和存储介质。

背景技术：

在应用程序和网页的相关页面，常使用图片格式的图标进行展示以引导用户进行相关操作。

由于显示设备的多样化，不同的显示设备具有不同的分辨率，为了适配不同的显示设备以及不同的分辨率下都能清晰显示图标，通常的做法是使用图标字体，利用字体文件取代图片文件。具体地，通过获取任意字体文件，将所需图标替换成某个字符，然后将图标字体嵌入到网页中，调用相应图标编码即可实现。由于图标字体属于矢量图，能够满足不同分辨率清晰显示的要求。

然而，应用程序的同一个显示界面，常常需要显示同一个类型的多个图标。例如，在购物平台的应用中，通常会在付款页面通过展示各合作银行和第三方支付平台的图标，以引导用户进行付款操作。因此，在跳转到付款页面时用户终端需要多次请求网页资源以加载各图标，需要消耗较多的流量。

技术实现要素：

基于此，有必要针对页面显示多个同类型图标时需要多次请求资源以分别加载各图标导致消耗较多流量的问题，提供一种图标的处理方法和装置、计算机设备和存储介质。

为达到上述目的，一个实施例采用以下技术方案：

一种图标的处理方法，包括：

基于矢量图图片的标识，获取对应的矢量图图片，所述矢量图图片集合了至少两个图标的矢量图；

获取对所述矢量图图片中图标的显示指令；

根据所述显示指令，显示对应的图标。

一种图标的处理装置，包括：矢量图获取模块、显示指令获取模块和显示模块；

所述矢量图获取模块，用于基于矢量图图片的标识，获取对应的矢量图图片，所述矢量图图片集合了至少两个图标的矢量图；

所述显示指令获取模块，用于获取对所述矢量图图片中图标的显示指令；

所述显示模块，用于根据所述显示指令，显示对应的图标。

一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上述的图标的处理方法的步骤。

一种存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时，实现上述的图标的处理方法的步骤。

上述的图标的处理方法和装置、计算机设备和存储介质，由于矢量图图片中包括至少两个图标的矢量图信息，根据对图标的显示指令，显示对应图标标识的图标。从而可以将同类型的多个图标制作为一个矢量图图片，用户终端显示同类型的多个图标时，只需要向服务器请求一次矢量图图片即可。并且，矢量图具有能够随意调整尺寸而不会失真的优点，能够满足不同分辨率的需求。

附图说明

图1为一个实施例的终端的内部结构示意图；

图2为一个实施例的图标的处理方法的流程图；

图3为另一个实施例的图标的处理方法的流程图；

图4为一个实施例的矢量图图片的示意图；

图5为一个实施例的根据至少两个图标的矢量图制作得到矢量图图片的步骤的流程图；

图6为一个实施例的图标的处理装置的结构框图；

图7为另一个实施例的图标的处理装置的结构框图；

图8为再一个实施例的图标的处理装置的结构框图。

具体实施方式

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

本发明提供一种图标的处理方法，预先将至少两个图标集合在一个矢量图图片中。开发人员在进行开发时，基于矢量图图片，获取对应的矢量图图片，根据实际需要，输入对矢量图图片中所需的图标的显示指令，根据显示指令，显示对应的图标，给开发人员带来便利。由于能够将同类型的多个图标制作为一个矢量图图片，用户终端显示同类型的多个图标时，只需要向服务器请求一次矢量图图片即可。并且，矢量图具有能够随意调整尺寸而不会失真的优点，能够满足不同分辨率的需求。

图1为一个实施例中的终端的内部结构示意图。如图1所示，终端包括通过系统总线连接的处理器、存储介质、内存、网络接口、显示屏和输入装置。其中，该处理器用于提供计算和控制能力，支撑整个终端的运行。终端的存储介质存储有操作系统以及一种图标的处理装置的计算机程序，该图标的处理装置的计算机程序被处理器执行时，用于实现一种图标的处理方法。终端中的内存为存储介质中的图标的处理装置的运行提供环境，网络接口用于与服务器通信，例如，将开发的应用程序发布在服务器上提供给用户下载。终端的显示屏可以是液晶显示屏或者电子墨水显示屏等，输入装置可以是显示屏上覆盖的触摸层，也可以是外接的键盘、触控板或鼠标等。本领域技术人员可以理解，图1中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的终端的限定，具体的终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

请参照图2，在一个实施例中，提供一种图标的处理方法，该方法运行在如图1所示的终端上，该方法包括以下步骤：

s202：基于矢量图图片的标识，获取对应的矢量图图片，矢量图图片集合了至少两个图标的矢量图。

矢量图，也称为面向对象的图像或绘画图像，在数学上定义为一系列网线连接的点。矢量文件中的图形元素称为对象，每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。矢量图具有文件小，可以无级缩放而不会使图标边缘出现凹凸的锯齿效果的优点。

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

矢量图图片集合了至少两个图标的矢量图。具体的，通过定义各图标的矢量图的位置，将至少两个图标的矢量图整合到一个图片上。

根据矢量图图片的标识，能够获取到对应的矢量图图片。矢量图图片标识可以为矢量图图片的地址。矢量图图片标识也可以为矢量图图片的id号。预先建立各矢量图图片的id与对应存储地址的关系，基于矢量图图片的id，从对应的存储地址获取对应的矢量图图片。

s204：获取对矢量图图片中图标的显示指令。

矢量图图片中包括多个矢量图图标，开发人员可根据场景的实际需要，选择令其中的部分矢量图图标显示。具体地，对矢量图图片中的部分或全部图标使用显示命令，根据显示命令能够获取开发人员需要显示的图标。以矢量图图片包括多个银行的图标为例，事先制作的矢量图图片中可包括全部银行的图标，而在使用中，对于合作的银行的图标使用显示命令，以在购物平台中仅展示与购物平台合作的银行的图标。该矢量图图片的复用性强，可根据需要灵活设置需要展示的图标。

s206：根据显示指令，显示对应的图标。

上述的图标的处理方法，由于矢量图图片中包括至少两个图标的矢量图信息，根据对图标的显示指令，显示对应图标标识的图标。从而可以将同类型的多个图标制作为一个矢量图图片，用户终端显示同类型的多个图标时，只需要向服务器请求一次矢量图图片即可。并且，矢量图具有能够随意调整尺寸而不会失真的优点，能够满足不同分辨率的需求。

图3为另一个实施例的图标的处理方法的流程图，如图3所示，包括以下步骤：

s302：根据至少两个图标的矢量图制作得到矢量图图片。

制作得到的矢量图图片包含了至少两个图标的矢量图。以金融场景银行图标为例，一个实施例的矢量图图片如图4所示，包括三个银行的图标的矢量图。可以理解的是，一个矢量图图片中的图标的矢量图的数量可根据用户界面的显示需要进行设置。以购物平台为例，在用户购物完成后，用户界面需要展示各使用银行的图标，以引导用户进行付款操作。基于此，可预先根据各合作银行的图标制作矢量图图片。可以理解的是，制作的矢量图图片可应用在其它需要通过银行付款的金融场景。

s304：存储矢量图图片，矢量图图片的标识为矢量图图片的存储地址。

本实施例中，矢量图图图片的标识为矢量图图片的存储地址。

s306：基于矢量图图片的标识，获取对应的矢量图图片，矢量图图片集合了至少两个图标的矢量图。

矢量图图片集合了至少两个图标的矢量图。具体地，通过定义各图标的矢量图的位置，将至少两个图标的矢量图整合到一个图片上。

根据矢量图图片的标识，能够获取到对应的矢量图图片。矢量图图片标识可以为矢量图图片的地址。开发人员在开发应用程序的页面过程中，可直接根据矢量图图片的标识，调用对应的矢量图图片，帮助开发人员快速开发，并且能够提高矢量图图片的复用率。

s308：获取对矢量图图片中图标的显示指令；显示指令包括图标标识。

图标标识是矢量图图片中图标的唯一识别标识。显示指令包括图标标识，根据图标标识能够获取开发人员需要显示的图标。

s310：根据显示指令，显示对应的图标。

采用上述的图标的处理方法，可将同类型的多个图标的矢量图制作得到矢量图图片，存储矢量图图片将其存储地址作为矢量图图片的存储地址，从而开发人员根据矢量图图片的标识，调用对应的矢量图图片进行使用，无需额外再花费时间处理各图标，从而提高了开发人员的处理效率以及矢量图图片的复用率。开发人员在开发过程中，可结合正开发的应用的用户界面的实际需要，输入需要显示的图标标识的显示指令以显示对应的标识，从而用户终端显示同类型的多个图标时，只需要向服务器请求一次矢量图图片即可。并且，矢量图具有能够随意调整尺寸而不会失真的优点，能够满足不同分辨率的需求。

具体地，如图5所示，根据至少两个图标的矢量图制作得到矢量图图片的步骤包括s3021至s3023。

s3021：获取至少两个图标的矢量图信息以及各图标的图标标识。

矢量图信息是指能够用语言描述的矢量图的相关信息。本实施例中，矢量图的格式可以为svg(可缩放矢量图形)。svg是基于可扩展标记语言，使用文本描述矢量化的图形的格式。其对应的文件是一个服务于浏览器的xml文件，而不是一个字体或像素的位图，其由浏览器直接渲染xml，在任何大小之下都会保持图像清晰。

传统的图标字体颜色受限，只能被渲染成单色或在高端浏览器中实现渐变色。并且，为了实现最大程度的浏览器支持，需要提供至少四种不同类型的字体文件，包括ttf、woff、eot和svg格式字体，这就导致图标字体的体积较大。而svg图标为矢量图形文件，具有文件尺寸小，支持多彩图标，精确控制图标位置的优点。

svg格式的矢量图在显示时可以呈现图像化的效果，但仍以文本的形式存在。文本以xml代码的方式呈现，记载了矢量图信息，包括存储地址、尺寸信息和路径信息等。通过svg格式的图标的矢量图，能够获取图标的矢量图信息。可以理解的是，图标可以采用记载矢量图信息的其它格式。

图标的图标标识是图标的唯一标识，由开发人员定义。例如，对于图4中的“微众银行”的图标可以设置图标标识为“webank”以方便开发人员调用。

在另一个实施例中，可获取图标对应的其它格式的矢量图，将其转换为svg格式的矢量图以获取图标的矢量图信息。

具体地，获取至少两个图标的矢量图信息的步骤包括：获取至少两个图标的矢量图；调用矢量图工具，获取矢量图的矢量图信息。

矢量图以图片形式展示，为便于开发人员获取其对应的矢量图信息，例如矢量图的路径信息、矢量图的尺寸等属性等，需要通过调用矢量图工具，将获取的图标的矢量图转换为能够可读取其对应的矢量图信息的格式。矢量图工具根据转换后的格式确定。以图标的矢量图的格式为ai格式为例。ai格式是一种矢量图形文件，适用于adobe公司的illustrator软件的输出格式。调用该软件打开图标的ai文件，由工作人员检查ai文件内的图形是否都是通过路径组成的，以避免图标文件的插入栅格化的图片而导致无法获取到路径，无法转换为svg格式的文件。在检测图标的ai文件的图形通过路径组成时，根据开发人员的操作，将ai格式的文件转换为svg格式，以获取矢量图的矢量图信息。svg是开放标准的矢量图形语言，是服务于浏览器的xml文件，利用浏览器可查看每个svg格式图标的矢量图信息。例如，通过adobe公司的illustrator软件将ai格式的文件保存为svg格式。

s3022：对各图标的矢量图信息进行处理，得到各图标对应的矢量图元件。

具体地，分别对每个图标的矢量图信息进行处理，得到与每个图标对应的矢量图元件即每个元件有对应的图标的矢量图。

为得到各图标对应的矢量图元件，具体地，去除矢量图信息中的符合预设条件的无效信息，对去除无效信息后的各图标的矢量图信息添加元件信息、位置信息和图标标识，得到各图标对应的矢量图元件。

在将ai格式的图标的矢量图转换为svg格式的矢量图后，利用浏览器可查看每个svg格式图标的矢量图信息，矢量图信息由一段代码组成。而转换完成后的矢量图信息中可能包含一些与图片内容无关的信息，例如换行符、重复的空格、注释、相关说明等。与图片内容无关的信息即为无效信息，是否为无效信息的判断条件由开发人员根据经验预先设置。在获取到矢量图信息后，根据预设条件去除矢量图信息中的无效信息。

对于去除无效信息后的各图标的矢量图信息，通过浏览器可查看其对应的矢量图信息，即该图标的代码。利用每个图标的代码，为每个图标添加元件信息。一个实施例中的元件信息可以为元件(symbol元素)，在去除无效信息后的各图标的矢量图信息中添加元件信息、位置信息和图标标识，得到各图标识对应的矢量图元件。

s3023：将各矢量图元件集合生成一张矢量图图片。

单个的矢量图元件由一段包括矢量图信息的代码块组成，通过浏览器可查看代码。由于矢量图元件中包括各图标的图标标识、位置信息和矢量图信息，根据各图标的位置信息，将各矢量图元件集合可生成一张矢量图图片。可以理解的是，矢量图图片的格式为svg格式。具体地，分别使用svg的symbol标签包裹各个矢量图元件，从而将各矢量图元件集合生成一张矢量图图片。

矢量图图片中集合了各图标的矢量图元件，对应图标的矢量图不显示。开发人员可根据需要，对需要显示的图标的矢量图元件使用显示命令。具体地，显示命令指定图标标识，根据显示命令，只显示矢量图图片中与图标标识对应的图标。在具体的实施方式中，显示命令为svg中的使用元素(use)，对需要显示的图标使用显示命令后显示。

采用上述的图标的处理方法，可将同类型的多个图标的矢量图制作得到矢量图图片，存储矢量图图片将其存储地址作为矢量图图片的存储地址。开发人路人员在使用时根据矢量图图片的标识，调用对应的矢量图图片进行使用，无需额外再花费时间处理各图标，从而提高了开发人员的处理效率以及矢量图图片的复用率。由于将多个图标的矢量图集合在一个矢量图图片中，用户终端显示同类型的多个图标时，只需要向服务器请求一次矢量图图片即可。并且，矢量图具有能够随意调整尺寸而不会失真的优点，能够满足不同分辨率的需求。

图6为一个实施例的一种图标的处理装置的结构框图，如图6所示，一种图标的处理装置包括：矢量图获取模块601、显示指令获取模块602和显示模块603。

矢量图获取模块601，用于基于矢量图图片的标识，获取对应的矢量图图片，矢量图图片集合了至少两个图标的矢量图。

显示指令获取模块602，用于获取对矢量图图片中图标的显示指令。

显示模块603，用于根据显示指令，显示对应的图标。

上述的图标的处理装置，由于矢量图图片中包括至少两个图标的矢量图信息，根据对图标的显示指令，显示对应图标标识的图标。从而可以将同类型的多个图标制作为一个矢量图图片，用户终端显示同类型的多个图标时，只需要向服务器请求一次矢量图图片即可。并且，矢量图具有能够随意调整尺寸而不会失真的优点，能够满足不同分辨率的需求。

图7为另一个实施例的图标的处理装置的结构框图，如图7所示，该图标的处理装置还包括矢量图图片制作模块604和存储模块605。

矢量图图片制作模块604，用于根据至少两个图标的矢量图制作得到矢量图图片。

存储模块605，用于存储矢量图图片，矢量图图片的标识为矢量图图片的存储地址。

如图8所所示，矢量图图片制作模块701包括矢量图信息获取模块7011、处理模块7072和合成模块7073。

矢量图信息获取模块7011，用于获取至少两个图标的矢量图信息以及各图标的图标标识。

具体地，矢量图信息获取模块，用于获取至少两个图标的矢量图，并调用矢量图工具，获取矢量图的矢量图信息。

处理模块7012，用于对各图标的矢量图信息进行处理，得到各图标对应的矢量图元件；矢量图元件包括图标的图标标识、位置信息和矢量图信息。

具体地，处理模块，用于去矢量图信息中的符合预设条件的无效信息，并对去除无效信息后的各图标的矢量图信息添加元件信息、位置信息和图标标识，得到各图标对应的矢量图元件。

合成模块7013，用于将各矢量图元件集合生成一张矢量图图片。

采用上述的图标的处理装置，可将同类型的多个图标的矢量图制作得到矢量图图片，存储矢量图图片将其存储地址作为矢量图图片的存储地址。开发人路人员在使用时根据矢量图图片的标识，调用对应的矢量图图片进行使用，无需额外再花费时间处理各图标，从而提高了开发人员的处理效率以及矢量图图片的复用率。由于将多个图标的矢量图集合在一个矢量图图片中，用户终端显示同类型的多个图标时，只需要向服务器请求一次矢量图图片即可。并且，矢量图具有能够随意调整尺寸而不会失真的优点，能够满足不同分辨率的需求。

一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上述的图标的处理方法的步骤。

一种存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时，实现上述的图标的处理方法的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性的计算机可读取存储介质中，如本发明实施例中，该程序可存储于计算机系统的存储介质中，并被该计算机系统中的至少一个处理器执行，以实现包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(read-onlymemory，rom)或随机存储记忆体(randomaccessmemory，ram)等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

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