CN115357249A - 一种代码生成方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开关于一种代码生成方法、装置、电子设备及存储介质，包括：获取目标页面的原始图层；对原始图层进行过滤，得到待处理图层；根据待处理图层在目标页面中的位置，对待处理图层进行分组，得到至少一个分组；根据分组在目标页面中的位置，确定分组的位置约束关系，得到每个待处理图层的布局信息；对待处理图层的属性信息进行代码转换，将转换后的属性信息及布局信息作为目标页面的代码。这样，通过对目标页面中图层的分组，将不同的图层切分为多个组件，再根据分组之间的布局确定图层的位置关系，进而得到目标页面的代码，代码的生成方式较为灵活，生成的页面代码准确率较高，后续可以持续优化。

Description

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

技术领域

本公开涉及前端设计领域，尤其涉及一种代码生成方法、装置、电子设备及存储介质。

背景技术

在进行前端页面开发时，需要通过页面控件布局代码、控件代码、资源声明和创建代码以及颜色获取和定义代码等，实现对页面的设计稿的还原。在页面代码的生成过程中，包括许多重复性的工作，通常需要花费大量人力和时间。

相关技术中，将页面的设计稿转换为页面代码的方案为：通过训练神经网络，从页面的设计稿直接生成代码，比如微软的sketch2json工具。但是，这种基于神经网络的代码生成算法过于简单粗暴，对较为复杂的页面而言，其生成的页面代码准确率较低，后续难以持续优化。

发明内容

本公开提供一种代码生成方法、装置、电子设备及存储介质，以至少解决相关技术中生成的页面代码准确率较低，后续难以持续优化的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种代码生成***方法，应用于电子设备，包括：

获取目标页面的原始图层；

对所述原始图层进行过滤，得到待处理图层；

根据所述待处理图层在所述目标页面中的位置，对所述待处理图层进行分组，得到至少一个分组；

根据所述分组在所述目标页面中的位置，确定所述分组的位置约束关系，得到每个待处理图层的布局信息；

对所述待处理图层的属性信息进行代码转换，将转换后的属性信息及所述布局信息作为所述目标页面的代码。

可选的，所述对所述原始图层进行过滤，得到待处理图层，包括：

过滤所述原始图层中的冗余图层、隐藏图层及特效图层，得到待处理图层。

可选的，所述过滤所述原始图层中的冗余图层，包括：

将同一级别的所述原始图层作为一组候选图层，过滤不包括子图层且预设属性信息为空的候选图层；

在任一原始图层被其他任一原始图层遮挡的情况下，判断所述其他任一原始图层是否为非透明非隐藏图层，若是，则过滤所述任一原始图层。

可选的，所述过滤所述原始图层中的隐藏图层，包括：

过滤所述原始图层中的可见属性设置为关闭的图层；

过滤所述原始图层中不透明度设置为小于预设阈值的图层。

可选的，所述特效图层包括但不限于：

阴影图层、切片图层、路径图层以及形状图层。

可选的，所述根据所述待处理图层在所述目标页面中的位置，对所述待处理图层进行分组，包括：

利用划线纵向遍历所述目标页面，在所述划线遍历过任意一个或多个待处理图层，且不再与任一待处理图层相交的情况下，将所述划线遍历过的任意一个或多个待处理图层作为一个分组。

可选的，所述根据所述分组在所述目标页面中的位置，确定所述分组的位置约束关系，得到每个待处理图层的布局信息，包括：

根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定所述分组之间的依赖关系；

根据所述依赖关系，以及每个分组中待处理图层的横坐标及纵坐标，确定每个待处理图层的第一布局类型及第一偏移量，作为第一布局信息。

可选的，所述根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定所述分组之间的依赖关系，包括：

根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定任意两个相邻分组之间的位置关系；

如果所述相邻分组为包含关系，则合并所述相邻分组，得到合并分组，并确定所述合并分组的纵坐标最大值及纵坐标最小值，删除所述相邻分组；

如果所述相邻分组为相交关系，则把所述相邻分组中任一分组作为所述相邻分组中另一分组的子分组，确定所述子分组的纵坐标最大值及纵坐标最小值，删除作为子分组的分组；

如果所述相邻分组中任一分组的纵坐标最大值比所述相邻分组中另一分组的纵坐标最大值小，则将所述相邻分组中任一分组的底部依赖关系确定为所述相邻分组中另一分组的第一个待处理图层，所述相邻分组中另一分组的顶部依赖关系确定为所述相邻分组中任一分组的最后一个待处理图层。

可选的，在任一分组存在子分组的情况下，所述方法还包括：

针对所述任一分组，根据每个子分组中待处理图层的纵坐标最大值及纵坐标最小值，确定所述子分组之间的底部依赖关系；

根据所述底部依赖关系，以及每个子分组中待处理图层的横坐标及纵坐标，确定每个待处理图层的第二布局类型及第二偏移量，作为第二布局信息。

可选的，所述根据所述依赖关系，以及每个分组中待处理图层的横坐标，确定每个待处理图层的第一布局类型及第一偏移量，作为第一布局信息，包括：

按照每个分组中待处理图层的横坐标的值进行升序遍历，确定横坐标最小的待处理图层，作为左侧参考待处理图层，确定横坐标最大的待处理图层，作为右侧参考待处理图层；

如果任一待处理图层的横坐标距离左侧参考待处理图层比距离右侧参考待处理图层近，且所述任一待处理图层的横坐标比左侧参考待处理图层的横坐标大，则确定所述任一待处理图层的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述左侧参考待处理图层的右端进行布局，若所述任一待处理图层的横坐标比左侧参考待处理图层的横坐标小，则确定所述任一待处理图层的第一偏移量为与所述右侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述右侧参考待处理图层的左端进行布局；

