CN108399172B - 一种矢量图的生成方法和装置 - Google Patents

Abstract

本申请提供一种矢量图的生成方法和装置，该方法包括：从超文本标记语言文档集合中获取出节点；获取所述节点在所述文档集合对应的第一属性信息；利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息；基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据。通过本申请的技术方案，可以将超文本标记语言文档集合转换成矢量图，即将超文本标记语言文档集合转换为高还原度、高度可编辑、结构简单、不冗余的矢量图，该矢量图可以被设计软件(如Sketch、PhotoShop等)导入、编辑，并进行二次开发。

Description

一种矢量图的生成方法和装置

技术领域

本申请涉及互联网技术领域，尤其涉及一种矢量图的生成方法和装置。

背景技术

HTML(Hyper Text Markup Language，超文本标记语言)是可扩展标记语言的一个应用，HTML通过标记符号来标记需要显示的网页中的各部分。网页文件本身是一种文本文件，通过在文本文件中添加HTML，可以告诉浏览器如何显示其中的内容，如：文字如何处理，画面如何安排，图片如何显示等。

HTML文档包括多个节点，且HTML文档中的节点是分层次的，这些节点的层次被称为HTML文档树。可以将HTML文档节点的层次归纳为如下几种关系：包含(如嵌套、父子、继承)关系、并列(如邻居、相邻、兄弟)关系。

SVG(Scalable Vector Graphics，可缩放矢量图形)是可扩展标记语言的另一个应用，是用于描述二维矢量图形的一种图形格式，通过使用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以具有如下优势：可以被非常多的工具(如记事本)读取和修改；尺寸更小、可压缩性更强、可以伸缩扩展；可以在任何分辨率下被高质量地打印。

由于SVG的优势非常明显，因此，目前具有将HTML文档树转换成SVG的需求。而为了将HTML文档树转换成SVG，在传统方式中，可以采用截图技术，对HTML文档树进行截图处理，并将截图后的图像转换为SVG。但是，上述方式得到的SVG无法进行二次开发，即转化后的SVG基本不可用。

发明内容

本申请提供一种矢量图的生成方法，所述方法包括：

从超文本标记语言文档集合中获取出节点；

获取所述节点在所述文档集合对应的第一属性信息；

利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息；

基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据。

本申请提供一种矢量图的生成装置，所述装置包括：

第一获取模块，用于从超文本标记语言文档集合中获取出节点；

第二获取模块，用于获取所述节点在所述文档集合对应的第一属性信息；

确定模块，用于利用第一属性信息确定节点在矢量图对应的第二属性信息；

生成模块，用于基于第二属性信息，在矢量图中记录节点对应的矢量数据。

基于上述技术方案，本申请实施例中，可以利用节点在超文本标记语言文档集合的第一属性信息确定节点在矢量图的第二属性信息，并基于第二属性信息，在矢量图中记录矢量数据。这样，可以将超文本标记语言文档集合转换成矢量图，即转换为高还原度、高度可编辑、结构简单、不冗余的矢量图，该矢量图可以被设计软件(如Sketch、PhotoShop等)导入、编辑，并进行二次开发。

附图说明

为了更加清楚地说明本申请实施例或者现有技术中的技术方案，下面将对本申请实施例或者现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据本申请实施例的这些附图获得其它的附图。

图1是本申请一种实施方式中的矢量图的生成方法的流程图；

图2A-图2G是本申请一种实施方式中的矢量图的生成示意图；

图3是本申请一种实施方式中的矢量图生成设备的硬件结构图；

图4是本申请一种实施方式中的矢量图的生成装置的结构图。

具体实施方式

在本申请使用的术语仅仅是出于描述特定实施例的目的，而非限制本申请。本申请和权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其它含义。还应当理解，本文中使用的术语“和/或”是指包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，此外，所使用的词语“如果”可以被解释成为“在……时”，或者“当……时”，或者“响应于确定”。

本申请实施例中提出一种矢量图的生成方法，该方法可以应用于矢量图生成设备，该矢量图生成设备是指能够生成矢量图的设备，例如，矢量图生成设备可以是终端设备(如PC(Personal Computer，个人计算机)、笔记本电脑、移动终端等)、服务器、数据平台、电商平台等，对此矢量图生成设备的类型不做限制，所有能够生成矢量图的设备均在本申请实施例的保护范围之内。参见图1所示，为该矢量图的生成方法的流程图，该方法可以包括以下步骤：

步骤101，从超文本标记语言文档集合中获取出节点。

其中，该超文本标记语言文档集合可以包括但不限于HTML文档树。

步骤102，获取该节点在该文档集合对应的第一属性信息。

步骤103，利用该第一属性信息确定该节点在矢量图对应的第二属性信息。

步骤104，基于该第二属性信息，在该矢量图中记录该节点对应的矢量数据。

在一个例子中，上述执行顺序只是为了方便描述所给出的一个示例，在实际应用中，还可以改变各步骤之间的执行顺序，对此执行顺序不做限制。

