CN115731313A - Svg格式的图片的处理方法、装置、设备、介质及产品 - Google Patents

Abstract

本公开实施例涉及一种SVG格式的图片的处理方法、装置、设备、介质及产品，采用SVG格式的UI图片，利用SVG格式的良好的拉伸和缩放性能，提高了UI图片拉伸或缩放后的显示效果。通过从UI图片的XML信息中提取UI图片中的元素的绘制数据，去除XML信息中其他和绘制数据无关的冗余数据，能够在不影响UI图片绘制的情况下，减少数据量，降低UI图片的维护成本以及对用户流量的要求。通过利用UI图片中的元素的绘制数据生成二进制信息格式的图片数据，能够解决SVG格式存在的读写效率低的问题，提高了UI图片的读写效率。

Description

SVG格式的图片的处理方法、装置、设备、介质及产品

技术领域

本公开实施例涉及图片处理技术领域，尤其涉及一种SVG格式的图片的处理方法、装置、设备、介质及产品。

背景技术

目前，车内多媒体屏幕的形状、尺寸和分辨率的大小各异，种类繁多。为了适应不同的屏幕，在诸如车载导航等车载应用程序的软件包中通常会携带多套不同尺寸的用户界面(User Interface，简称UI)资源，导致软件包的体积增加，维护成本提高，对用户流量的要求也更高。但是，即使在这种情况下，软件包携带的多套UI资源仍旧不能适配所有车辆的多媒体屏幕，此时一般需要对软件包中的UI图片进行拉伸或者缩小来对屏幕进行适配，但是拉伸或缩小的操作会图片导致失真，降低适配效果。因此，如何能够满足任意拉伸不模糊变形，又能不增加软件包大小以及性能负担是需要解决的技术问题。

发明内容

为了解决上述技术问题，本公开实施例提供了一种SVG格式的图片的处理方法、装置、设备、介质及产品。

本公开实施例的第一方面提供了一种SVG格式的图片的处理方法，该方法包括：获取可缩放的矢量图形(Scalable Vector Graphics，简称SVG)格式的UI图片；从UI图片的可扩展标记语言(EXtensible Markup Language，简称XML)信息中提取UI图片中的元素的绘制数据，去除XML信息中的其它数据；基于UI图片中的元素的绘制数据，生成UI图片对应的二进制信息格式的图片数据。

本公开实施例的第二方面提供了一种SVG格式的图片的处理装置，该装置包括：

获取模块，用于获取SVG格式的UI图片；

提取模块，用于从UI图片的XML信息中提取UI图片中的元素的绘制数据，去除XML信息中的其它数据；

生成模块，用于基于UI图片中的元素的绘制数据，生成UI图片对应的二进制信息格式的图片数据。

本公开实施例的第三方面提供了一种计算机设备，包括存储器和处理器，其中，存储器中存储有计算机程序，当该计算机程序被处理器执行时，处理器可以执行上述第一方面的方法。

本公开实施例的第四方面提供了一种计算机程序产品，该程序产品存储在存储介质中，当该程序产品被运行时，可以实现上述第一方面的方法。

本公开实施例的第五方面提供了一种计算机可读存储介质，该存储介质种存储有计算机程序，当该计算机程序被执行时，可以实现上述第一方面所述的方法。

本公开实施例提供的技术方案与现有技术相比具有如下优点：

本公开实施例，采用SVG格式的UI图片，利用SVG格式的良好的拉伸和缩放性能，提高了UI图片拉伸或缩放后的显示效果，提高UI图片显示的清晰度。通过利用SVG格式的UI图片的XML信息，从XML信息中提取UI图片中的元素的绘制数据，去除XML信息中其他和绘制数据无关的冗余数据，能够在不影响UI图片绘制的情况下，减少数据量，降低UI图片的维护成本以及对用户流量的要求。通过利用UI图片中的元素的绘制数据，生成二进制信息格式的图片数据，能够利用二进制信息格式读写速度快的优势，解决SVG格式(SVG本质是一种文本格式)存在的读写效率低的问题，提高了UI图片的读写效率。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

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