如果任一待处理图层的横坐标距离左侧参考待处理图层比距离右侧参考待处理图层远，则确定所述任一待处理图层的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述左侧参考待处理图层的右端进行布局；

如果任一待处理图层的横坐标比左侧参考待处理图层的横坐标小，则设置所述任一待处理图层右侧的第一偏移量为与所述右侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的右端参照所述右侧参考待处理图层的左端进行布局，如果任一待处理图层的横坐标比左侧参考待处理图层的横坐标大，则设置所述任一待处理图层右侧的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的右端参照所述左侧参考待处理图层的右端进行布局。

可选的，所述根据所述依赖关系，以及每个分组中待处理图层的纵坐标，确定每个待处理图层的第一布局类型及第一偏移量，作为第一布局信息，包括：

按照每个分组中待处理图层的纵坐标的值进行升序遍历，确定纵坐标最小的待处理图层，作为顶部参考待处理图层，确定纵坐标最大的待处理图层，作为底部参考待处理图层；

如果任一待处理图层的纵坐标距离顶部参考待处理图层比距离底部参考待处理图层近，且所述任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标小，则确定所述任一待处理图层的第一偏移量为与所述顶部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述顶部参考待处理图层的下端进行布局，所述任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标大，则确定所述任一待处理图层的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述底部参考待处理图层的上端进行布局；

如果任一待处理图层的纵坐标距离顶部参考待处理图层比距离底部参考待处理图层远，则确定所述任一待处理图层的第一偏移量为与所述顶部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述顶部参考待处理图层的下端进行布局；

如果任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标小，则设置所述任一待处理图层底部的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的下端参照所述底部参考待处理图层的上端进行布局，如果任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标大，则设置所述任一待处理图层底部的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的下端参照所述底部参考待处理图层的下端进行布局。

根据本公开实施例的第二方面，提供一种代码生成装置，包括：

获取单元，被配置为执行获取目标页面的原始图层；

过滤单元，被配置为执行对所述原始图层进行过滤，得到待处理图层；

分组单元，被配置为执行根据所述待处理图层在所述目标页面中的位置，对所述待处理图层进行分组，得到至少一个分组；

布局单元，被配置为执行根据所述分组在所述目标页面中的位置，确定所述分组的位置约束关系，得到每个待处理图层的布局信息；

生成单元，被配置为执行对所述待处理图层的属性信息进行代码转换，将转换后的属性信息及所述布局信息作为所述目标页面的代码。

可选的，所述过滤单元，被配置为执行：

过滤所述原始图层中的冗余图层、隐藏图层及特效图层，得到待处理图层。

可选的，所述过滤单元，被配置为执行：

将同一级别的所述原始图层作为一组候选图层，过滤不包括子图层且预设属性信息为空的候选图层；

在任一原始图层被其他任一原始图层遮挡的情况下，判断所述其他任一原始图层是否为非透明非隐藏图层，若是，则过滤所述任一原始图层。

可选的，所述过滤单元，被配置为执行：

过滤所述原始图层中的可见属性设置为关闭的图层；

过滤所述原始图层中不透明度设置为小于预设阈值的图层。

可选的，所述特效图层包括但不限于：

阴影图层、切片图层、路径图层以及形状图层。

可选的，所述分组单元，被配置为执行：

利用划线纵向遍历所述目标页面，在所述划线遍历过任意一个或多个待处理图层，且不再与任一待处理图层相交的情况下，将所述划线遍历过的任意一个或多个待处理图层作为一个分组。

可选的，所述布局单元，被配置为执行：

根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定所述分组之间的依赖关系；

根据所述依赖关系，以及每个分组中待处理图层的横坐标及纵坐标，确定每个待处理图层的第一布局类型及第一偏移量，作为第一布局信息。

可选的，所述布局单元，被配置为执行：

根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定任意两个相邻分组之间的位置关系；

如果所述相邻分组为包含关系，则合并所述相邻分组，得到合并分组，并确定所述合并分组的纵坐标最大值及纵坐标最小值，删除所述相邻分组；

如果所述相邻分组为相交关系，则把所述相邻分组中任一分组作为所述相邻分组中另一分组的子分组，确定所述子分组的纵坐标最大值及纵坐标最小值，删除作为子分组的分组；

如果所述相邻分组中任一分组的纵坐标最大值比所述相邻分组中另一分组的纵坐标最大值小，则将所述相邻分组中任一分组的底部依赖关系确定为所述相邻分组中另一分组的第一个待处理图层，所述相邻分组中另一分组的顶部依赖关系确定为所述相邻分组中任一分组的最后一个待处理图层。

可选的，在任一分组存在子分组的情况下，所述布局单元，被配置为执行：

针对所述任一分组，根据每个子分组中待处理图层的纵坐标最大值及纵坐标最小值，确定所述子分组之间的底部依赖关系；

根据所述底部依赖关系，以及每个子分组中待处理图层的横坐标及纵坐标，确定每个待处理图层的第二布局类型及第二偏移量，作为第二布局信息。

可选的，所述布局单元，被配置为执行：

按照每个分组中待处理图层的横坐标的值进行升序遍历，确定横坐标最小的待处理图层，作为左侧参考待处理图层，确定横坐标最大的待处理图层，作为右侧参考待处理图层；

如果任一待处理图层的横坐标距离左侧参考待处理图层比距离右侧参考待处理图层近，且所述任一待处理图层的横坐标比左侧参考待处理图层的横坐标大，则确定所述任一待处理图层的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述左侧参考待处理图层的右端进行布局，若所述任一待处理图层的横坐标比左侧参考待处理图层的横坐标小，则确定所述任一待处理图层的第一偏移量为与所述右侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述右侧参考待处理图层的左端进行布局；