针对步骤101，在一个例子中，针对“从超文本标记语言文档集合中获取出节点”的过程，可以包括但不限于如下方式：从该文档集合中获取出非显示类型的节点；或者，从该文档集合中获取出文本类型的节点；或者，从该文档集合中获取出可缩放矢量图形类型的节点；或者，从该文档集合中获取出元素类型的节点；或者，从该文档集合的可缩放矢量图形类型的节点中获取出文本类型的节点；或者，从该文档集合的元素类型的节点中获取出可缩放矢量图形类型的节点；或者，从该文档集合的元素类型的节点中获取出文本类型的节点。

在一个例子中，在从超文本标记语言文档集合中获取出节点之后，若该节点为非显示类型的节点，则禁止在矢量图中记录该节点对应的矢量数据，即针对该节点不再执行步骤102-步骤104，结束对该节点的处理。若该节点为显示类型的节点，如上述文本类型、可缩放矢量图形类型、元素类型等，则执行步骤102-步骤104。其中，非显示类型可以包括但不限于：脚本类型、注释类型。

针对步骤102-步骤104，在一个例子中，该第一属性信息可以包括但不限于：节点在文档集合对应的第一位置信息和第一样式信息；该第二属性信息可以包括但不限于：节点在矢量图对应的第二位置信息和第二样式信息。

针对步骤102，在一个例子中，针对“获取该节点在该文档集合对应的第一属性信息”的过程，可以包括但不限于如下情况：情况一、若该节点为文本类型的节点，则获取该节点在该文档集合的矩形边界值，并将该矩形边界值确定为该节点的第一位置信息；以及，获取该节点对应的父节点在该文档集合的计算后样式，并将父节点的计算后样式确定为该节点的第一样式信息。

情况二、若该节点为可缩放矢量图形类型的节点，获取该节点在该文档集合的节点坐标，将该节点坐标确定为该节点的第一位置信息；获取该节点在该文档集合的计算后样式，将该节点的计算后样式确定为该节点的第一样式信息。

情况三、若该节点为元素类型的节点，则获取该节点在该文档集合的节点坐标，将该节点坐标确定为该节点的第一位置信息；获取该节点在该文档集合的计算后样式，并将该节点的计算后样式确定为该节点的第一样式信息。

针对情况一，矩形边界值是指：节点在文档集合中的长、宽、距离顶部距离、距离底部距离，这四个要素称为节点在文档集合的矩形边界值。

针对情况一，父节点是指：在文档集合中，当一个节点A包裹另外一个节点B时，则节点A就称为节点B的父节点。此外，在文档集合中，当一个节点B被另外一个节点A包裹时，则节点B就称为节点A的子节点。

针对情况二和情况三，节点坐标是指：在文档集合中，节点所处的绝对位置的坐标值，如节点是矩形时，节点坐标是这个矩形的四个端点的坐标值。

针对情况一、情况二和情况三，计算后样式是指：在样式表语言的作用下，页面中的节点会呈现不同样式，一个节点的最终呈现样式，称为计算后样式。

在一个例子中，若节点为文本类型的节点，则当该节点包括至少两行文字时，还可以对所述至少两行文字进行断行处理。在进行断行处理之后，针对每行文字，根据每行文字对应的矩形边界值，为该行文字添加文本标签。

在一个例子中，针对节点为元素类型的节点的情况：若该节点应用CSS(CascadingStyle Sheets，层叠样式表)转换(如CSS3转换等)，则还可以为该节点添加分组标签。和/或，若该节点为显示元素类型的节点，则还可以判断该节点是否需要有剪切路径包围，如果是，则可以为该节点添加分组标签。和/或，若该节点包括背景图，则还可以为该节点的背景图添加图片标签。

其中，CSS3转换是CSS3中的一种能力，可以对元素类型的节点在HTML文档流中的视觉效果进行转换。显示元素类型的节点是指：可以显示在HTML文档流中的节点。剪切路径是指：对显示元素类型的节点进行剪切，以实现任意形状的技术。分组标签对应矢量图中的<g>标签，可以对关联的显示元素类型的节点进行分组操作。图片标签对应矢量图中的<image>标签，可以显示图片。

在一个例子中，针对节点为元素类型的节点的情况：还可以判断该节点是否包括伪类，若该节点包括伪类，则可以将伪类转换为真实节点，将该真实节点插入到文档集合，将该真实节点确定为从文档集合中获取出的一个节点(步骤101)，在获取出该节点后，可以针对该节点执行步骤102-步骤104。

针对步骤103，在一个例子中，针对“利用该第一属性信息确定该节点在矢量图对应的第二属性信息”的过程，可以具体包括但不限于如下方式：

可以将该节点对应的第一位置信息转换为该节点对应的第二位置信息，并将该节点对应的第一样式信息直接确定为该节点对应的第二样式信息。

针对“将该节点对应的第一位置信息转换为该节点对应的第二位置信息”的过程，可以将该节点对应的第一位置信息直接确定为该节点对应的第二位置信息，或者，基于预设转换策略，将该节点对应的第一位置信息转换为该节点对应的第二位置信息。例如，所述预设转换策略可以包括：按比例缩放第一位置信息、向右平移第一位置信息、向左平移第一位置信息、向上平移第一位置信息、向下平移第一位置信息等，对此预设转换策略不做限制，只要能够将第一位置信息转换为第二位置信息，针对所有节点使用相同的预设转换策略即可。

