CN107291476B

CN107291476B - Canvas代码生成方法、装置、电子设备及存储介质

Info

Publication number: CN107291476B
Application number: CN201710504347.3A
Authority: CN
Inventors: 谢杨玲
Original assignee: Beijing Weiying Shidai Technology Co ltd
Current assignee: Beijing Weiying Shidai Technology Co ltd
Priority date: 2017-06-27
Filing date: 2017-06-27
Publication date: 2020-12-08
Anticipated expiration: 2037-06-27
Also published as: CN107291476A

Abstract

本发明公开了一种Canvas代码生成方法，包括：获取用于生成代码的可缩放矢量图形SVG文件；基于SVG文件中各元素的标签名称、标签类型和属性信息，生成包含各元素及各元素层级关系的JSON格式的中间数据；按照各元素层级关系中从外到内及从前到后的顺序，遍历中间数据，确定与每个元素的属性信息对应的Canvas代码单元；将确定的Canvas代码单元，按照顺序进行组合，得到SVG文件对应的Canvas代码。从而实现了自动化生成Canvas代码，提高了Canvas代码的生成效率。

Description

Canvas代码生成方法、装置、电子设备及存储介质

技术领域

本发明涉及互联网技术领域中的Canvas(画布)技术领域，尤其涉及一种Canvas代码生成方法、装置、电子设备及存储介质。

背景技术

在互联网技术应用中，经常需要在呈现给用户的界面中，展示一些图形。为实现这一目的，UI设计师提供用户界面原型设计图，前端工程师负责将原型设计图转化为代码，从而还原设计。

前端工程师在转化代码时，可以采用网页画布技术，即HTML5(Hyper Text MarkupLanguage，超文本标记语言)支持的Canvas技术。在使用时，可以用浏览器支持的脚本语言Java script调用Canvas API(Application Programming Interface，应用程序编程接口)，作为前端工程师还原设计的一种代码手段。

在目前的方法中，如果使用Canvas绘制设计图，前端工程师需要自己根据图形形状来确定调用的Canvas API，并手写代码，使得代码生成的效率较低。

发明内容

本发明实施例提供一种Canvas代码生成方法、装置、电子设备及存储介质，用以解决现有技术中存在的Canvas代码生成效率较低的问题。

本发明实施例提供一种Canvas代码生成方法，包括：

获取用于生成代码的可缩放矢量图形SVG文件；

基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成包含所述各元素及所述各元素层级关系的JSON格式的中间数据；

按照所述各元素层级关系中从外到内及从前到后的顺序，遍历所述中间数据，确定与每个元素的属性信息对应的Canvas代码单元；

将确定的Canvas代码单元，按照顺序进行组合，得到所述SVG文件对应的Canvas代码。

进一步的，基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成包含所述各元素及所述各元素层级关系的JSON格式的中间数据，包括：

基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成与所述各元素分别一一对应的词法单元，所述词法单元包括对应元素的标签名称、标签类型和属性信息；

按照从前到后的顺序遍历各词法单元，并根据词法单元中的标签类型为开始类型或结束类型，确定先后相邻两个词法单元之间的层级关系，得到包含所述各元素及所述各元素层级关系的JSON格式的中间数据。

进一步的，基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成与所述各元素分别一一对应的词法单元，包括：

按照已知的SVG文件结构，对所述SVG文件进行文本分割，得到所述SVG文件中各元素所包括的文本内容；

采用文本匹配技术，分别从所述各元素包括的文本内容中，解析出所述各元素的标签名称、标签类型和属性信息；

针对所述各元素中的每个元素，生成与该元素对应的包括该元素的标签名称、标签类型和属性信息的词法单元。

进一步的，在确定与每个元素的属性信息对应的Canvas代码单元之后，还包括：

将确定的与每个元素的属性信息对应的Canvas代码单元保存在数组中；

将确定的Canvas代码单元，按照顺序进行组合，得到所述SVG文件对应的Canvas代码，包括：