如果任一待处理图层的横坐标距离左侧参考待处理图层比距离右侧参考待处理图层远，则确定所述任一待处理图层的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述左侧参考待处理图层的右端进行布局；

如果任一待处理图层的横坐标比左侧参考待处理图层的横坐标小，则设置所述任一待处理图层右侧的第一偏移量为与所述右侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的右端参照所述右侧参考待处理图层的左端进行布局，如果任一待处理图层的横坐标比左侧参考待处理图层的横坐标大，则设置所述任一待处理图层右侧的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的右端参照所述左侧参考待处理图层的右端进行布局。

可选的，所述布局单元，被配置为执行：

按照每个分组中待处理图层的纵坐标的值进行升序遍历，确定纵坐标最小的待处理图层，作为顶部参考待处理图层，确定纵坐标最大的待处理图层，作为底部参考待处理图层；

如果任一待处理图层的纵坐标距离顶部参考待处理图层比距离底部参考待处理图层近，且所述任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标小，则确定所述任一待处理图层的第一偏移量为与所述顶部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述顶部参考待处理图层的下端进行布局，所述任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标大，则确定所述任一待处理图层的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述底部参考待处理图层的上端进行布局；

如果任一待处理图层的纵坐标距离顶部参考待处理图层比距离底部参考待处理图层远，则确定所述任一待处理图层的第一偏移量为与所述顶部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述顶部参考待处理图层的下端进行布局；

如果任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标小，则设置所述任一待处理图层底部的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的下端参照所述底部参考待处理图层的上端进行布局，如果任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标大，则设置所述任一待处理图层底部的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的下端参照所述底部参考待处理图层的下端进行布局。

根据本公开实施例的第三方面，提供一种代码生成电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现上述第一项所述的代码生成方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由代码生成电子设备的处理器执行时，使得代码生成电子设备能够执行上述第一项所述的代码生成方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现上述第一项所述的代码生成方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

获取目标页面的原始图层；对原始图层进行过滤，得到待处理图层；根据待处理图层在目标页面中的位置，对待处理图层进行分组，得到至少一个分组；根据分组在目标页面中的位置，确定分组的位置约束关系，得到每个待处理图层的布局信息；对待处理图层的属性信息进行代码转换，将转换后的属性信息及布局信息作为目标页面的代码。

这样，通过对目标页面中图层的分组，将不同的图层切分为多个组件，再根据分组之间的布局确定图层的位置关系，进而得到目标页面的代码，代码的生成方式较为灵活，生成的页面代码准确率较高，后续可以持续优化。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

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

图1是根据一示例性实施例示出的一种代码生成方法的流程图。

图2是根据一示例性实施例示出的一种对待处理图层进行分组的流程图。

图3是根据一示例性实施例示出的一种确定每个待处理图层的布局信息的流程图。

图4是根据一示例性实施例示出的一种本方案的***架构图。

图5是根据一示例性实施例示出的一种本方案的操作流程图。

图6是根据一示例性实施例示出的一种代码生成装置的框图。

图7是根据一示例性实施例示出的一种用于代码生成的电子设备的框图。

图8是根据一示例性实施例示出的一种用于代码生成的装置的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种代码生成方法的流程图，如图1所示，该代码生成方法包括以下步骤。

在步骤S11中，获取目标页面的原始图层。

在进行页面开发时，通常需要将页面的原始图层转换为代码，原始图层即为对页面的设计稿，从而使得生成的页面能够实现对设计稿的还原。其中，原始图层具有属性信息及位置信息。

属性信息可以包括名称、子图层、透明度等等，名称可以按照驼峰命名法，前缀为它的类型，后缀为数字，比如text1、image1、container3、listItem1、tab1，等等，具体不做限定。每个图层的子图层对应的控件或组件都添加到父图层对应的控件或组件上。

位置信息可以为该图层左上角坐标位置(x,y)，可以是相对于父图层的左上角的位置，比如，如果子图层的尺寸和父图层尺寸一样大，则该子图层的左上角位置和父图层左上角位置重叠，那么，该子图层的位置信息和父图层的位置信息一致；或者，位置信息也可以是该图层在页面中的绝对位置；另外，位置信息也可以为该图层右上角坐标位置或左下角坐标位置，等等，具体不做限定。

在步骤S12中，对原始图层进行过滤，得到待处理图层。

在本步骤中，对原始图层进行过滤，得到待处理图层，包括过滤原始图层中的冗余图层、隐藏图层及特效图层，得到待处理图层。这样，后续需要进行处理的图层数量得以精简，可以减少***的冗余操作，提高页面代码生成效率。

一种实现方式中，过滤原始图层中的冗余图层的步骤，可以包括：将同一级别的原始图层作为一组候选图层，过滤不包括子图层且预设属性信息为空的候选图层；以及，在任一原始图层被其他原始图层遮挡的情况下，判断遮挡该原始图层的其他原始图层是否为非透明非隐藏图层，若是，则过滤该原始图层。

其中，预设属性信息可以包括但不限于候选图层的style(样式)属性和children(子图层)属性，若候选图层的style属性和children属性为空，表示该候选图层不具备预先设定的样式，也没有对应的子图层，换句话说，该候选图层在目标页面中不需要进行展示；若任一原始图层被其他非透明非隐藏的原始图层遮挡，则该原始图层在目标页面中也不会进行展示，那么，可以将该原始图层过滤掉，从而减少***的冗余操作，提高页面代码生成效率。