针对步骤104，在一个例子中，针对“基于该第二属性信息，在该矢量图中记录该节点对应的矢量数据”的过程，可以包括但不限于如下方式：获取该节点在文档集合中的对象数据，并利用预设逻辑将该对象数据转换为可扩展标记语言字符串，并基于该第二属性信息，在可扩展标记语言集合中记录该可扩展标记语言字符串。进一步的，可以将该可扩展标记语言集合中的可扩展标记语言字符串解析成矢量数据，以渲染出矢量图，即得到最终的矢量图。其中，可扩展标记语言可以为XML(Extensible Markup Language，可扩展标记语言)，可扩展标记语言集合可以为XML文档树，可扩展标记语言字符串为XML字符串。

其中，在从文档集合中获取出节点后，可以获取到该节点在文档集合中的对象数据，该对象数据可以是XML字符串，也可以是其它类型的数据。而且，可以预先配置文档集合到矢量图的转换逻辑，将其称为预设逻辑，基于该预设逻辑，可以将对象数据转换为XML字符串，例如，预设逻辑用于将A转换成B，将C转换成D，基于这样的逻辑，就可以将对象数据转换为XML字符串，对此预设逻辑的内容及配置方式不做限制。之后，基于第二位置信息、第二样式信息，可以在XML文档树中记录该XML字符串，即该XML字符串的位置是XML文档树的第二位置信息，该XML字符串的样式是第二样式信息。

针对文档集合中的每个节点，都会采用上述方式进行处理，在不断递归获取文档集合中的每个节点后，就可以将每个节点对应的XML字符串记录到XML文档树中，每个节点的位置是每个节点对应的第二位置信息，每个节点的样式是每个节点对应的第二样式信息，这样，就获得了一段完整的XML树状字符串，该XML树状字符串包含了文档集合中的每个节点的XML字符串。当XML树状字符串被矢量图访问器打开时，XML树状字符串中的每个XML字符串就会被解析成矢量图中的矢量数据，从而渲染出完整的矢量图。

针对本申请实施例的上述技术方案，矢量图可以包括但不限于：SVG。

基于上述技术方案，本申请实施例中，可以利用节点在超文本标记语言文档集合的第一属性信息确定节点在矢量图的第二属性信息，并基于第二属性信息，在矢量图中记录矢量数据。这样，可以将超文本标记语言文档集合转换成矢量图，即转换为高还原度、高度可编辑、结构简单、不冗余的矢量图，该矢量图可以被设计软件(如Sketch、PhotoShop等)导入、编辑，并进行二次开发。

以下结合具体的应用场景，对本申请实施例的上述技术方案进行详细说明。

在一个例子中，如图2A所示，为HTML文档树的一个示例，该HTML文档树可以包括多个节点，且这些节点可以是分层次的。例如，在图2A中，Root element<html>节点是元素类型的节点，Root element<html>节点是Element<head>节点的父节点，并且Root element<html>节点还是Element<body>节点的父节点。Element<head>节点是元素类型的节点，而且，Element<head>节点是Root element<html>节点的子节点，Element<head>节点是Element<title>节点的父节点。Element<title>节点是元素类型的节点，Element<title>节点是Element<head>节点的子节点，Element<title>节点是Text“my title”节点的父节点。Text“my title”节点是文本类型的节点，Text“my title”节点是Element<title>节点的子节点。此外，对于HTML文档树上的其它节点，其层次关系在此不再详加赘述。

如图2B所示，为SVG的一个示例，SVG是用于描述二维矢量图形的一种图形格式，通过使用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。由于SVG的优势非常明显，因此，本申请实施例中提出一种用于将HTML文档树转换成SVG的方案，以下对该方案进行说明。

在一个例子中，该用于将HTML文档树转换成SVG的方案可以应用于矢量图生成设备，该矢量图生成设备是指能够生成SVG的设备，对此矢量图生成设备的类型不做限制，例如，可以为终端设备或者服务器。为了将HTML文档树转换成SVG，可以先执行预处理过程，该预处理过程可以如图2C所示。

在一个例子中，如图2C所示，该预处理过程可以包括但不限于如下步骤：

步骤2101，输入HTML文档树。其中，为了实现将HTML文档树转换成SVG，可以先输入待转换的HTML文档树，如图2A所示，为HTML文档树的一个示例，该HTML文档树可以包括多个节点，且这些节点可以是分层次的。

步骤2102，获取HTML文档树中各节点的位置。

步骤2103，利用HTML文档树中各节点的位置创建SVG布局。

例如，HTML文档树包括两个节点，其位置是：节点1是节点2的父节点，在创建SVG布局时，也可以在SVG中创建两个节点，一个节点是另一个节点的父节点，即SVG布局中各节点的位置与HTML文档树中各节点的位置相同。

步骤2104，初始化SVG为XML字符串类型。