图1是本公开实施例提供的一种UI图片处理场景的示意图；

图2是本公开实施例提供的一种SVG格式的图片的处理方法的流程示意图；

图3是本公开实施例提供的一种绘制数据的提取方法的流程示意图；

图4是本公开实施例提供的一种扁平化处理方法的示意图；

图5是一种二进制信息格式的图片数据的示意图；

图6是图5中路径信息的一种示例性的示意图；

图7是图5中样式信息的一种示例性的示意图；

图8是本公开实施例提供的一种生成二进制信息格式的图片数据的方法的流程图；

图9是本公开实施例提供的一种二进制信息格式的图片数据的示意图；

图10是本公开实施例提供的一种SVG格式的图片的处理场景的示意图；

图11是本公开实施例提供的一种SVG格式的图片的处理装置的结构示意图；

图12是本公开实施例中的一种计算机设备的结构示意图。

具体实施方式

为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。

如背景技术介绍的那样，相关技术常常需要对UI图片进行拉伸或缩小处理以适配屏幕的大小。但是拉伸或缩小处理会导致UI图片发生变形和模糊的问题，影响显示效果。针对上述问题，通过矢量的方式表示的图片，即SVG格式的图片，能够解决图片拉伸或缩小产生的变形和模糊问题。但是，一方面SVG格式的本质是一种文本格式，其读写效率较低；另一方面，SVG格式的数据中存在大量冗余的数据，造成图片体积较大和读写效率较低，尤其在一些应用程序中常常存在大量的UI图片，单个图片的体积大会导致应用程序整体软件包的体积较大，对安装空间和用户流量要求较高。

针对相关技术存在的上述问题，本公开实施例提供了一种SVG格式的图片的处理方法。示例的，图1是本公开实施例提供的一种UI图片处理场景的示意图。参见图1，在本公开实施例提供的方法中，利用SVG格式的UI图片来解决UI图片拉伸或缩小过程中出现的模糊和变形的问题。同时在获取到SVG格式的UI图片之后，通过利用SVG格式的XML信息来获取UI图片中包含的元素的绘制数据，并去除XML信息中和绘制数据无关的其它数据，即冗余数据。通过去除UI图片中的冗余数据保留绘制数据，在不影响UI图片绘制的情况下，降低UI图片的数据量，减少数据体积，提升读写性能。通过在得到UI图片中的元素的绘制数据之后，利用UI图片中的元素的绘制数据来生成二进制信息格式的图片数据，以二进制信息格式的高读写性能解决SVG格式存在的读写效率低的问题。

为了更好的理解本公开实施例的技术方案，下面结合示例性的实施例对本公开实施例的技术方案进行说明。

图2是本公开实施例提供的一种SVG格式的图片的处理方法的流程示意图。该方法可以由一种计算机设备来执行，该计算机设备可以理解为诸如台式电脑、笔记本电脑、服务器、分布式计算节点等具有计算和处理能力的任意一种设备。如图2所示，该方法包括：

步骤201、获取SVG格式的UI图片。

本公开实施例中的UI图片可以理解为任意一种应用程序的UI图片。该应用程序可以运行在任意一种具有显示和交互功能的设备(比如，车机、手机等，但不局限于车机和手机)上。为了方便理解，在本公开实施例中应用程序可以示例性的理解为车机版的导航应用程序。

在本公开实施例中，应用程序的软件包中可以包括多套用于匹配不同尺寸屏幕的UI资源。每套UI资源中可以包括多张UI图片。在软件包中包括的多套UI资源均不适配屏幕尺寸时，可以通过拉伸或缩小UI图片的方式适应屏幕尺寸。