从所述数组中获得与每个元素的属性信息对应的Canvas代码单元；

将获得的与每个元素的属性信息对应的Canvas代码单元，按照顺序进行组合并拼接为一个字符串，以及将所述字符串写入到文本，得到所述SVG文件对应的Canvas代码。

本发明实施例还提供一种画布Canvas代码生成装置，包括：

文件获取模块，用于获取用于生成代码的可缩放矢量图形SVG文件；

中间数据生成模块，用于基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成包含所述各元素及所述各元素层级关系的JSON格式的中间数据；

代码单元匹配模块，用于按照所述各元素层级关系中从外到内及从前到后的顺序，遍历所述中间数据，确定与每个元素的属性信息对应的Canvas代码单元；

代码生成模块，用于将确定的Canvas代码单元，按照顺序进行组合，得到所述SVG文件对应的Canvas代码。

进一步的，所述中间数据生成模块，具体用于基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成与所述各元素分别一一对应的词法单元，所述词法单元包括对应元素的标签名称、标签类型和属性信息；以及按照从前到后的顺序遍历各词法单元，并根据词法单元中的标签类型为开始类型或结束类型，确定先后相邻两个词法单元之间的层级关系，得到包含所述各元素及所述各元素层级关系的JSON格式的中间数据。

进一步的，所述中间数据生成模块，具体用于按照已知的SVG文件结构，对所述SVG文件进行文本分割，得到所述SVG文件中各元素所包括的文本内容；并采用文本匹配技术，分别从所述各元素包括的文本内容中，解析出所述各元素的标签名称、标签类型和属性信息；以及针对所述各元素中的每个元素，生成与该元素对应的包括该元素的标签名称、标签类型和属性信息的词法单元。

进一步的，所述代码单元匹配模块，还用于在确定与每个元素的属性信息对应的Canvas代码单元之后，将确定的与每个元素的属性信息对应的Canvas代码单元保存在数组中；

所述代码生成模块，具体用于从所述数组中获得与每个元素的属性信息对应的Canvas代码单元；以及将获得的与每个元素的属性信息对应的Canvas代码单元，按照顺序进行组合并拼接为一个字符串，以及将所述字符串写入到文本，得到所述SVG文件对应的Canvas代码。

本发明实施例还提供一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现权利要求1-4任一所述的方法步骤。

本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-4任一所述的方法步骤。

本发明有益效果包括：

本发明实施例提供的方法中，在需要生成Canvas代码时，首先获取用于生成代码的SVG文件，并基于SVG文件中各元素的标签名称、标签类型和属性信息，生成包含各元素及各元素层级关系的JSON格式的中间数据，按照各元素层级关系中从外到内及从前到后的顺序，遍历该中间数据，确定与每个元素的属性信息对应的Canvas代码单元，将确定的Canvas代码单元，按照顺序进行组合，得到SVG文件对应的Canvas代码。从而实现了自动化生成Canvas代码，提高了Canvas代码的生成效率。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例提供的Canvas代码生成方法的流程图；

图2为本发明实施例提供的Canvas代码生成方法的流程图；

图3为本发明实施例提供的Canvas代码生成装置的结构示意图；

图4为本发明实施例提供的电子设备的结构示意图。

具体实施方式

为了给出提高Canvas代码生成效率的实现方案，本发明实施例提供了一种Canvas代码生成方法、装置、电子设备及存储介质，以下结合说明书附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。并且在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本发明实施例提供一种Canvas代码生成方法，如图1所示，包括：

步骤11、获取用于生成代码的SVG(Scalable Vector Graphics，可缩放矢量图形)文件。

步骤12、基于SVG文件中各元素的标签名称、标签类型和属性信息，生成包含各元素及各元素层级关系的JSON格式的中间数据。

步骤13、按照各元素层级关系中从外到内及从前到后的顺序，遍历该中间数据，确定与每个元素的属性信息对应的Canvas代码单元。