一种实现方式中，过滤原始图层中的隐藏图层的步骤，可以包括：过滤原始图层中的可见属性设置为关闭的图层；以及，过滤原始图层中不透明度设置为小于预设阈值的图层。

其中，原始图层中的可见属性即为isVisible属性，若可见属性设置为关闭，则该原始图层不可见，也就是说，隐藏图层包括isVisible属性设置为false的图层及子图层。在对原始图层的样式进行设置时，可以设定该原始图层的不透明度，可以理解，不透明度越高，则该原始图层在目标页面中显示越清晰，当不透明度低于预设阈值时，可以认为该原始图层在目标页面中是透明的，举例而言，预设阈值可以设为0.1。对于不可见的图层和透明的图层，可以将其进行过滤，从而减少***的冗余操作，提高页面代码生成效率。

在本公开中，特效图层包括但不限于：阴影图层、切片(slice)图层、路径(path)图层以及形状(shape)图层，这些图层是目标页面设计稿中需要呈现的特殊效果，可以作为图像进行处理和展示，而不需要将其作为图层进行代码转换，从而减少***的冗余操作，提高页面代码生成效率。

在步骤S13中，根据待处理图层在目标页面中的位置，对待处理图层进行分组，得到至少一个分组。

在本步骤中，在得到待处理图层之后，可以对待处理图层进行分组，进而后续基于不同的分组进行页面代码的生成，相比于基于单一的图层进行页面代码生成的方式，可以有效节约***资源，提高处理效率，更好地组织和展示页面代码。

一种实现方式中，根据待处理图层在目标页面中的位置，对待处理图层进行分组的步骤，可以包括：利用划线纵向遍历目标页面，在划线遍历过任意一个或多个待处理图层，且不再与任一待处理图层相交的情况下，将划线遍历过的任意一个或多个待处理图层作为一个分组。

也就是说，通过对目标页面上的待处理图层进行纵向分块，横向划线，可以实现对待处理图层的分组，如果划线没有与任一待处理图层相交，那么，两根划线间的待处理图层则可以作为一个分组，直至不能再继续分组，就得到了划分出的最小分组，便于后续基于分组进行页面代码的生成，提高处理效率。

如图2所示，为对待处理图层进行分组的流程图。其中，先获取待处理图层的元数据，根据元数据中待处理图层的标识信息，判断该待处理图层是页面还是普通图层，如果是普通图层，则不需要划分分组，如果是页面，那么可以根据纵坐标进行分组，具体来说，根据该图层中子图层的纵坐标最小值和最大值进行分组，若某个子图层的纵坐标最大值及纵坐标最小值均在另一子图层的纵坐标最大值及纵坐标最小值确定的区间内，则该子图层包含于另一子图层，如果某个子图层的纵坐标最大值及纵坐标最小值仅有一个在另一子图层的纵坐标最大值及纵坐标最小值确定的区间内，则该子图层相交于另一子图层，对于相交或包含关系的子图层，可以将其进行聚合，划分为一个分组，并更新该分组的纵坐标最大值和最小值，直至聚合到分组不再相交或仅有一个分组。

在步骤S14中，根据分组在目标页面中的位置，确定分组的位置约束关系，得到每个待处理图层的布局信息。

在本步骤中，根据分组在目标页面中的位置，可以确定每个分组与分组之间的位置约束关系，也就是确定分组之间的相对位置，进而可以确定每个待处理图层的布局信息，布局信息用于指示待处理图层在目标页面中的位置，这样，后续生成的页面代码可以对待处理图层的位置进行约束，进而在获取到页面代码之后，可以对目标页面的设计稿进行还原。

一种实现方式中，根据分组在目标页面中的位置，确定分组的位置约束关系，得到每个待处理图层的布局信息的步骤，可以包括：根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定分组之间的依赖关系；根据依赖关系，以及每个分组中待处理图层的横坐标及纵坐标，确定每个待处理图层的第一布局类型及第一偏移量，作为第一布局信息。

也就是说，根据每个分组所包括的待处理图层的位置信息，确定其对应的纵坐标最大值及纵坐标最小值，进而确定分组之间的依赖关系，依赖关系可以包括顶部依赖以及底部依赖，顶部依赖是指当前分组的顶部相邻的分组，底部依赖是指当前分组的底部相邻的分组，确定分组之间的依赖关系之后，就可以确定各个分组的顶部及底部分别与哪个分组相邻，然后，在每个分组中根据待处理图层的位置坐标，就可以进一步确定每个待处理图层的第一布局信息。

具体而言，根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定分组之间的依赖关系，包括：

根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定任意两个相邻分组之间的位置关系。其中，如果某个待处理图层的纵坐标最大值及纵坐标最小值均在另一待处理图层的纵坐标最大值及纵坐标最小值确定的区间内，则该待处理图层包含于另一待处理图层，如果某个待处理图层的纵坐标最大值及纵坐标最小值仅有一个在另一待处理图层的纵坐标最大值及纵坐标最小值确定的区间内，则该待处理图层相交于另一待处理图层。

如果相邻分组为包含关系，则合并相邻分组，得到合并分组，并确定合并分组的纵坐标最大值及纵坐标最小值，删除相邻分组；如果相邻分组为相交关系，则把相邻分组中任一分组作为相邻分组中另一分组的子分组，确定子分组的纵坐标最大值及纵坐标最小值，删除作为子分组的分组。也就是说，将具有包含关系或相交关系的相邻分组整合为一个分组，这样，得到的分组之间位置不重叠，使得生成的页面代码更准确。