在一些实施方式中，本公开实施例所称的UI图片可以存储在预设的数据源中。该数据源比如可以是应用程序的服务器，也可以是用于存储UI资源的数据库或者是其他任意具有数据存储和数据交互能力的设备。本公开实施例中的数据源可以集成在用于执行本公开实施例的方法的计算机设备中，也可以独立于该计算机设备之外。计算机设备可以通过预设的协议和数据交互方式，从数据源中获取UI图片。

步骤202、从UI图片的XML信息中提取UI图片中的元素的绘制数据，去除XML信息中的其它数据。

在相关技术中，SVG是使用XML来描述二维图形和绘图程序的语言。SVG格式的UI图片的XML信息中包括UI图片中的元素的分组信息(即group信息)、路径信息(即path信息)、复用信息(即defs信息)、元素的绘制数据的变形信息以及其它和元素绘制无关的信息。

其中，UI图片中的元素可以理解为UI图片中包含的图形。元素的分组信息用于描述哪些元素属于一个分组，元素的分组信息中包括样式信息，该样式信息用于描述分组中包括的元素的样式，比如填充色、描边等信息。元素的路径信息用于描述元素的几何特征或者绘制方法。复用信息中可以包括被多个元素复用的路径信息和/或样式信息。元素的变形信息是用于描述对UI图形中的某一元素的绘制数据进行变形，比如伸缩、移动和旋转等，以得到UI图片中其它元素的绘制数据的信息。比如，UI图片的XML信息中包括针对UI图片中的某一元素(以下简称第一元素)的变形信息，则可以基于该变形信息，对第一元素的绘制数据进行变形处理，得到UI图片中的第二元素的绘制数据。

在本公开实施例中，元素的绘制数据可以包括元素的路径信息和样式信息。

对于非变形得到的元素的绘制数据，在本公开实施例中可以先基于UI图片的XML信息，从XML信息的dom树中获取UI图片中包含的元素的分组信息、路径信息和复用信息。然后，从元素的分组信息、路径信息和复用信息中提取获得UI图片中包含的元素的路径信息和样式信息，从而得到元素的绘制数据。

为了更好理解绘制数据的提取方法，下面以一个示例进行说明。

示例的，图3是本公开实施例提供的一种绘制数据的提取方法的流程示意图，如图3所示，该方法包括步骤301-步骤303：

步骤301、基于UI图片的XML信息，从XML信息的文档对象模型(Document ObjectModel，简称DOM)树中获取UI图片中包含的元素的分组信息、路径信息和复用信息。

实际中，UI图片的XML信息中包括dom树结构，dom树结构中记录了UI图片中的元素的分组信息、路径信息和复用信息。通过遍历SVG格式的UI图片的dom树结构，即可获得UI图片中包含的元素的分组信息、路径信息和复用信息。

其中，在UI图片中，元素的路径信息大致可以分为两类，一类路径信息描述的是元素的几何特征，比如在描述圆形元素时，路径信息中可以包括圆形元素的圆心的坐标信息以及半径的长度信息。另一类路径信息描述的是元素的绘制方法，以矩形元素为例，描述矩形元素绘制方法的路径信息中可以包括矩形一个顶点的坐标以及以该顶点为起始点顺序绘制各条边的方法。在这种情况下，为了增加数据描述的一致性，方便后续的数据处理，在一些实施方式中，在获得UI图片中的元素的分组信息、路径信息和复用信息之后，还可以将获取到的路径信息统一转换成用于描述元素的绘制方法的目标路径信息。其中，在对路径信息进行转换时，可以借助预设的转换工具，通过该工具将描述元素几何特征的路径信息转换成描述元素绘制方法的目标路径信息。

步骤302、基于UI图片中包含的元素的分组信息、路径信息和复用信息，组合生成目标数组。