步骤14、将确定的Canvas代码单元，按照顺序进行组合，得到SVG文件对应的Canvas代码。

采用上述图1所示的Canvas代码生成方法，实现了自动化生成Canvas代码，提高了Canvas代码的生成效率。

下面结合附图，用具体实施例对本发明提供的方法及装置进行详细描述。

图2所示为本发明实施例提供一种Canvas代码生成方法的详细流程图，其中，具体包括如下处理步骤：

步骤21、获取用于生成代码的SVG文件。

在实际应用中，UI设计师常用的原型设计工具通常可以将原型图导出成SVG格式的文件。

本步骤获取SVG文件，以便通过后续步骤生成与该SVG文件对应的Canvas代码，即与该SVG文件所表示的图形对应的Canvas代码。

在获取到SVG文件之后，即可以基于SVG文件中各元素的标签名称、标签类型和属性信息，生成包含各元素及各元素层级关系的JSON格式的中间数据，具体可以包括如下步骤22和步骤23。

步骤22、基于SVG文件中各元素的标签名称、标签类型和属性信息，生成与各元素分别一一对应的词法单元，词法单元包括对应元素的标签名称、标签类型和属性信息。

SVG文件是XML(Extensible Markup Language，可扩展标记语言)格式的文件，XML文件的文本中包括多个元素(也可以称作标签)，元素与元素之间存在嵌套的层级关系，并且，元素具有标签名称、标签类型和属性信息。

本步骤中，即可以通过对SVG文件的文本分割和解析，生成与各元素分别一一对应的词法单元，具体可以如下：

按照已知的SVG文件结构，对SVG文件进行文本分割，得到SVG文件中各元素所包括的文本内容；

采用文本匹配技术，分别从各元素包括的文本内容中，解析出各元素的标签名称、标签类型和属性信息；

针对各元素中的每个元素，生成与该元素对应的包括该元素的标签名称、标签类型和属性信息的词法单元。

下面举例进行描述。

将SVG文件作为纯文本，从文本的第一个字符开始，按照已知的SVG文件结构，对获取的SVG文件进行文本分割，得到元素所包括的文本内容。例如，针对SVG文件中包括的文本<path d＝“M20，20”fill＝“red”></path>，可以分割出元素<path d＝“M20，20”fill＝“red”>，以及元素</path>。

然后，通过正则表达式，从元素的文本内容中匹配出标签名，并提取出元素的属性信息(一个元素上面的″name＝value″格式的字符串)，以及标签类型，从而得到一个词法单元。

例如，针对上述元素<path d＝“M20，20”fill＝“red”>，得到如下词法单元：

针对上述元素元素</path>，得到如下词法单元：

其中type为标签类型，type有“tag-start”与“tag-end”两种类型，即开始类型和结束类型，tag则为标签名称，attribute为属性信息。

本步骤中，具体可以处理完一个元素后，从文本中相应的截断此元素对应长度的文本，然后处理下一个元素，重复此过程，直到文本的长度为0，该过程结束，得到所有的词法单元。

步骤23、按照从前到后的顺序遍历各词法单元，并根据词法单元中的标签类型为开始类型或结束类型，确定先后相邻两个词法单元之间的层级关系，得到包含各元素及各元素层级关系的JSON格式的中间数据。

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，本步骤中，基于得到的上述词法单元，生成JSON格式的中间数据，用于后续的Canvas代码单元的匹配。

本步骤中，具体可以依次遍历所有的词法单元，通过分析元素的type(标签类型)，确定各元素之间的层级(嵌套)关系，并使用JSON格式的中间文件来保存解析结果。对于SVG文件的每个元素，有如下结构：

与上述词法单元不同的是，没了type，多了一个children用来保存子级的元素。

如果某个词法单元的type为“tag-start”，而紧接着的下一个的词法单元type不是”tag-end“而是”tag-start“，则两个该两个词法单元各自对应的元素之间存在着层级关系。我们将后面的元素，放到前面元素的children里面，依次类推。直到所有的词法单元遍历完成，就得到了包含所有元素以及元素层级关系的JSON格式的中间数据，该过程结束。