在预处理过程结束后，可以采用递归算法遍历HTML文档树，依次遍历出HTML文档树中的每个节点。针对HTML文档树中的每个节点，其处理过程相同，为了方便描述，后续以遍历出一个节点为例进行说明。在这个节点处理完成后，还可以从HTML文档树中遍历出其它节点，而其它节点的处理过程与该节点的处理过程相同，以此类推，直到遍历完所有节点，后续以一个节点为例。

在一个例子中，如图2D所示，将HTML文档树转换成SVG的方案包括：

步骤2201，从HTML文档树中遍历出一个节点。

步骤2202，获取当前遍历出的节点的类型。其中，该类型可以包括但不限于：非显示类型、文本类型(text)、SVG类型、元素类型(element)。而且，该非显示类型可以包括但不限于：脚本类型(Script)、注释类型(comment)。

其中，可以从HTML文档树中遍历出脚本类型的节点，即类型为脚本类型。或者，可以从HTML文档树中遍历出注释类型的节点，即类型为注释类型。或者，可以从HTML文档树中遍历出文本类型的节点，即类型为文本类型。或者，可以从HTML文档树中遍历出SVG类型的节点，即类型为SVG类型。或者，可以从HTML文档树中遍历出元素类型的节点，即类型为元素类型。

步骤2203，判断节点的类型是否为脚本类型(Script)。

如果是，则执行步骤2208；如果否，则执行步骤2204。

步骤2204，判断节点的类型是否为SVG类型。

如果是，则执行图2E所示的流程；如果否，则执行步骤2205。

步骤2205，判断节点的类型是否为文本类型(text)。

如果是，则执行图2F所示的流程；如果否，则执行步骤2206。

步骤2206，判断节点的类型是否为元素类型(element)。

如果是，则执行图2G所示的流程；如果否，则执行步骤2207。

步骤2207，判断节点的类型是否为注释类型(comment)。

如果是，则执行步骤2208；如果否，则结束流程，即步骤2208。

步骤2208，结束对当前节点的处理，返回步骤2201，从HTML文档树中遍历出下一个节点，下一个节点的处理参见步骤2202以及后续步骤，不再赘述。

在一个例子中，如图2E所示，为节点的类型是SVG类型时，将HTML文档树转换成SVG的方案的一个示意图，该转换过程可以包括如下步骤：

步骤2301，获取该节点在HTML文档树对应的节点坐标。

在一个例子中，节点坐标是指：在HTML文档树中，节点所处的绝对位置的坐标值，如节点是矩形时，节点坐标是这个矩形的四个端点的坐标值。

步骤2302，获取该节点在HTML文档树对应的计算后样式。

在一个例子中，计算后样式是指：在样式表语言的作用下，页面中的节点会呈现不同样式，一个节点的最终呈现样式，称为计算后样式。

步骤2303，将该节点坐标转换为该节点在SVG中对应的位置。

步骤2304，将该计算后样式确定为该节点在SVG中对应的样式。

步骤2305，获取该节点在HTML文档树中的对象数据。

步骤2306，利用预设逻辑将该对象数据转换为XML字符串。

步骤2307，利用该位置和该样式将该XML字符串拼接至XML文档树。

在一个例子中，还可以判断该节点是否存在文本类型的子节点，如果不存在，结束对该节点的处理。如果存在，针对文本类型的子节点，可以采用图2F所示的流程进行处理。而且，当存在文本类型的子节点时，还可以获取所有子节点的计算后样式，并将所有子节点的计算后样式映射至该节点的节点属性。例如，针对SVG类型的该节点，使用<g>标签进行分组操作，通过<g>标签的分组，将所有文本类型的子节点的计算后样式映射至该节点的节点属性上。其中，该节点属性是节点的附加内容，通过该节点属性可以声明多种能力。

在一个例子中，如图2F所示，为节点的类型是文本类型时，将HTML文档树转换成SVG的方案的一个示意图，该转换过程可以包括如下步骤：

步骤2401，获取该节点在HTML文档树对应的矩形边界值。

在一个例子中，上述矩形边界值是指：节点在HTML文档树中的长、宽、距离顶部距离、距离底部距离，这四个要素称为节点的矩形边界值。

在一个例子中，由于文本类型的节点不是矩形框，因此，无法获取到该节点的节点坐标，可以将矩形边界值作为节点在HTML文档树对应的位置。

步骤2402，获取该节点对应的父节点在该HTML文档树的计算后样式。

在一个例子中，计算后样式是指：在样式表语言的作用下，页面中的节点会呈现不同样式，一个节点的最终呈现样式，称为计算后样式。

在一个例子中，父节点是指：在HTML文档树中，当一个节点A包裹另外一个节点B时，则节点A就称为节点B的父节点。此外，在HTML文档树中，当一个节点B被另外一个节点A包裹时，则节点B就称为节点A的子节点。

步骤2403，将该矩形边界值转换为该节点在SVG中对应的位置。

步骤2404，将该父节点的计算后样式确定为该节点在SVG中对应的样式。

步骤2405，获取该节点在HTML文档树中的对象数据。