示例的，在一些实施方式中，可以按照预设规则将UI图片中包含的元素的分组信息、路径信息和复用信息组合到一个数组中，生成目标数据，例如特定领域模型语言(domain-specific modelling language，简称DSL)结构的数组，但不局限于DSL结构的数组。比如，在一些实施方式中，数组的前N列可以用于存放UI图片中的元素的分组信息；第N+1到M列可以用于存放UI图片中的元素的路径信息；第M列到M+i列可以用于存放UI图片中的元素的复用信息，其中，N的大小、M的大小以及M+i的大小可以根据各类信息的数量来定，也可以是预设的大小，多余的列可以用O来补齐。当然这里仅为示例说明而不是对目标数据生成方法的唯一限定。

步骤303、对目标数组进行扁平化处理，生成扁平化后的目标数组，并将扁平化后的目标数组作为绘制数据。

在本公开实施例中，在对目标数组进行扁平化处理时可以仅对目标数据中的部分内容进行扁平化处理，比如仅针对分组信息、路径信息和复用信息中的任意两种数据进行扁平化处理；或者也可以针对整个目标数组中的信息进行扁平化处理。举例来说，图4是本公开实施例提供的一种扁平化处理方法的示意图，如图4所示，该方法可以包括如下步骤401-步骤403：

步骤401、针对目标数组中包含的分组信息，将分组信息中包含的样式信息关联到分组中包含的元素的路径信息上。

其中，将分组信息中包含的样式信息关联到元素的路径信息上，可以理解为将样式信息拼接到元素的路径信息上，比如拼接到路径元素的头部或尾部。

其中，在一些实施方式中，在执行将分组信息关联到元素的路径信息上的操作时，需要以路径信息自身的样式信息为优先。具体来说，即对目标数据进行扁平化处理时，一般可以先根据分组信息，从目标数组中查找分组中包括的元素的路径信息的位置。然后，分别核对查找到的每个路径信息是否已关联了样式信息，比如，路径信息的头部或者尾部，或者其它预设字段上是否携带了样式信息，如果有则确定路径信息已经关联了样式信息，也即路径信息自身已经有了样式信息，在这种情况下，不将分组信息中的样式信息关联到路径信息上。如果路径信息未关联样式信息，即路径信息自身还没有样式信息，则将分组信息中的样式信息关联到路径信息上。

或者，在一些实施方式中，样式信息中还可以携带优先级信息，当路径信息已经关联了样式信息，那么将已关联的样式信息与分组信息中的样式信息进行优先级比较，如果分组信息中的样式信息的优先级更高，则将路径信息的样式信息替换为分组信息中的样式信息，反之，则保持路径信息的样式信息不变。当然，一般分组信息中的样式信息的优先级要低于路径信息自身的样式信息的优先级。

步骤402、针对目标数组中包含的复用信息，将复用信息关联到目标数组中使用复用信息的元素的路径信息上。

与分组信息类似，本公开实施例中将复用信息关联到元素的路径信息上可以理解为将复用信息拼接到使用该复用信息的元素的路径信息的头部或尾部。其中，使用复用信息的元素的信息可以携带在复用信息中，也可以从UI图片的XML信息中获取。

需要说明的是，本公开实施例中所称的复用信息可以包括样式信息和/或路径信息。当复用信息中包括路径信息时，复用该路径信息的元素在目标数组中的路径信息为空。此时，将复用信息中的路径信息关联到元素的路径信息上，可以理解为将复用信息中的路径信息添加到目标数据中用于记录该元素的路径信息的位置上。

步骤403、去除目标数组中包含的分组信息和复用信息，得到扁平化后的目标数组。

需要说明的是，图4仅是一种示例性的扁平化的处理方法，在其他实施方式中也可以对目标数据中任意两种信息进行扁平化处理，具体的处理过程可以参照图4的方法，在这里不在赘述。

通过对目标数据中的信息进行扁平化处理，能够提高数据的可读性，提高绘制数据的提取效率，有利于降低UI图片的数据量和数据的统一化管理。