步骤24、按照各元素层级关系中从外到内及从前到后的顺序，遍历上述JSON格式的中间数据，确定与每个元素的属性信息对应的Canvas代码单元。

因为SVG文件用于表示矢量图形，而Canvas也用于绘图，因此两者存在着一定的联系。针对绘制图形的结果来看，SVG里面的某个元素可以对应于Canvas API的某种方法或者预先使用Canvas方法来模拟SVG的元素。

以SVG文件中的path元素为例：

元素<path d＝″M250 150 L150 350 L350 350Z″/>，定义了一条路径，它开始于位置坐标250150，到达位置坐标150 350，然后再到达位置坐标350 350，最后到达位置坐标250 150，并关闭路径，即在绘制图形的表现上是一条闭合的线段构成的图形。

对于Canvas而言，上述例子中，SVG文件中path元素的d属性中的“M”，“L”，“Z”，有与之相近的方法，即：M对应moveTo()，L对应lineTo()，Z对应closePath()。诸如此类直接的对应关系。如果没有直接的对应关系，也可以预先使用Canvas方法类似的模拟SVG文件的元素。

本发明实施例中，可以预先建立SVG文件中元素的属性信息与Canvas代码单元之间的对应关系，并基于该对应关系，确定与每个元素的属性信息对应的Canvas代码单元。

具体过程可以如下：

按照各元素层级关系中从外到内及从前到后的顺序，遍历JSON格式的中间数据，此过程在于读取元素的tag与attribute，如果children不为空则递归遍历，即继续相同的方法向下遍历children的元素。读取attribute的属性信息，例如，path的d，基于上述对应关系，得到该元素该属性信息对应的Canvas代码单元。

本步骤中，在确定与每个元素的属性信息对应的Canvas代码单元之后，还可以将确定的与每个元素的属性信息对应的Canvas代码单元保存在数组中，以便后续的使用。

步骤25、将确定的Canvas代码单元，按照顺序进行组合，得到SVG文件对应的Canvas代码。

具体可以从上述数组中获得与每个元素的属性信息对应的Canvas代码单元，并将获得的与每个元素的属性信息对应的Canvas代码单元，按照顺序进行组合并拼接为一个字符串，以及将该字符串写入到文本，得到SVG文件对应的Canvas代码。

基于同一发明构思，根据本发明上述实施例提供的Canvas代码生成方法，相应地，本发明另一实施例还提供了一种Canvas代码生成装置，其结构示意图如图3所示，具体包括：

文件获取模块31，用于获取用于生成代码的可缩放矢量图形SVG文件；

中间数据生成模块32，用于基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成包含所述各元素及所述各元素层级关系的JSON格式的中间数据；

代码单元匹配模块33，用于按照所述各元素层级关系中从外到内及从前到后的顺序，遍历所述中间数据，确定与每个元素的属性信息对应的Canvas代码单元；

代码生成模块34，用于将确定的Canvas代码单元，按照顺序进行组合，得到所述SVG文件对应的Canvas代码。

进一步的，中间数据生成模块32，具体用于基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成与所述各元素分别一一对应的词法单元，所述词法单元包括对应元素的标签名称、标签类型和属性信息；以及按照从前到后的顺序遍历各词法单元，并根据词法单元中的标签类型为开始类型或结束类型，确定先后相邻两个词法单元之间的层级关系，得到包含所述各元素及所述各元素层级关系的JSON格式的中间数据。

进一步的，中间数据生成模块32，具体用于按照已知的SVG文件结构，对所述SVG文件进行文本分割，得到所述SVG文件中各元素所包括的文本内容；并采用文本匹配技术，分别从所述各元素包括的文本内容中，解析出所述各元素的标签名称、标签类型和属性信息；以及针对所述各元素中的每个元素，生成与该元素对应的包括该元素的标签名称、标签类型和属性信息的词法单元。