如果相邻分组中任一分组的纵坐标最大值比相邻分组中另一分组的纵坐标最大值小，则将相邻分组中任一分组的底部依赖关系确定为相邻分组中另一分组的第一个待处理图层，相邻分组中另一分组的顶部依赖关系确定为相邻分组中任一分组的最后一个待处理图层。

其中，各个分组的位置不重叠，那么，根据每个分组的纵坐标最大值，可以确定分组之间的依赖关系，可以理解，每个图层的位置坐标均为左上角坐标，且依赖于父图层的左上角坐标，因此，对于纵坐标而言，数值越小，则该图层的位置越靠上，那么，如果某个分组的纵坐标最大值比相邻的另一分组的纵坐标最大值小，则该分组在另一分组的上方，其底部依赖关系确定为相邻的另一分组的第一个待处理图层，也就是另一分组中最上方的待处理图层，对于另一分组而言，其顶部依赖关系确定为其上方分组的最后一个待处理图层，也就是最下方的待处理图层。

其中，在任一分组存在子分组的情况下，该方法还包括：针对任一分组，根据每个子分组中待处理图层的纵坐标最大值及纵坐标最小值，确定子分组之间的底部依赖关系；根据底部依赖关系，以及每个子分组中待处理图层的横坐标及纵坐标，确定每个待处理图层的第二布局类型及第二偏移量，作为第二布局信息。也就是说，在确定分组之间的依赖关系之后，可以进一步确定分组中各个待处理图层之间的依赖关系，得到第二布局信息，从而实现对待处理图层的布局进行约束。

举例而言，根据依赖关系，以及每个分组中待处理图层的横坐标，确定每个待处理图层的第一布局类型及第一偏移量，作为第一布局信息，包括：

按照每个分组中待处理图层的横坐标的值进行升序遍历，确定横坐标最小的待处理图层，作为左侧参考待处理图层，确定横坐标最大的待处理图层，作为右侧参考待处理图层；

如果任一待处理图层的横坐标距离左侧参考待处理图层比距离右侧参考待处理图层近，且任一待处理图层的横坐标比左侧参考待处理图层的横坐标大，则确定任一待处理图层的第一偏移量为与左侧参考待处理图层的距离，第一布局类型为任一待处理图层的左端参照左侧参考待处理图层的右端进行布局，可以表示为ConstraintTypeLeftToRight，若任一待处理图层的横坐标比左侧参考待处理图层的横坐标小，则确定任一待处理图层的第一偏移量为与右侧参考待处理图层的距离，第一布局类型为任一待处理图层的左端参照右侧参考待处理图层的左端进行布局，可以表示为ConstraintTypeLeftToLeft；

如果任一待处理图层的横坐标距离左侧参考待处理图层比距离右侧参考待处理图层远，则确定任一待处理图层的第一偏移量为与左侧参考待处理图层的距离，第一布局类型为任一待处理图层的左端参照左侧参考待处理图层的右端进行布局，可以表示为ConstraintTypeLeftToRight；

如果任一待处理图层的横坐标比左侧参考待处理图层的横坐标小，则设置任一待处理图层右侧的第一偏移量为与右侧参考待处理图层的距离，第一布局类型为任一待处理图层的右端参照右侧参考待处理图层的左端进行布局，可以表示为ConstraintTypeRightToLeft，如果任一待处理图层的横坐标比左侧参考待处理图层的横坐标大，则设置任一待处理图层右侧的第一偏移量为与左侧参考待处理图层的距离，第一布局类型为任一待处理图层的右端参照左侧参考待处理图层的右端进行布局，可以表示为ConstraintTypeRightToRight。

举例而言，根据依赖关系，以及每个分组中待处理图层的纵坐标，确定每个待处理图层的第一布局类型及第一偏移量，作为第一布局信息，包括：

按照每个分组中待处理图层的纵坐标的值进行升序遍历，确定纵坐标最小的待处理图层，作为顶部参考待处理图层，确定纵坐标最大的待处理图层，作为底部参考待处理图层；

如果任一待处理图层的纵坐标距离顶部参考待处理图层比距离底部参考待处理图层近，且任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标小，则确定任一待处理图层的第一偏移量为与顶部参考待处理图层的距离，第一布局类型为任一待处理图层的上端参照顶部参考待处理图层的下端进行布局，可以表示为ConstraintTypeTopToBottom，任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标大，则确定任一待处理图层的第一偏移量为与底部参考待处理图层的距离，第一布局类型为任一待处理图层的上端参照底部参考待处理图层的上端进行布局，可以表示为ConstraintTypeTopToTop；

如果任一待处理图层的纵坐标距离顶部参考待处理图层比距离底部参考待处理图层远，则确定任一待处理图层的第一偏移量为与顶部参考待处理图层的距离，第一布局类型为任一待处理图层的上端参照顶部参考待处理图层的下端进行布局，可以表示为ConstraintTypeTopToBottom；

如果任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标小，则设置任一待处理图层底部的第一偏移量为与底部参考待处理图层的距离，第一布局类型为任一待处理图层的下端参照底部参考待处理图层的上端进行布局，可以表示为ConstraintTypeBottomToTop，如果任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标大，则设置任一待处理图层底部的第一偏移量为与底部参考待处理图层的距离，第一布局类型为任一待处理图层的下端参照底部参考待处理图层的下端进行布局，可以表示为ConstraintTypeBottomToBottom。

举例而言，如图3所示，为确定每个待处理图层的布局信息的流程图，其中，每个待处理图层可以作为一个组件，约束布局算法的具体步骤可以包括：

步骤1：设置组件的横坐标x值、纵坐标y值的初始值为0，针对同一级别的组件进行分组，进入步骤2。