另外，在一些实施方式中，为了能够进一步减少UI图片的数据量，在得到扁平化后的目标数组之后，还可以对目标数组中未关联样式和/或关联的样式未透明样式的路径信息进行删除处理。由于未关联样式和透明样式的路径信息，一般不会进行绘制，通过删除未关联样式和透明样式的路径信息不会对绘制造成影响，同时能够降低UI图片的数据量，提高数据的读写效率。

步骤203、基于UI图片中的元素的绘制数据，生成UI图片对应的二进制信息格式的图片数据。

示例的，图5是一种二进制信息格式的图片数据的示意图，图6是图5中路径信息的一种示例性的示意图，图7是图5中样式信息的一种示例性的示意图。如图5所示，在一些实施方式中，在经过步骤201-步骤202的处理之后，可以将目标数组中包含的所有元素的路径信息(拼接有样式信息)拼接到一起，然后添加头部信息(比如图片的标识等但不局限于图片的标识)生成得到二进制信息格式的图片数据。如图6所示，在路径信息中可以包括用于记录路径标识的字段Type、记录绘制起点的字段MOVE_TO、绘制横线长度的字段x和绘制竖线长度的字段y。如图7所示，在样式信息中可以包括样式对应的路径的标识的字段Type、用于记录有无填充色的字段、用于记录填充色的色值的字段、用于记录有无描边的字段、用于记录描边的色值的字段和用于记录描边宽度的字段。

当然图5、图6和图7仅为示例说明而不是唯一限定。

本公开实施例，采用SVG格式的UI图片，利用SVG格式的良好的拉伸和缩放性能，提高了UI图片拉伸或缩放后的显示效果，提高UI图片显示的清晰度。通过利用SVG格式的UI图片的XML信息，从XML信息中提取UI图片中的元素的绘制数据，去除XML信息中其他和绘制数据无关的冗余数据，能够在不影响UI图片绘制的情况下，减少数据量，降低UI图片的维护成本以及对用户流量的要求。通过利用UI图片中的元素的绘制数据，生成二进制信息格式的图片数据，能够利用二进制信息格式读写速度快的优势，解决SVG格式(SVG本质是一种文本格式)存在的读写效率低的问题，提高了UI图片的读写效率。

示例的，在一些实施例中，为了提高图片数据的可管理性以及信息的丰富性，还可以在图片数据中添加预设的扩展信息，比如，图8是本公开实施例提供的一种生成二进制信息格式的图片数据的方法的流程图，如图8所示，前述实施例的基础上，二进制信息格式的图片数据的生成方法可以包括如下步骤：

步骤801、获取UI图片的目标信息，目标信息包括UI图片对应的交互状态、昼夜状态以及点九信息中的至少一种。

其中，UI图片的交互状态可以包括原始态、点击态、选中态和禁用态中的至少一种。其中，原始态可以理解为UI图片未被执行任何操作是的状态。点击态可以理解UI图片被点击时的状态或样式。选中态可以理解为UI图片被选中时的状态或样式。禁用态可以理解为UI图片被禁用时的状态或样式。

昼夜状态包括昼状态和夜状态，其中，昼状态的UI图片可以理解为在白天使用的UI图片，夜状态的UI图片可以理解为在夜晚使用的UI图片。

点九信息可以理解为UI图片的四个边的信息，比如坐标、长度、粗细等。

在本公开实施例中，UI图片的交互状态、昼夜状态可以从UI图片的XML信息中获取得到，或者也可以从预设的交互界面上获取用户输入过的交互状态和/或昼夜状态。在本公开实施例中UI图片的点九信息可以直接从UI图片上提取得到。

步骤802、基于UI图片中的元素的绘制数据和目标信息，生成UI图片对应的二进制信息格式的图片数据。

