一种矢量图的生成方法和装置制造方法及图纸

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

Method and device for generating vector diagram

The present application provides a method and apparatus for generating vector graphs, which include: obtaining a node from a hypertext markup language document set; obtaining the first attribute information corresponding to the node in the document set; determining the second attribute information corresponding to the node in the vector graph using the first attribute information; and based on The second attribute information records the vector data corresponding to the nodes in the vector graph. Through the technical scheme of the application, the hypertext markup language document set can be converted into a vector graph, that is, the hypertext markup language document set can be converted into a vector graph with high reducibility, high editability, simple structure and no redundancy. The vector graph can be imported, edited and advanced by design software (such as Sketch, PhotoShop, etc.). For the two time.

【技术实现步骤摘要】
一种矢量图的生成方法和装置
本申请涉及互联网
，尤其涉及一种矢量图的生成方法和装置。
技术介绍
HTML(HyperTextMarkupLanguage，超文本标记语言)是可扩展标记语言的一个应用，HTML通过标记符号来标记需要显示的网页中的各部分。网页文件本身是一种文本文件，通过在文本文件中添加HTML，可以告诉浏览器如何显示其中的内容，如：文字如何处理，画面如何安排，图片如何显示等。HTML文档包括多个节点，且HTML文档中的节点是分层次的，这些节点的层次被称为HTML文档树。可以将HTML文档节点的层次归纳为如下几种关系：包含(如嵌套、父子、继承)关系、并列(如邻居、相邻、兄弟)关系。SVG(ScalableVectorGraphics，可缩放矢量图形)是可扩展标记语言的另一个应用，是用于描述二维矢量图形的一种图形格式，通过使用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以具有如下优势：可以被非常多的工具(如记事本)读取和修改；尺寸更小、可压缩性更强、可以伸缩扩展；可以在任何分辨率下被高质量地打印。由于SVG的优势非常明显，因此，目前具有将HTML文档树转换成SVG的需求。而为了将HTML文档树转换成SVG，在传统方式中，可以采用截图技术，对HTML文档树进行截图处理，并将截图后的图像转换为SVG。但是，上述方式得到的SVG无法进行二次开发，即转化后的SVG基本不可用。
技术实现思路
本申请提供一种矢量图的生成方法，所述方法包括：从超文本标记语言文档集合中获取出节点；获取所述节点在所述文档集合对应的第一属性信息；利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息；基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据。本申请提供一种矢量图的生成装置，所述装置包括：第一获取模块，用于从超文本标记语言文档集合中获取出节点；第二获取模块，用于获取所述节点在所述文档集合对应的第一属性信息；确定模块，用于利用第一属性信息确定节点在矢量图对应的第二属性信息；生成模块，用于基于第二属性信息，在矢量图中记录节点对应的矢量数据。基于上述技术方案，本申请实施例中，可以利用节点在超文本标记语言文档集合的第一属性信息确定节点在矢量图的第二属性信息，并基于第二属性信息，在矢量图中记录矢量数据。这样，可以将超文本标记语言文档集合转换成矢量图，即转换为高还原度、高度可编辑、结构简单、不冗余的矢量图，该矢量图可以被设计软件(如Sketch、PhotoShop等)导入、编辑，并进行二次开发。附图说明为了更加清楚地说明本申请实施例或者现有技术中的技术方案，下面将对本申请实施例或者现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据本申请实施例的这些附图获得其它的附图。图1是本申请一种实施方式中的矢量图的生成方法的流程图；图2A-图2G是本申请一种实施方式中的矢量图的生成示意图；图3是本申请一种实施方式中的矢量图生成设备的硬件结构图；图4是本申请一种实施方式中的矢量图的生成装置的结构图。具体实施方式在本申请使用的术语仅仅是出于描述特定实施例的目的，而非限制本申请。本申请和权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其它含义。还应当理解，本文中使用的术语“和/或”是指包含一个或多个相关联的列出项目的任何或所有可能组合。应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，此外，所使用的词语“如果”可以被解释成为“在……时”，或者“当……时”，或者“响应于确定”。本申请实施例中提出一种矢量图的生成方法，该方法可以应用于矢量图生成设备，该矢量图生成设备是指能够生成矢量图的设备，例如，矢量图生成设备可以是终端设备(如PC(PersonalComputer，个人计算机)、笔记本电脑、移动终端等)、服务器、数据平台、电商平台等，对此矢量图生成设备的类型不做限制，所有能够生成矢量图的设备均在本申请实施例的保护范围之内。参见图1所示，为该矢量图的生成方法的流程图，该方法可以包括以下步骤：步骤101，从超文本标记语言文档集合中获取出节点。其中，该超文本标记语言文档集合可以包括但不限于HTML文档树。步骤102，获取该节点在该文档集合对应的第一属性信息。步骤103，利用该第一属性信息确定该节点在矢量图对应的第二属性信息。步骤104，基于该第二属性信息，在该矢量图中记录该节点对应的矢量数据。在一个例子中，上述执行顺序只是为了方便描述所给出的一个示例，在实际应用中，还可以改变各步骤之间的执行顺序，对此执行顺序不做限制。针对步骤101，在一个例子中，针对“从超文本标记语言文档集合中获取出节点”的过程，可以包括但不限于如下方式：从该文档集合中获取出非显示类型的节点；或者，从该文档集合中获取出文本类型的节点；或者，从该文档集合中获取出可缩放矢量图形类型的节点；或者，从该文档集合中获取出元素类型的节点；或者，从该文档集合的可缩放矢量图形类型的节点中获取出文本类型的节点；或者，从该文档集合的元素类型的节点中获取出可缩放矢量图形类型的节点；或者，从该文档集合的元素类型的节点中获取出文本类型的节点。在一个例子中，在从超文本标记语言文档集合中获取出节点之后，若该节点为非显示类型的节点，则禁止在矢量图中记录该节点对应的矢量数据，即针对该节点不再执行步骤102-步骤104，结束对该节点的处理。若该节点为显示类型的节点，如上述文本类型、可缩放矢量图形类型、元素类型等，则执行步骤102-步骤104。其中，非显示类型可以包括但不限于：脚本类型、注释类型。针对步骤102-步骤104，在一个例子中，该第一属性信息可以包括但不限于：节点在文档集合对应的第一位置信息和第一样式信息；该第二属性信息可以包括但不限于：节点在矢量图对应的第二位置信息和第二样式信息。针对步骤102，在一个例子中，针对“获取该节点在该文档集合对应的第一属性信息”的过程，可以包括但不限于如下情况：情况一、若该节点为文本类型的节点，则获取该节点在该文档集合的矩形边界值，并将该矩形边界值确定为该节点的第一位置信息；以及，获取该节点对应的父节点在该文档集合的计算后样式，并将父节点的计算后样式确定为该节点的第一样式信息。情况二、若该节点为可缩放矢量图形类型的节点，获取该节点在该文档集合的节点坐标，将该节点坐标确定为该节点的第一位置信息；获取该节点在该文档集合的计算后样式，将该节点的计算后样式确定为该节点的第一样式信息。情况三、若该节点为元素类型的节点，则获取该节点在该文档集合的节点坐标，将该节点坐标确定为该节点的第一位置信息；获取该节点在该文档集合的计算后样式，并将该节点的计算后样式确定为该节点的第一样式信息。针对情况一，矩形边界值是指：节点在文档集合中的长、宽、距离顶部距离、距离底部距离，这四个要素称为节点在文档集合的本文档来自技高网...