步骤2：根据组件的frame(框架)，即左上角的位置坐标，进行升序排序，对组件的子组件遍历，将子组件放入分组里，并设置每个子组件的Y轴的最小值为控件的顶部、最大值为控件的底部、子组件依赖上下左右为父组件。然后对分组进行遍历，如果分组A包含分组B，则合并这两个分组，更新合并后的分组的Y轴最大值和最小值，删除被合并的组；如果分组A和分组B相交，则把另一个分组包括的元素作为该元素的子分组，更新子分组的Y轴最大值和最小值，删除被合并的组；如果分组A的最大值比分组B的y值要小，则将分组A的底部依赖更新为分组B第一个组件，分组B的顶部依赖为分组A的最后一个组件；如果分组B的最大值比分组A的y值要小，则将分组B的底部依赖更新为分组A第一个组件，分组A的顶部依赖为分组B的最后一个组件。

步骤3：遍历分组，如果分组里的组件只有1个，则进入步骤4，否则先按照X轴方向设置约束，进入步骤5，再按照Y轴方向设置约束，进入步骤6。

步骤4：以组件依赖的左上组件作为参考，设置组件的左上偏移量、参考对象及layout(布局)的type(类型)。

步骤5：对X轴方向遍历设置组件的参考，具体步骤为：首先组件分组按照x值大小做升序遍历，遍历分组里的所有组件，找到组件左侧值的最小值的参考组件及组件右侧的最小参考组件；

如果组件距离左边参考值比组件距离右边的参考值小，组件x值比参考值最大值大，则设置组件左侧偏移量、参考对象及layout类型为ConstraintTypeLeftToRight，否则设置组件左侧的偏移量、参考对象及layout的类型为ConstraintTypeLeftToLeft；

如果组件距离右侧参考值比组件距离右边参考值小，设置组件左侧的偏移量、参考对象及layout的类型为ConstraintTypeLeftToRight；

否则如果组件的最大值比参考对象的x值小，则设置组件右侧的偏移量、参考对象及layout类型为ConstraintTypeRightToLeft，否则设置组件右侧的偏移量、参考对象及layout类型为ConstraintTypeRightToRight。

步骤6：对Y轴方向遍历设置组件的参考，具体步骤为：首先组件分组按照Y值大小做升序遍历，遍历分组里的所有组件，找到组件左侧值的最小值的参考组件及组件右侧的最小参考组件；

如果组件距离顶部参考值比组件距离底部的参考值小，顶部比参考值的最大值小，则设置组件顶部偏移量、参考对象及layout类型为ConstraintTypeTopToBottom，否则置组件顶部的偏移量、参考对象及layout类型为ConstraintTypeTopToTop；

如果组件距离顶部参考值比组件距离底部参考值小，设置组件顶部偏移量、参考对象及layout类型为ConstraintTypeTopToBottom；

否则，如果组件的y值比参考对象的最大值值小，则设置组件底部侧的偏移量、参考对象及layout类型为ConstraintTypeBottomToTop，否则设置组件底部的偏移量、参考对象及layout类型为ConstraintTypeBottomToBottom。

步骤7：再遍历组件的子组件，进入步骤1，直至所有子组件遍历完成，组件的约束建立完成，得到布局信息。

在步骤S15中，对待处理图层的属性信息进行代码转换，将转换后的属性信息及布局信息作为目标页面的代码。

在本步骤中，对待处理图层的属性信息进行代码转换，其中，可以使用DSL(Domain-Specific Languages，领域特定语言)或sketch2json工具，也可以使用预先训练得到的神经网络模型进行转换，具体不做限定。得到的目标页面的代码中，包括转换后的属性信息及布局信息，这样，在获取代码之后，就可以对目标页面的设计稿进行还原。

其中，DSL中可以定义元素type(类型)属性、style属性、structure(构造)属性、value(值)属性和children属性，这些属性是和控件、基础组件、布局或资源相关的。目标页面设计稿的图层信息是文字，而对应的页面代码可以是标签、按钮、文本框；图层信息是矩形框，页面代码则可能是视图界面或列表；还可以包括border radius(圆角边框边界半径)、font(字体)以及align(对齐方式)等属性信息。

如图4所示，为本方案的***架构图。其中，sketch(素描)插件用于获取设计稿元数据，并将设计稿元数据上传至服务端，服务端通过DSL解析、图层聚合与拆分、布局算法、控件识别、组件识别、资源识别、图层属性识别、代码组织以及语义识别等组件，将设计稿元数据转化为页面代码，生成目标页面的脚本文件。这样，客户端可以根据图层标识，通过前端的浏览器插件或信息获取插件获取目标页面的脚本文件，解析出目标页面的原生代码，进而实现对目标页面的展示和处理。另外，前端还可以包括模板代码管理插件，用于对目标页面的脚本文件进行管理。

如图5所示，为本方案的操作流程图。首先，素描插件向服务器上传处理后的图层元数据，服务器接收开发者通过信息处理插件选中的图层标识，然后将该图层标识对应的元数据传入页面代码生成组件，页面代码生成组件对接收到的元数据进行处理，生成对应的页面代码，返回至服务器，进而由服务器返回至客户端，对页面代码进行展示。

由以上可见，本公开的实施例提供的技术方案，通过对目标页面中图层的分组，将不同的图层切分为多个组件，再根据分组之间的布局确定图层的位置关系，进而得到目标页面的代码，代码的生成方式较为灵活，生成的页面代码准确率较高，后续可以持续优化。

图6是根据一示例性实施例示出的一种代码生成装置框图，该装置包括：

获取单元201，被配置为执行获取目标页面的原始图层；

过滤单元202，被配置为执行对所述原始图层进行过滤，得到待处理图层；