示例的，图9是本公开实施例提供的一种二进制信息格式的图片数据的示意图，如图9所示，在本公开实施例的一种实施方式中，可以将UI图片对应的交互状态、昼夜状态和点九信息中的至少一种目标信息添加到二进制信息格式的图片数据中，其中，在图9中示例性的将目标信息拼接UI图片中所有元素的绘制数据的后面。但是在其它实施方式中，也可以添加在其它位置，比如所有元素的绘制数据的前面等。在这里不做具体限定。

本公开实施例，通过将UI图片对应的交互状态、昼夜状态和点九信息中的至少一种目标信息添加到UI图片对应的二进制信息格式的图片数据中，能够提高二进制信息格式数据的丰富度，以便于按照交互状态、昼夜状态等信息对图片数据进行分类管理，提高图片数据的可管理性。通过点九信息能够提高图片拉伸或缩小的效率，保证图片拉伸或缩小后的显示效果。

图10是本公开实施例提供的一种SVG格式的图片的处理场景的示意图。参见图10，在获取到SVG格式的UI图片之后，首先对SVG格式的图片的XML信息进行解析得到UI图片中的元素的分组信息、复用信息、路径信息。然后针对解析得到的信息进行扁平化处理，将分组信息中的样式信息关联到分组中包含的元素的路径信息上，将复用信息关联到使用该复用信息的元素的路径信息上，然后去除分组信息、复用信息和未关联样式信息或者样式为透明样式的路径信息，此时已经得到UI图片中的部分元素的绘制数据，UI图片中剩余元素的绘制数据需要基于其它元素的绘制数据变形得到，此时从UI图片的XML信息中获取变形信息，然后基于变形信息对已经得到的元素的绘制数据进行变形处理得到剩余元素的绘制数据。最终在得到UI图片中所有元素的绘制数据之后，基于UI图片中所有元素的绘制数据和UI图片的点九信息来生成二进制信息格式的图片数据。

图10的具体执行方式和有益效果可以参见前述实施例，在这里不再赘述。

图11是本公开实施例提供的一种SVG格式的图片的处理装置的结构示意图，该处理装置可以被理解为上述实施例中的计算机设备或者计算机设备中的部分功能模块。参见图11，处理装置1100包括：

获取模块1101，用于获取SVG格式的UI图片；

提取模块1102，用于从所述UI图片的XML信息中提取所述UI图片中的元素的绘制数据，去除所述XML信息中的其它数据；

生成模块1103，用于基于所述UI图片中的元素的绘制数据，生成所述UI图片对应的二进制信息格式的图片数据。

在一种实施方式中，提取模块1102，包括：

获取子模块，用于基于所述UI图片的XML信息，从所述XML信息的dom树中获取所述UI图片中包含的元素的分组信息、路径信息和复用信息；

生成子模块，用于基于所述UI图片中包含的元素的分组信息、路径信息和复用信息，组合生成目标数组；

处理子模块，用于对所述目标数组进行扁平化处理，生成扁平化后的目标数组，并将扁平化后的目标数组作为绘制数据。

在一种实施方式中，处理装置1100还可以包括：

转换模块，用于将获取到的元素的路径信息转换为包含绘制方法的目标路径信息。

在一种实施方式中，处理子模块，用于：

针对所述目标数组中包含的分组信息，将所述分组信息中包含的样式信息关联到分组中包含的元素的路径信息上；

针对所述目标数组中包含的复用信息，将所述复用信息关联到所述目标数组中使用所述复用信息的元素的路径信息上；

去除所述目标数组中包含的分组信息和复用信息，得到扁平化后的目标数组。

在一种实施方式中，处理子模块，用于：

根据分组信息，从所述目标数组中查找分组包括的元素的路径信息；

响应于查找到的路径信息未关联样式信息，则将所述分组信息中的样式信息关联到所述路径信息上；

响应于查找到的路径信息已关联样式信息，则不将所述分组信息中的样式信息关联到所述路径信息中。