步骤2406，利用预设逻辑将该对象数据转换为XML字符串。

步骤2407，利用该位置和该样式将该XML字符串拼接至XML文档树。

在一个例子中，针对“将对象数据转换为XML字符串”的过程，由于对象数据是文本类型，因此还可以为对象数据渲染文本容器，即使用该文本容器包裹该对象数据，然后可以将包含对象数据的文本容器转换为XML字符串。

在一个例子中，当节点为文本类型的节点时，该节点还可能包括多行(即至少两行)文字。在此情况下，还可以对多行文字进行断行处理，而在进行断行处理之后，可以针对每行文字，分别获取其对应的矩形边界值，得到多个矩形边界值(即每行对应一个矩形边界值)，这多个矩形边界值组成一个矩形边界值队列。此外，每行文字对应的计算后样式均为父节点的计算后样式。

在一个例子中，针对“对多行文字进行断行处理”的过程，可通过Range API(Application Programming Interface，应用程序编程接口)实现，对此不做限制。

在一个例子中，还可以遍历矩形边界值队列中的每个矩形边界值，每个矩形边界值对应一行文字，这样，可以根据每行文字对应的矩形边界值，为该行文字渲染文本标签，如使用<tspan>标签包裹该矩形边界值对应的该行文字。

在一个例子中，如图2G所示，为节点的类型是元素类型时，将HTML文档树转换成SVG的方案的一个示意图，该转换过程可以包括如下步骤：

步骤2501，获取该节点在HTML文档树对应的节点坐标。

在一个例子中，节点坐标是指：在HTML文档树中，节点所处的绝对位置的坐标值，如节点是矩形时，节点坐标是这个矩形的四个端点的坐标值。

步骤2502，获取该节点在HTML文档树对应的计算后样式。

在一个例子中，计算后样式是指：在样式表语言的作用下，页面中的节点会呈现不同样式，一个节点的最终呈现样式，称为计算后样式。

步骤2503，将该节点坐标转换为该节点在SVG中对应的位置。

步骤2504，将该计算后样式确定为该节点在SVG中对应的样式。

步骤2505，判断该节点是否应用CSS转换(如CSS3转换等)。

如果是，则执行步骤2506，如果否，则执行步骤2507。

步骤2506，为该节点添加分组标签。步骤2506之后，执行步骤2507。

其中，在为该节点添加分组标签之后，还将CSS转换应用到分组属性上。

在一个例子中，CSS3转换是CSS3中的一种能力，CSS3转换可以对元素类型的节点在HTML文档流中的视觉效果进行转换。此外，分组标签对应SVG中的<g>标签，可以对关联的显示元素类型的节点进行分组操作。

步骤2507，判断该节点是否需要有剪切路径包围。

如果是，则执行步骤2508，如果否，则执行步骤2509。

步骤2508，为该节点添加分组标签。步骤2508之后，执行步骤2509。

在一个例子中，当该节点为显示元素类型的节点时，则还可以判断该节点是否需要有剪切路径包围，如果是，则还可以为该节点添加分组标签。

其中，该显示元素类型的节点是指：可以显示在HTML文档流中的节点。该剪切路径是指：对显示元素类型的节点进行剪切，以实现任意形状的技术。

其中，在为该节点添加分组标签之后，还将剪切路径应用到分组属性上。

其中，针对“判断该节点是否需要有剪切路径包围”的过程，可以是判断该节点自身是否需要有剪切路径包围，和/或，判断该节点的子节点是否需要有剪切路径包围。例如，在“判断该节点自身是否需要有剪切路径包围”的过程中，若该节点的路径比该节点的父节点的路径长，则说明该节点需要有剪切路径包围，即需要使用剪切技术对该节点的路径进行剪切处理；若该节点的路径不比该节点的父节点的路径长，则说明该节点不需要有剪切路径包围。例如，在“判断该节点的子节点是否需要有剪切路径包围”的过程中，若该节点的路径比该节点的子节点的路径短，则说明该节点的子节点需要有剪切路径包围，即需要使用剪切技术对该节点的子节点进行剪切处理；若该节点的路径不比该节点的子节点的路径短，则说明该节点的子节点不需要有剪切路径包围。

步骤2509，判断该节点是否有背景图。

如果是，则执行步骤2510，如果否，则执行步骤2511。

步骤2510，渲染该节点的背景图为图片标签。步骤2510后，执行步骤2511。

其中，图片标签可以对应SVG中的<image>标签，可以显示图片。

步骤2511，获取该节点在HTML文档树中的对象数据。

步骤2512，利用预设逻辑将该对象数据转换为XML字符串。

步骤2513，利用该位置和该样式将该XML字符串拼接至XML文档树。

在一个例子中，还可以判断该节点是否包括伪类，若包括伪类，则可以将该伪类转换为真实节点，并将该真实节点插入到HTML文档树。这样，在从HTML文档树中遍历出该真实节点后，返回执行上述步骤2202，在此不再赘述。其中，伪类是附着于元素类型的节点上的类，可以在HTML文档树上显示。