分组单元203，被配置为执行根据所述待处理图层在所述目标页面中的位置，对所述待处理图层进行分组，得到至少一个分组；

布局单元204，被配置为执行根据所述分组在所述目标页面中的位置，确定所述分组的位置约束关系，得到每个待处理图层的布局信息；

生成单元205，被配置为执行对所述待处理图层的属性信息进行代码转换，将转换后的属性信息及所述布局信息作为所述目标页面的代码。

一种实现方式中，所述过滤单元202，被配置为执行：

过滤所述原始图层中的冗余图层、隐藏图层及特效图层，得到待处理图层。

一种实现方式中，所述过滤单元202，被配置为执行：

将同一级别的所述原始图层作为一组候选图层，过滤不包括子图层且预设属性信息为空的候选图层；

在任一原始图层被其他任一原始图层遮挡的情况下，判断所述其他任一原始图层是否为非透明非隐藏图层，若是，则过滤所述任一原始图层。

一种实现方式中，所述过滤单元202，被配置为执行：

过滤所述原始图层中的可见属性设置为关闭的图层；

过滤所述原始图层中不透明度设置为小于预设阈值的图层。

一种实现方式中，所述特效图层包括但不限于：

阴影图层、切片图层、路径图层以及形状图层。

一种实现方式中，所述分组单元203，被配置为执行：

利用划线纵向遍历所述目标页面，在所述划线遍历过任意一个或多个待处理图层，且不再与任一待处理图层相交的情况下，将所述划线遍历过的任意一个或多个待处理图层作为一个分组。

一种实现方式中，所述布局单元204，被配置为执行：

根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定所述分组之间的依赖关系；

根据所述依赖关系，以及每个分组中待处理图层的横坐标及纵坐标，确定每个待处理图层的第一布局类型及第一偏移量，作为第一布局信息。

一种实现方式中，所述布局单元204，被配置为执行：

根据每个分组中待处理图层的纵坐标最大值及纵坐标最小值，确定任意两个相邻分组之间的位置关系；

如果所述相邻分组为包含关系，则合并所述相邻分组，得到合并分组，并确定所述合并分组的纵坐标最大值及纵坐标最小值，删除所述相邻分组；

如果所述相邻分组为相交关系，则把所述相邻分组中任一分组作为所述相邻分组中另一分组的子分组，确定所述子分组的纵坐标最大值及纵坐标最小值，删除作为子分组的分组；

如果所述相邻分组中任一分组的纵坐标最大值比所述相邻分组中另一分组的纵坐标最大值小，则将所述相邻分组中任一分组的底部依赖关系确定为所述相邻分组中另一分组的第一个待处理图层，所述相邻分组中另一分组的顶部依赖关系确定为所述相邻分组中任一分组的最后一个待处理图层。

一种实现方式中，在任一分组存在子分组的情况下，所述布局单元204，被配置为执行：

针对所述任一分组，根据每个子分组中待处理图层的纵坐标最大值及纵坐标最小值，确定所述子分组之间的底部依赖关系；

根据所述底部依赖关系，以及每个子分组中待处理图层的横坐标及纵坐标，确定每个待处理图层的第二布局类型及第二偏移量，作为第二布局信息。

一种实现方式中，所述布局单元204，被配置为执行：

按照每个分组中待处理图层的横坐标的值进行升序遍历，确定横坐标最小的待处理图层，作为左侧参考待处理图层，确定横坐标最大的待处理图层，作为右侧参考待处理图层；

如果任一待处理图层的横坐标距离左侧参考待处理图层比距离右侧参考待处理图层近，且所述任一待处理图层的横坐标比左侧参考待处理图层的横坐标大，则确定所述任一待处理图层的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述左侧参考待处理图层的右端进行布局，若所述任一待处理图层的横坐标比左侧参考待处理图层的横坐标小，则确定所述任一待处理图层的第一偏移量为与所述右侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述右侧参考待处理图层的左端进行布局；

如果任一待处理图层的横坐标距离左侧参考待处理图层比距离右侧参考待处理图层远，则确定所述任一待处理图层的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的左端参照所述左侧参考待处理图层的右端进行布局；

如果任一待处理图层的横坐标比左侧参考待处理图层的横坐标小，则设置所述任一待处理图层右侧的第一偏移量为与所述右侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的右端参照所述右侧参考待处理图层的左端进行布局，如果任一待处理图层的横坐标比左侧参考待处理图层的横坐标大，则设置所述任一待处理图层右侧的第一偏移量为与所述左侧参考待处理图层的距离，第一布局类型为所述任一待处理图层的右端参照所述左侧参考待处理图层的右端进行布局。

一种实现方式中，所述布局单元204，被配置为执行：

按照每个分组中待处理图层的纵坐标的值进行升序遍历，确定纵坐标最小的待处理图层，作为顶部参考待处理图层，确定纵坐标最大的待处理图层，作为底部参考待处理图层；

如果任一待处理图层的纵坐标距离顶部参考待处理图层比距离底部参考待处理图层近，且所述任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标小，则确定所述任一待处理图层的第一偏移量为与所述顶部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述顶部参考待处理图层的下端进行布局，所述任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标大，则确定所述任一待处理图层的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述底部参考待处理图层的上端进行布局；

如果任一待处理图层的纵坐标距离顶部参考待处理图层比距离底部参考待处理图层远，则确定所述任一待处理图层的第一偏移量为与所述顶部参考待处理图层的距离，第一布局类型为所述任一待处理图层的上端参照所述顶部参考待处理图层的下端进行布局；