在一种实施方式中，处理装置1100还可以包括：

去除模块，用于去除所述目标数组中未关联样式信息和/或关联的样式信息为透明样式的路径信息。

在一种实施方式中，处理装置1100还可以包括：

变形模块，用于响应于所述XML信息中包括针对所述UI图片中的第一元素的变形信息，基于所述变形信息，对所述第一元素的绘制数据进行变形处理，得到所述UI图片中包含的第二元素的绘制数据。

在一种实施方式中，生成模块1103，用于：

获取所述UI图片的目标信息，所述目标信息包括所述UI图片对应的交互状态、昼夜状态以及点九信息中的至少一种，其中所述点九信息包括所述UI图片的边的长度、坐标和粗细；

基于所述UI图片中的元素的绘制数据和所述目标信息，生成所述UI图片对应的二进制信息格式的图片数据。

本公开实施例提供的处理装置能够执行上述任一方法实施例的方法，其执行方式和有益效果类似，在这里不再赘述。

本公开实施例还提供一种计算机设备，其中，包括存储器和处理器，存储器中存储有计算机程序，当所述计算机程序被所述处理器执行时，可以实现上述任一方法实施例的方法。

示例的，图12是本公开实施例中的一种计算机设备的结构示意图。下面具体参考图12，其示出了适于用来实现本公开实施例中的计算机设备1400的结构示意图。本公开实施例中的计算机设备1400可以包括但不限于诸如笔记本电脑、PAD(平板电脑)、台式计算机、服务器等具有计算和数据处理能力的设备。图12示出的计算机设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图12所示，计算机设备1400可以包括处理装置(例如中央处理器、图形处理器等)1401，其可以根据存储在只读存储器(ROM)1402中的程序或者从存储装置1408加载到随机访问存储器(RAM)1403中的程序而执行各种适当的动作和处理。在RAM 1403中，还存储有计算机设备1400操作所需的各种程序和数据。处理装置1401、ROM 1402以及RAM 1403通过总线1404彼此相连。输入/输出(I/O)接口1405也连接至总线1404。

通常，以下装置可以连接至I/O接口1405：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置1406；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置1407；包括例如磁带、硬盘等的存储装置1408；以及通信装置1409。通信装置1409可以允许计算机设备1400与其他设备进行无线或有线通信以交换数据。虽然图12示出了具有各种装置的计算机设备1400，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置1409从网络上被下载和安装，或者从存储装置1408被安装，或者从ROM 1402被安装。在该计算机程序被处理装置1401执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述计算机设备中所包含的；也可以是单独存在，而未装配入该计算机设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被处理装置执行时，使得处理装置：获取SVG格式的UI图片；从UI图片的XML信息中提取UI图片中的元素的绘制数据，去除XML信息中的其它数据；基于UI图片中的元素的绘制数据，生成UI图片对应的二进制信息格式的图片数据。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定。

本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上***(SOC)、复杂可编程逻辑设备(CPLD)等等。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行***、装置或设备使用或与指令执行***、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体***、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

本公开实施例还提供一种计算机可读存储介质，所述存储介质中存储有计算机程序，当所述计算机程序被处理器执行时可以实现上述图2-图10中任一实施例的方法，其执行方式和有益效果类似，在这里不再赘述。

本公开实施例还提供一种计算机程序产品，所述程序产品存储在存储介质中，当所述程序产品运行时，可以实现图2-图10中任一实施例的方法，其执行方式和有益效果类似，在这里不再赘述。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所述的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (12)

1.一种SVG格式的图片的处理方法，其中，包括：

获取SVG格式的UI图片；

从所述UI图片的XML信息中提取所述UI图片中的元素的绘制数据，去除所述XML信息中的其它数据；

基于所述UI图片中的元素的绘制数据，生成所述UI图片对应的二进制信息格式的图片数据。