在一个例子中，还可以获取该节点的元素标签名，并对该元素标签名进行SVG标签的映射。其中，针对不同类型的元素标签，其映射结果不同。

在一个例子中，还可以判断该节点是否存在文本类型的子节点，如果存在，针对文本类型的子节点，可以采用图2F所示的流程进行处理。而且，当存在文本类型的子节点时，还可以获取所有子节点的计算后样式，并将所有子节点的计算后样式映射至该节点的节点属性。在另一个例子中，还可以判断该节点是否存在SVG类型的子节点，如果存在，针对SVG类型的子节点，可以采用图2E所示的流程进行处理。而且，当存在SVG类型的子节点时，还可以获取所有子节点的计算后样式，并将所有子节点的计算后样式映射至该节点的节点属性。

针对HTML文档树中的每个节点，都会采用上述图2D-图2G所示流程进行处理，即不断递归遍历HTML文档树中的每个节点，并将每个节点对应的XML字符串记录到XML文档树中，每个节点的位置和样式均与该节点在HTML文档树的位置和样式有关，这样，就获得了一段完整的XML树状字符串，该XML树状字符串包含了HTML文档树中的每个节点的XML字符串。当XML树状字符串被矢量图访问器打开时，该XML树状字符串中的每个XML字符串就会被解析成矢量图中的矢量数据，从而渲染出完整的矢量图，即得到最终的矢量图。

在一个例子中，针对节点在HTML文档树的样式，可使用getComputedStyle API或者getMatchedCSSRules API等方式获取，然后，可以通过枚举SVG中对应样式属性的方式，将节点在HTML文档树中的样式映射成节点在SVG中的样式。此外，针对伪类对应的真实节点在HTML文档树中的样式，可以通过循环遍历样式表，以查找到匹配的样式，然后，可以通过枚举SVG中对应样式属性的方式，将节点在HTML文档树中的样式映射成节点在SVG中的样式。

在一个例子中，针对矩形的圆角显示，还可以使用贝塞尔曲线算法计算出path(路径)的轨迹来处理。针对输入框控件，还可以将输入值、placehoulder(占位符)转换为真实的元素，然后，可以使用linehight(线高度)进行文本居中的处理。针对背景图，还可以使用ClipPath(剪裁路径)切割的方式进行处理。针对矩形元素，还可以增加padding(填充)、margin(边缘)、border(边界)等边界的距离处理方式。此外，还可以进行文字动态计算的居中处理。

在一个例子中，由于使用递归方式将HTML文档树转换成SVG时，会导致结构的扁平化，不同节点之间无嵌套关系或者嵌套关系很少，因此，还可以获取每个节点的真实zIndex(堆叠顺序)值，然后排序节点实现覆盖处理。

基于上述技术方案，本申请实施例中，可以将HTML文档树转换成SVG，即将HTML文档树转换为高还原度、高度可编辑、结构简单、不冗余的SVG，该SVG可以被设计软件(如Sketch(素描)、PhotoShop等)导入、编辑，可以进行二次开发。具体的，UED(UserExperience Design，用户体验设计)用户/前端开发用户可以对SVG进行边框处理、圆角处理、图片处理、transform(转换)、边框ClipPath包裹、文本框控件处理、矩形处理、图标处理等。

基于与上述方法同样的申请构思，本申请实施例还提供一种矢量图的生成装置120，该矢量图的生成装置120可以应用在矢量图生成设备10。其中，矢量图的生成装置120可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在的矢量图生成设备10的处理器11，读取非易失性存储器12中对应的计算机程序指令形成的。从硬件层面而言，如图3所示，为矢量图的生成装置120所在的矢量图生成设备10的一种硬件结构图，除图3所示的处理器11、非易失性存储器12外，矢量图生成设备10还可以包括其它硬件，如负责处理报文的转发芯片、网络接口、内存等；从硬件结构上来讲，矢量图生成设备10还可能是分布式设备，可能包括多个接口卡，以便在硬件层面进行报文处理的扩展。

如图4所示，为矢量图的生成装置的结构图，所述装置具体包括：

第一获取模块1201，用于从超文本标记语言文档集合中获取出节点；第二获取模块1202，用于获取所述节点在所述文档集合对应的第一属性信息；确定模块1203，用于利用第一属性信息确定节点在矢量图对应的第二属性信息；生成模块1204，用于基于第二属性信息，在矢量图中记录节点对应的矢量数据。

在一个例子中，所述第一获取模块1201，具体用于在从超文本标记语言文档集合中获取出节点的过程中，从所述文档集合中获取出非显示类型的节点；或者，从所述文档集合中获取出文本类型的节点；或者，从所述文档集合中获取出可缩放矢量图形类型的节点；或者，从所述文档集合中获取出元素类型的节点；或者，从文档集合的可缩放矢量图形类型的节点中获取出文本类型的节点；或者，从文档集合的元素类型的节点中获取出可缩放矢量图形类型的节点；或者，从所述文档集合的元素类型的节点中获取出文本类型的节点。

在一个例子中，所述第一属性信息包括：所述节点在所述文档集合对应的第一位置信息和第一样式信息；所述第二属性信息包括：所述节点在所述矢量图对应的第二位置信息和第二样式信息。