【技术保护点】
1.一种矢量图的生成方法，其特征在于，所述方法包括：从超文本标记语言文档集合中获取出节点；获取所述节点在所述文档集合对应的第一属性信息；利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息；基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据。

【技术特征摘要】
1.一种矢量图的生成方法，其特征在于，所述方法包括：从超文本标记语言文档集合中获取出节点；获取所述节点在所述文档集合对应的第一属性信息；利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息；基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据。2.根据权利要求1所述的方法，其特征在于，所述从超文本标记语言文档集合中获取出节点的过程，具体包括：从所述文档集合中获取出非显示类型的节点；或者，从所述文档集合中获取出文本类型的节点；或者，从所述文档集合中获取出可缩放矢量图形类型的节点；或者，从所述文档集合中获取出元素类型的节点；或者，从文档集合的可缩放矢量图形类型的节点中获取出文本类型的节点；或者，从文档集合的元素类型的节点中获取出可缩放矢量图形类型的节点；或者，从所述文档集合的元素类型的节点中获取出文本类型的节点。3.根据权利要求1所述的方法，其特征在于，所述第一属性信息包括：所述节点在所述文档集合对应的第一位置信息和第一样式信息；所述第二属性信息包括：所述节点在所述矢量图对应的第二位置信息和第二样式信息。4.根据权利要求3所述的方法，其特征在于，所述获取所述节点在所述文档集合对应的第一属性信息的过程，具体包括：若所述节点为文本类型的节点，则获取所述节点在所述文档集合的矩形边界值，并将所述矩形边界值确定为所述节点的第一位置信息；获取所述节点对应的父节点在所述文档集合的计算后样式，并将所述父节点的计算后样式确定为所述节点的第一样式信息。5.根据权利要求4所述的方法，其特征在于，所述方法进一步包括：当所述节点包括至少两行文字时，对所述至少两行文字进行断行处理；根据每行文字对应的矩形边界值，为该行文字添加文本标签。6.根据权利要求3所述的方法，其特征在于，所述获取所述节点在所述文档集合对应的第一属性信息的过程，具体包括：若所述节点为可缩放矢量图形类型的节点或者元素类型的节点，获取所述节点在所述文档集合的节点坐标，并将所述节点坐标确定为所述节点的第一位置信息；获取所述节点在所述文档集合的计算后样式，并将所述节点的计算后样式确定为所述节点的第一样式信息。7.根据权利要求6所述的方法，其特征在于，若所述节点为元素类型的节点，所述方法进一步包括：若所述节点应用层叠样式表转换，则为所述节点添加分组标签；和/或，若所述节点为显示元素类型的节点，则判断所述节点是否需要有剪切路径包围，如果是，则为所述节点添加分组标签；和/或，若所述节点包括背景图，则为所述节点的背景图添加图片标签。8.根据权利要求6所述的方法，其特征在于，若所述节点为元素类型的节点，所述方法进一步包括：若所述节点包括伪类，则将所述伪类转换为真实节点；将所述真实节点插入到所述文档集合；将所述真实节点确定为从所述文档集合中获取出的一个节点。9.根据权利要求3所述的方法，其特征在于，所述利用所述第一属性信息确定所述节点在矢量图对应的第二属性信息的过程，具体包括：将所述节点对应的第一位置信息转换为所述节点对应的第二位置信息；将所述节点对应的第一样式信息确定为所述节点对应的第二样式信息。10.根据权利要求1所述的方法，其特征在于，所述基于所述第二属性信息，在所述矢量图中记录所述节点对应的矢量数据的过程，具体包括：获取所述节点在所述文档集合中的对象数据；利用预设逻辑将所述对象数据转换为可扩展标记语言字符串；基于所述第二属性信息，在可扩展标记语言集合中记录所述可扩展标记语言字符串；将可扩展标记语言集合中的可扩展标记语言字符串解析成矢量数据，以渲染出矢量图。11.根据权利要求1所述的方法，其特征在于，所述从超文本标记语言文档集合中获取出节点之后，所述方法进一步包括：若所...

【专利技术属性】
技术研发人员：高峰，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛,KY