2.根据权利要求1所述的方法，其中，所述从所述UI图片的XML信息中提取所述UI图片中的元素的绘制数据，去除所述XML信息中的其它数据，包括：

基于所述UI图片的XML信息，从所述XML信息的dom树中获取所述UI图片中包含的元素的分组信息、路径信息和复用信息；

基于所述UI图片中包含的元素的分组信息、路径信息和复用信息，组合生成目标数组；

对所述目标数组进行扁平化处理，生成扁平化后的目标数组，并将扁平化后的目标数组作为绘制数据。

3.根据权利要求2所述的方法，其中，所述基于所述UI图片的XML信息，从所述XML信息的dom树中获取所述UI图片中包含的元素的分组信息、路径信息和复用信息之后，所述方法还包括：

将获取到的元素的路径信息转换为包含绘制方法的目标路径信息。

4.根据权利要求2或3所述的方法，其中，所述对所述目标数组进行扁平化处理，生成扁平化后的目标数组，包括：

针对所述目标数组中包含的分组信息，将所述分组信息中包含的样式信息关联到分组中包含的元素的路径信息上；

针对所述目标数组中包含的复用信息，将所述复用信息关联到所述目标数组中使用所述复用信息的元素的路径信息上；

去除所述目标数组中包含的分组信息和复用信息，得到扁平化后的目标数组。

5.根据权利要求4所述的方法，其中，针对所述目标数组中包含的分组信息，将所述分组信息中包含的样式信息关联到分组中包含的元素的路径信息中，包括：

根据分组信息，从所述目标数组中查找分组包括的元素的路径信息；

响应于查找到的路径信息未关联样式信息，则将所述分组信息中的样式信息关联到所述路径信息上；

响应于查找到的路径信息已关联样式信息，则不将所述分组信息中的样式信息关联到所述路径信息中。

6.根据权利要求4所述的方法，其中，所述去除所述目标数组中包含的分组信息和复用信息，得到扁平化后的目标数组之后，所述方法还包括：

去除所述目标数组中未关联样式信息和/或关联的样式信息为透明样式的路径信息。

7.根据权利要求1所述的方法，其中，所述从所述UI图片的XML信息中提取所述UI图片中的元素的绘制数据，去除所述XML信息中的其它数据之后，所述方法还包括：

响应于所述XML信息中包括针对所述UI图片中的第一元素的变形信息，基于所述变形信息，对所述第一元素的绘制数据进行变形处理，得到所述UI图片中包含的第二元素的绘制数据。

8.根据权利要求1所述的方法，其中，所述基于所述UI图片中的元素的绘制数据，生成所述UI图片对应的二进制信息格式的图片数据，包括：

获取所述UI图片的目标信息，所述目标信息包括所述UI图片对应的交互状态、昼夜状态以及点九信息中的至少一种，其中所述点九信息包括所述UI图片的边的长度、坐标和粗细；

基于所述UI图片中的元素的绘制数据和所述目标信息，生成所述UI图片对应的二进制信息格式的图片数据。

9.一种SVG格式的图片的处理装置，其中，包括：

获取模块，用于获取SVG格式的UI图片；

提取模块，用于从所述UI图片的XML信息中提取所述UI图片中的元素的绘制数据，去除所述XML信息中的其它数据；

生成模块，用于基于所述UI图片中的元素的绘制数据，生成所述UI图片对应的二进制信息格式的图片数据。

10.一种计算机设备，其中，包括存储器和处理器，其中，所述存储器中存储有计算机程序，当所述计算机程序被所述处理器执行时，实现如权利要求1-8中任一项所述的方法。

11.一种计算机可读存储介质，其中，所述存储介质中存储有计算机程序，当所述计算机程序被执行时，实现如权利要求1-8中任一项所述的方法。

12.一种计算机程序产品，其中，所述计算机程序产品存储在存储介质中，所述计算机程序产品被运行时，执行如权利要求1-8中任一项所述的方法。

Images