在一个例子中，所述第二获取模块1202，具体用于在获取所述节点在所述文档集合对应的第一属性信息的过程中：若所述节点为文本类型的节点，则获取所述节点在所述文档集合的矩形边界值，并将所述矩形边界值确定为所述节点的第一位置信息；以及，获取所述节点对应的父节点在所述文档集合的计算后样式，并将所述父节点的计算后样式确定为所述节点的第一样式信息；或者，

若所述节点为可缩放矢量图形类型的节点或者元素类型的节点，获取所述节点在所述文档集合的节点坐标，并将所述节点坐标确定为所述节点的第一位置信息；以及，获取所述节点在所述文档集合的计算后样式，并将所述节点的计算后样式确定为所述节点的第一样式信息。

在一个例子中，所述矢量图的生成装置还包括：处理模块(图中未体现)；

所述处理模块，用于当所述节点为文本类型的节点时，若所述节点包括至少两行文字，则对所述至少两行文字进行断行处理，并根据每行文字对应的矩形边界值，为该行文字添加文本标签；和/或，

当所述节点为元素类型的节点时，若所述节点应用层叠样式表转换，则为所述节点添加分组标签；和/或，若所述节点为显示元素类型的节点，则判断所述节点是否需要有剪切路径包围，如果是，则为所述节点添加分组标签；和/或，若所述节点包括背景图，则为所述节点的背景图添加图片标签；和/或，

当所述节点为元素类型的节点时，若所述节点包括伪类，则将所述伪类转换为真实节点，并将所述真实节点插入到所述文档集合。

在一个例子中，所述确定模块1203，具体用于在利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息的过程中，将所述节点对应的第一位置信息转换为所述节点对应的第二位置信息，并将所述节点对应的第一样式信息确定为所述节点对应的第二样式信息；

所述生成模块1204，具体用于在基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据的过程，获取所述节点在所述文档集合中的对象数据；利用预设逻辑将所述对象数据转换为可扩展标记语言字符串；基于第二属性信息，在可扩展标记语言集合中记录所述可扩展标记语言字符串；将可扩展标记语言集合中的可扩展标记语言字符串解析成矢量数据，以渲染出矢量图。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可以由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其它可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其它可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