进一步的，代码单元匹配模块33，还用于在确定与每个元素的属性信息对应的Canvas代码单元之后，将确定的与每个元素的属性信息对应的Canvas代码单元保存在数组中；

代码生成模块34，具体用于从所述数组中获得与每个元素的属性信息对应的Canvas代码单元；以及将获得的与每个元素的属性信息对应的Canvas代码单元，按照顺序进行组合并拼接为一个字符串，以及将所述字符串写入到文本，得到所述SVG文件对应的Canvas代码。

上述各模块的功能可对应于图1或图2所示流程中的相应处理步骤，在此不再赘述。

本发明实施例还提供一种电子设备，如图4所示，包括处理器41、通信接口42、存储器43和通信总线44，其中，处理器41，通信接口42，存储器43通过通信总线44完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现上述Canvas代码生成方法步骤。

上述电子设备提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述电子设备与其他设备之间的通信。

存储器可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-Volatile Memory，NVM)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述Canvas代码生成方法步骤。

综上所述，本发明实施例提供的方案，在需要生成Canvas代码时，首先获取用于生成代码的SVG文件，并基于SVG文件中各元素的标签名称、标签类型和属性信息，生成包含各元素及各元素层级关系的JSON格式的中间数据，按照各元素层级关系中从外到内及从前到后的顺序，遍历该中间数据，确定与每个元素的属性信息对应的Canvas代码单元，将确定的Canvas代码单元，按照顺序进行组合，得到SVG文件对应的Canvas代码。从而实现了自动化生成Canvas代码，提高了Canvas代码的生成效率。

本申请的实施例所提供的生成装置可通过计算机程序实现。本领域技术人员应该能够理解，上述的模块划分方式仅是众多模块划分方式中的一种，如果划分为其他模块或不划分模块，只要生成装置具有上述功能，都应该在本申请的保护范围之内。

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

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

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

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims

1.一种画布Canvas代码生成方法，其特征在于，包括：

获取用于生成代码的可缩放矢量图形SVG文件；

将确定的Canvas代码单元，按照顺序进行组合，得到所述SVG文件对应的Canvas代码；

基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成包含所述各元素及所述各元素层级关系的JSON格式的中间数据，包括：

2.如权利要求1所述的方法，其特征在于，基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成与所述各元素分别一一对应的词法单元，包括：

3.如权利要求1所述的方法，其特征在于，在确定与每个元素的属性信息对应的Canvas代码单元之后，还包括：

4.一种画布Canvas代码生成装置，其特征在于，包括：

代码生成模块，用于将确定的Canvas代码单元，按照顺序进行组合，得到所述SVG文件对应的Canvas代码；

所述中间数据生成模块，具体用于基于所述SVG文件中各元素的标签名称、标签类型和属性信息，生成与所述各元素分别一一对应的词法单元，所述词法单元包括对应元素的标签名称、标签类型和属性信息；以及按照从前到后的顺序遍历各词法单元，并根据词法单元中的标签类型为开始类型或结束类型，确定先后相邻两个词法单元之间的层级关系，得到包含所述各元素及所述各元素层级关系的JSON格式的中间数据。

5.如权利要求4所述的装置，其特征在于，所述中间数据生成模块，具体用于按照已知的SVG文件结构，对所述SVG文件进行文本分割，得到所述SVG文件中各元素所包括的文本内容；并采用文本匹配技术，分别从所述各元素包括的文本内容中，解析出所述各元素的标签名称、标签类型和属性信息；以及针对所述各元素中的每个元素，生成与该元素对应的包括该元素的标签名称、标签类型和属性信息的词法单元。

6.如权利要求4所述的装置，其特征在于，所述代码单元匹配模块，还用于在确定与每个元素的属性信息对应的Canvas代码单元之后，将确定的与每个元素的属性信息对应的Canvas代码单元保存在数组中；

7.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现权利要求1-3任一所述的方法步骤。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-3任一所述的方法步骤。