如果任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标小，则设置所述任一待处理图层底部的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的下端参照所述底部参考待处理图层的上端进行布局，如果任一待处理图层的纵坐标比顶部参考待处理图层的纵坐标大，则设置所述任一待处理图层底部的第一偏移量为与所述底部参考待处理图层的距离，第一布局类型为所述任一待处理图层的下端参照所述底部参考待处理图层的下端进行布局。

由以上可见，本公开的实施例提供的技术方案，通过对目标页面中图层的分组，将不同的图层切分为多个组件，再根据分组之间的布局确定图层的位置关系，进而得到目标页面的代码，代码的生成方式较为灵活，生成的页面代码准确率较高，后续可以持续优化。

图7是根据一示例性实施例示出的一种用于代码生成的电子设备的框图。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器，上述指令可由电子设备的处理器执行以完成上述方法。可选地，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光代码生成设备等。

在示例性实施例中，还提供一种计算机程序产品，当其在计算机上运行时，使得计算机实现上述代码生成的方法。

由以上可见，本公开的实施例提供的技术方案，通过对目标页面中图层的分组，将不同的图层切分为多个组件，再根据分组之间的布局确定图层的位置关系，进而得到目标页面的代码，代码的生成方式较为灵活，生成的页面代码准确率较高，后续可以持续优化。

图8是根据一示例性实施例示出的一种用于代码生成的装置800的框图。

例如，装置800可以是移动电话，计算机，数字广播电子设备，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图8，装置800可以包括以下一个或多个组件：处理组件802，存储器804，电力组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。

处理组件802通常控制装置800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。

存储器804被配置为存储各种类型的数据以支持在设备800的操作。这些数据的示例包括用于在装置800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程直读存储器(EEPROM)，可擦除可编程直读存储器(EPROM)，可编程直读存储器(PROM)，直读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件807为装置800的各种组件提供电力。电源组件807可以包括电源管理***，一个或多个电源，及其他与为装置800生成、管理和分配电力相关联的组件。

多媒体组件808包括在所述装置800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当装置800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。

I/O接口812为处理组件802和***接口模块之间提供接口，上述***接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件814包括一个或多个传感器，用于为装置800提供各个方面的状态评估。例如，传感器组件814可以检测到设备800的打开/关闭状态，组件的相对定位，例如所述组件为装置800的显示器和小键盘，传感器组件814还可以检测装置800或装置800一个组件的位置改变，用户与装置800接触的存在或不存在，装置800方位或加速/减速和装置800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件816被配置为便于装置800和其他设备之间有线或无线方式的通信。装置800可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理***的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行第一方面和第二方面所述的方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由装置800的处理器820执行以完成上述方法。可选地，例如，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性非临时性计算机可读存储介质计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光代码生成设备等。

在示例性实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中第一所述的代码生成方法。

由以上可见，本公开的实施例提供的技术方案，通过对目标页面中图层的分组，将不同的图层切分为多个组件，再根据分组之间的布局确定图层的位置关系，进而得到目标页面的代码，代码的生成方式较为灵活，生成的页面代码准确率较高，后续可以持续优化。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

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

获取目标页面的原始图层；

对所述原始图层进行过滤，得到待处理图层；

根据所述待处理图层在所述目标页面中的位置，对所述待处理图层进行分组，得到至少一个分组；

根据所述分组在所述目标页面中的位置，确定所述分组的位置约束关系，得到每个待处理图层的布局信息；

对所述待处理图层的属性信息进行代码转换，将转换后的属性信息及所述布局信息作为所述目标页面的代码。

2.根据权利要求1所述的代码生成方法，其特征在于，所述对所述原始图层进行过滤，得到待处理图层，包括：

过滤所述原始图层中的冗余图层、隐藏图层及特效图层，得到待处理图层。

3.根据权利要求2所述的代码生成方法，其特征在于，所述过滤所述原始图层中的冗余图层，包括：

将同一级别的所述原始图层作为一组候选图层，过滤不包括子图层且预设属性信息为空的候选图层；

在任一原始图层被其他任一原始图层遮挡的情况下，判断所述其他任一原始图层是否为非透明非隐藏图层，若是，则过滤所述任一原始图层。

4.根据权利要求2所述的代码生成方法，其特征在于，所述过滤所述原始图层中的隐藏图层，包括：

过滤所述原始图层中的可见属性设置为关闭的图层；

过滤所述原始图层中不透明度设置为小于预设阈值的图层。

5.根据权利要求2所述的代码生成方法，其特征在于，所述特效图层包括但不限于：

阴影图层、切片图层、路径图层以及形状图层。

6.根据权利要求1所述的代码生成方法，其特征在于，所述根据所述待处理图层在所述目标页面中的位置，对所述待处理图层进行分组，包括：

利用划线纵向遍历所述目标页面，在所述划线遍历过任意一个或多个待处理图层，且不再与任一待处理图层相交的情况下，将所述划线遍历过的任意一个或多个待处理图层作为一个分组。

7.一种代码生成装置，其特征在于，包括：

获取单元，被配置为执行获取目标页面的原始图层；

过滤单元，被配置为执行对所述原始图层进行过滤，得到待处理图层；

分组单元，被配置为执行根据所述待处理图层在所述目标页面中的位置，对所述待处理图层进行分组，得到至少一个分组；

布局单元，被配置为执行根据所述分组在所述目标页面中的位置，确定所述分组的位置约束关系，得到每个待处理图层的布局信息；

生成单元，被配置为执行对所述待处理图层的属性信息进行代码转换，将转换后的属性信息及所述布局信息作为所述目标页面的代码。

8.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至6中任一项所述的代码生成方法。

9.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由代码生成电子设备的处理器执行时，使得代码生成电子设备能够执行如权利要求1至6中任一项所述的代码生成方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6任一项所述的代码生成方法。

Images