而且，这些计算机程序指令也可以存储在能引导计算机或其它可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或者多个流程和/或方框图一个方框或者多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其它可编程数据处理设备上，使得在计算机或者其它可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其它可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可以采用完全硬件实施例、完全软件实施例、或者结合软件和硬件方面的实施例的形式。而且，本申请可以采用在一个或者多个其中包含有计算机可用程序代码的计算机可用存储介质(可以包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (17)

1.一种矢量图的生成方法，其特征在于，所述方法包括：

从超文本标记语言文档集合中获取出节点；

获取所述节点在所述文档集合对应的第一属性信息，所述第一属性信息包括：所述节点在所述文档集合对应的第一位置信息和第一样式信息；具体包括：若所述节点为文本类型的节点，则获取所述节点在所述文档集合的矩形边界值，并将所述矩形边界值确定为所述节点的第一位置信息；获取所述节点对应的父节点在所述文档集合的计算后样式，并将所述父节点的计算后样式确定为所述节点的第一样式信息；

利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息；

基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据。

2.根据权利要求1所述的方法，其特征在于，

所述从超文本标记语言文档集合中获取出节点的过程，具体包括：

从所述文档集合中获取出非显示类型的节点；或者，

从所述文档集合中获取出文本类型的节点；或者，

从所述文档集合中获取出可缩放矢量图形类型的节点；或者，

从所述文档集合中获取出元素类型的节点；或者，

从文档集合的可缩放矢量图形类型的节点中获取出文本类型的节点；或者，

从文档集合的元素类型的节点中获取出可缩放矢量图形类型的节点；或者，

从所述文档集合的元素类型的节点中获取出文本类型的节点。

3.根据权利要求1所述的方法，其特征在于，所述第二属性信息包括：所述节点在所述矢量图对应的第二位置信息和第二样式信息。

4.根据权利要求3所述的方法，其特征在于，所述方法进一步包括：

当所述节点包括至少两行文字时，对所述至少两行文字进行断行处理；

根据每行文字对应的矩形边界值，为该行文字添加文本标签。

5.根据权利要求3所述的方法，其特征在于，所述获取所述节点在所述文档集合对应的第一属性信息的过程，还包括：

若所述节点为可缩放矢量图形类型的节点或者元素类型的节点，获取所述节点在所述文档集合的节点坐标，并将所述节点坐标确定为所述节点的第一位置信息；

获取所述节点在所述文档集合的计算后样式，并将所述节点的计算后样式确定为所述节点的第一样式信息。

6.根据权利要求5所述的方法，其特征在于，

若所述节点为元素类型的节点，所述方法进一步包括：

若所述节点应用层叠样式表转换，则为所述节点添加分组标签；和/或，

若所述节点为显示元素类型的节点，则判断所述节点是否需要有剪切路径包围，如果是，则为所述节点添加分组标签；和/或，

若所述节点包括背景图，则为所述节点的背景图添加图片标签。

7.根据权利要求5所述的方法，其特征在于，

若所述节点为元素类型的节点，所述方法进一步包括：

若所述节点包括伪类，则将所述伪类转换为真实节点；

将所述真实节点插入到所述文档集合；

将所述真实节点确定为从所述文档集合中获取出的一个节点。

8.根据权利要求3所述的方法，其特征在于，所述利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息的过程，具体包括：

将所述节点对应的第一位置信息转换为所述节点对应的第二位置信息；

将所述节点对应的第一样式信息确定为所述节点对应的第二样式信息。

9.根据权利要求1所述的方法，其特征在于，所述基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据的过程，具体包括：

获取所述节点在所述文档集合中的对象数据；

利用预设逻辑将所述对象数据转换为可扩展标记语言字符串；

基于所述第二属性信息，在可扩展标记语言集合中记录所述可扩展标记语言字符串；

将可扩展标记语言集合中的可扩展标记语言字符串解析成矢量数据，以渲染出矢量图。

10.根据权利要求1所述的方法，其特征在于，

所述从超文本标记语言文档集合中获取出节点之后，所述方法进一步包括：

若所述节点为非显示类型的节点，则禁止在所述矢量图中记录所述节点对应的矢量数据；其中，所述非显示类型包括脚本类型、注释类型。

11.根据权利要求1-10任一项所述的方法，其特征在于，

所述矢量图具体包括：可缩放矢量图形；所述文档集合具体为文档树。

12.一种矢量图的生成装置，其特征在于，所述装置包括：

第一获取模块，用于从超文本标记语言文档集合中获取出节点；

第二获取模块，用于获取所述节点在所述文档集合对应的第一属性信息，所述第一属性信息包括：所述节点在所述文档集合对应的第一位置信息和第一样式信息；具体用于：若所述节点为文本类型的节点，则获取所述节点在所述文档集合的矩形边界值，并将所述矩形边界值确定为所述节点的第一位置信息；获取所述节点对应的父节点在所述文档集合的计算后样式，并将所述父节点的计算后样式确定为所述节点的第一样式信息；

确定模块，用于利用第一属性信息确定节点在矢量图对应的第二属性信息；

生成模块，用于基于第二属性信息，在矢量图中记录节点对应的矢量数据。

13.根据权利要求12所述的装置，其特征在于，

所述第一获取模块，具体用于在从超文本标记语言文档集合中获取出节点的过程中，从所述文档集合中获取出非显示类型的节点；或者，

从所述文档集合中获取出文本类型的节点；或者，

从所述文档集合中获取出可缩放矢量图形类型的节点；或者，

从所述文档集合中获取出元素类型的节点；或者，

从文档集合的可缩放矢量图形类型的节点中获取出文本类型的节点；或者，

从文档集合的元素类型的节点中获取出可缩放矢量图形类型的节点；或者，

从所述文档集合的元素类型的节点中获取出文本类型的节点。

14.根据权利要求12所述的装置，其特征在于，所述第二属性信息包括：所述节点在所述矢量图对应的第二位置信息和第二样式信息。

15.根据权利要求14所述的装置，其特征在于，所述第二获取模块，还用于在获取所述节点在所述文档集合对应的第一属性信息的过程中：

若所述节点为可缩放矢量图形类型的节点或者元素类型的节点，获取所述节点在所述文档集合的节点坐标，并将所述节点坐标确定为所述节点的第一位置信息；以及，获取所述节点在所述文档集合的计算后样式，并将所述节点的计算后样式确定为所述节点的第一样式信息。

16.根据权利要求15所述的装置，其特征在于，还包括：处理模块；

所述处理模块，用于当所述节点为文本类型的节点时，若所述节点包括至少两行文字，则对所述至少两行文字进行断行处理，并根据每行文字对应的矩形边界值，为该行文字添加文本标签；和/或，

当所述节点为元素类型的节点时，若所述节点应用层叠样式表转换，则为所述节点添加分组标签；和/或，若所述节点为显示元素类型的节点，则判断所述节点是否需要有剪切路径包围，如果是，则为所述节点添加分组标签；和/或，若所述节点包括背景图，则为所述节点的背景图添加图片标签；和/或，

当所述节点为元素类型的节点时，若所述节点包括伪类，则将所述伪类转换为真实节点，并将所述真实节点插入到所述文档集合。

17.根据权利要求14所述的装置，其特征在于，所述确定模块，具体用于在利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息的过程中，将所述节点对应的第一位置信息转换为所述节点对应的第二位置信息，并将所述节点对应的第一样式信息确定为所述节点对应的第二样式信息；

所述生成模块，具体用于在基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据的过程中，获取所述节点在所述文档集合中的对象数据；利用预设逻辑将所述对象数据转换为可扩展标记语言字符串；基于第二属性信息，在可扩展标记语言集合中记录所述可扩展标记语言字符串；将可扩展标记语言集合中的可扩展标记语言字符串解析成矢量数据，以渲染出矢量图。

Images