图层处理方法、装置、电子设备及存储介质与流程

1.本公开涉及互联网技术领域，尤其涉及一种图层处理方法、装置、电子设备及存储介质。


背景技术：

2.相关技术中，视觉设计稿通常包括有多个图层，每个图层均可以被转成一个对应的前端元素，以实现视觉设计稿在前端页面的显示。当需要调整视觉设计稿时，通常需要技术人员逐个对需要调整的每个图层对应的前端元素进行调整处理。这样，当需要调整的前端元素较多时，一个一个调整前端元素需要耗费较多的时间，如此会影响到图层处理效率。


技术实现要素：

3.本公开提供一种图层处理方法、装置、电子设备及存储介质，以至少解决相关技术中图层处理效率较低的问题。本公开的技术方案如下：
4.根据本公开实施例的第一方面，提供一种图层处理方法，包括：
5.提取视觉设计稿的每个图层对应的结构描述信息；其中，所述结构描述信息包括图层尺寸、图层间距、图层的嵌套层级信息；
6.根据每个所述图层对应的结构描述信息，从所述视觉设计稿中确定出多个第一图层；其中，各个所述第一图层对应的结构描述信息相同；
7.基于所述第一图层对应的所述结构描述信息，生成多个所述第一图层对应的组件单元，以通过调整所述组件单元调整多个所述第一图层。
8.在一种可能的实施方式中，所述提取视觉设计稿的每个图层对应的结构描述信息，包括：
9.提取视觉设计稿的每个图层对应的样式属性信息；其中，所述样式属性信息包括图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息；
10.根据每个所述图层对应的样式属性信息，生成每个所述图层对应的结构描述信息。
11.在一种可能的实施方式中，所述根据每个所述图层对应的样式属性信息，生成每个所述图层对应的结构描述信息，包括：
12.剔除每个所述图层对应的样式属性信息中的所述图层背景和图层文案，得到每个所述图层对应的剔除后的样式属性信息；
13.对每个所述图层对应的剔除后的样式属性信息进行结构化描述格式转换，得到每个所述图层对应的结构描述信息。
14.在一种可能的实施方式中，所述根据每个所述图层对应的结构描述信息，从所述视觉设计稿中确定出多个第一图层；其中，各个所述第一图层对应的结构描述信息相同，包括：
15.通过摘要加密算法计算所述视觉设计稿的每个所述图层对应的结构描述信息的
摘要；
16.根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要，从所述视觉设计稿中确定出多个第一图层。
17.在一种可能的实施方式中，所述根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要，从所述视觉设计稿中确定出多个第一图层，包括：
18.对于第i个图层，将所述视觉设计稿除所述第i个图层之外的图层中，与所述第i个图层的结构描述信息的摘要相同的图层确定为第一图层；其中，i∈(1，n),n为所述视觉设计稿的图层总数。
19.在一种可能的实施方式中，所述方法还包括：
20.生成每个所述组件单元对应的前端组件代码；
21.生成除所述第一图层之外的每个第二图层各自对应的前端组件代码；其中，所述第二图层为所述视觉设计稿的图层中除所述第一图层之外的图层，且所述第二图层与所述第一图层的结构描述信息不相同。
22.在一种可能的实施方式中，所述方法还包括：
23.在接收到对所述组件单元的调整指令的情况下，基于所述调整指令调整所述组件单元；
24.在所述视觉设计稿中使用调整后的所述组件单元替换每个所述第一图层。
25.根据本公开实施例的第二方面，提供一种图层处理装置，包括：
26.信息提取模块，被配置为提取视觉设计稿的每个图层对应的结构描述信息；
27.图层确定模块，被配置为根据每个所述图层对应的结构描述信息，从所述视觉设计稿中确定出多个第一图层；其中，各个所述第一图层对应的结构描述信息相同；
28.组件生成模块，被配置为基于所述第一图层对应的所述描述信息，生成多个所述第一图层对应的组件单元，以通过调整所述组件单元调整多个所述第一图层。
29.在一种可能的实施方式中，所述信息提取模块，包括：
30.信息提取单元，被配置为提取视觉设计稿的每个图层对应的样式属性信息；其中，所述样式属性信息包括图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息；
31.信息生成单元，被配置为根据每个所述图层对应的样式属性信息，生成每个所述图层对应的结构描述信息。
32.在一种可能的实施方式中，所述信息生成单元，包括：
33.剔除子单元，被配置为剔除每个所述图层对应的样式属性信息中的所述图层背景和图层文案，得到每个所述图层对应的剔除后的样式属性信息；
34.转换子单元，被配置为对每个所述图层对应的剔除后的样式属性信息进行结构化描述格式转换，得到每个所述图层对应的结构描述信息。
35.在一种可能的实施方式中，所述图层确定模块，包括：
36.摘要计算单元，被配置为通过摘要加密算法计算所述视觉设计稿的每个所述图层对应的结构描述信息的摘要；
37.图层确定单元，被配置为根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要，从所述视觉设计稿中确定出多个第一图层。
38.在一种可能的实施方式中，所述图层确定单元，具体用于：
39.对于第i个图层，将所述视觉设计稿除所述第i个图层之外的图层中，与所述第i个图层的结构描述信息的摘要相同的图层确定为第一图层；其中，i∈(1，n),n为所述视觉设计稿的图层总数。
40.在一种可能的实施方式中，所述装置还包括：
41.第一代码生成模块，被配置为生成每个所述组件单元对应的前端组件代码；
42.第二代码生成模块，被配置为生成除所述第一图层之外的每个第二图层各自对应的前端组件代码；其中，所述第二图层为所述视觉设计稿的图层中除所述第一图层之外的图层，且所述第二图层与所述第一图层的结构描述信息不相同。
43.在一种可能的实施方式中，所述装置还包括：
44.调整模块，被配置为在接收到对所述组件单元的调整指令的情况下，基于所述调整指令调整所述组件单元；
45.替换模块，被配置为在所述视觉设计稿中使用调整后的所述组件单元替换每个所述第一图层。
46.根据本公开实施例的第三方面，提供一种电子设备，包括：
47.处理器；
48.用于存储所述处理器可执行指令的存储器；
49.其中，所述处理器被配置为执行所述指令，以实现如第一方面中任一项所述的图层处理方法。
50.根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如第一方面中任一项所述的图层处理方法。
51.根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如第一方面中任一项所述的图层处理方法。
52.本公开的实施例提供的技术方案至少带来以下有益效果：
53.在本公开的实施例中，通过提取视觉设计稿的每个图层对应的结构描述信息；根据每个图层对应的结构描述信息，从视觉设计稿中确定出多个第一图层，其中，各个第一图层对应的结构描述信息相同；基于第一图层对应的描述信息，生成多个第一图层对应的组件单元，以通过调整组件单元调整多个第一图层。这样，可以将结构描述信息相同的多个图层抽象成一个组件单元，组件单元可以是一个前端元素，通过调整组件单元即可同时实现多个图层的调整，也即可以实现多个前端元素的调整，如此，相对于一个一个调整前端元素而言，提高图层处理效率。
54.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
55.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
56.图1是根据一示例性实施例示出的一种图层处理方法的流程图。
57.图2(a)是根据一示例性实施例示出的一种视觉设计稿的第一图层的示意图。
58.图2(b)是根据一示例性实施例示出的一种视觉设计稿的第一图层的示意图。
59.图3是根据一示例性实施例示出的一种图层处理装置的框图。
60.图4是根据一示例性实施例示出的一种电子设备的框图。
具体实施方式
61.为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
62.需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
63.下面结合附图对本公开实施例提供的图层处理方法、装置、电子设备及存储介质进行详细说明。
64.图1是根据一示例性实施例示出的一种图层处理方法的流程图，该图层处理方法可以应用于电子设备，例如，可以为电脑、平板电脑等。如图1所示，图层处理方法可以包括以下步骤。
65.在步骤s101中，提取视觉设计稿的每个图层对应的结构描述信息。
66.其中，结构描述信息可以包括图层尺寸、图层间距、图层的嵌套层级信息等。其中图层间距用于指示当前图层与其他图层的间距。
67.在本公开实施例中，在视觉设计稿设计完成后，对于某个视觉设计稿，可以提取该视觉设计稿的每个图层的结构描述信息，例如提取视觉设计稿的每个图层的层尺寸、图层间距、图层的嵌套层级信息。可以理解的，可以在每次有视觉设计稿设计完成后，就提取该视觉设计稿的每个图层对应的结构描述信息，以及后续步骤；或者，也可以在多张视觉设计稿设计完成后，提取每张视觉设计稿的每个图层对应的结构描述信息；或者，也可以人工手动触发。
68.在步骤s102中，根据每个图层对应的结构描述信息，从视觉设计稿中确定出多个第一图层。
69.其中，各个第一图层对应的结构描述信息相同。
70.在本公开实施例中，在提取视觉设计稿的每个图层对应的结构描述信息之后，可以比对视觉设计稿的每个图层对应的结构描述信息，以确定视觉设计稿的图层中，结构描述信息相同的多个图层，即第一图层。示例性的，可以将视觉设计稿的每个图层对应的结构描述信息进行比对，若两个已上(含两个)图层对应的结构描述信息相同，则可以将该两个已上(含两个)图层确定为第一图层，以将多个第一图层抽象成一个单独的组件单元。
71.在步骤s103中，基于第一图层对应的结构描述信息，生成多个第一图层对应的组件单元，以通过调整组件单元调整多个第一图层。
72.在本公开实施例中，在确定图层中结构描述信息相同的多个第一图层之后，可以基于第一图层对应的结构描述信息，将多个第一图层抽象为一个对应的组件单元，该组件
单元的结构描述信息与第一图层相同，一个组件单元可以理解为一个前端组件。示例性的，以视觉设计稿包括如图2(a)和图2(b)所示的两个第一图层为例，图2(a)和图2(b)的结构描述信息相同，则可以将图2(a)和图2(b)所示的两个第一图层抽象为一个对应的组件单元。需要说明的是，基于第一图层对应的结构描述信息，抽象生成的多个第一图层对应的组件单元，可以在视觉设计稿还原中替代第一图层。当需要调整多个第一图层时，则可以直接调整多个第一图层对应的组件单元，如此，通过组件单元的调整即可实现组件单元对应的多个第一图层的同时调整。
73.可以理解的，对于结构描述信息唯一的图层，无需单独抽象为一个组件单元，在需要进行调整时，可以按照相关技术中的方法进行调整。
74.在本公开的实施例中，通过提取视觉设计稿的每个图层对应的结构描述信息；根据每个图层对应的结构描述信息，从视觉设计稿中确定出多个第一图层，其中，各个第一图层对应的结构描述信息相同；基于第一图层对应的描述信息，生成多个第一图层对应的组件单元，以通过调整组件单元调整多个第一图层。这样，可以将结构描述信息相同的多个图层抽象成一个组件单元，组件单元可以是一个前端元素，通过调整组件单元即可同时实现多个图层的调整，也即可以实现多个前端元素的调整，如此，相对于一个一个调整前端元素而言，提高视觉设计稿的调整效率。
75.在一种可能的实施方式中，上述步骤中提取视觉设计稿的每个图层对应的结构描述信息的具体实现方式可以如下：
76.提取视觉设计稿的每个图层对应的样式属性信息；
77.根据每个图层对应的样式属性信息，生成每个图层对应的结构描述信息。
78.其中，样式属性信息可以包括图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息。示例性的，图2(a)和图2(b)中椭圆虚线框标出的内容可以是图层文案的一种具体示例。
79.在本公开的实施例中，在提取视觉设计稿的每个图层对应的结构描述信息时，可以逐个对视觉设计稿中的每个图层进行属性转义，提取视觉设计稿的每个图层对应的样式属性信息，例如提取视觉设计稿的每个图层的图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息。然后，可以根据每个图层对应的样式属性信息，生成每个图层对应的结构描述信息。这样，可以通过提取的每个图层的样式属性信息，生成每个图层对应的结构描述信息，为后续生成组件单元提供数据依据。
80.在一种可能的实施方式中，上述步骤中根据每个图层对应的样式属性信息，生成每个图层对应的结构描述信息的具体实现方式可以如下：
81.剔除每个图层对应的样式属性信息中的图层背景和图层文案，得到每个图层对应的剔除后的样式属性信息；
82.对每个图层对应的剔除后的样式属性信息进行结构化描述格式转换，得到每个图层对应的结构描述信息。
83.在本公开的实施例中，考虑到视觉设计稿需要进行前端显示，通常需要为视觉设计稿的每个图层生成对应的前端组件代码。故而，在根据每个图层对应的样式属性信息，生成每个图层对应的结构描述信息时，可以将视觉设计图的每个图层对应的样式属性信息中的图层背景和图层文案剔除，得到每个图层对应的剔除后的样式属性信息。然后，可以对每
个图层对应的剔除后的样式属性信息进行格式转换，将每个图层对应的剔除后的样式属性信息转换为结构化描述格式，得到每个图层对应的结构描述信息。其中，结构化描述格式可以是符合转换为前端组件代码的格式。可以理解的，剔除的图层文案和图层背景可以作为对应的组件单元的可变属性。这样，可以使得个图层对应的结构描述信息更便于转化为前端组件代码，便于进行前端显示。
84.在一种可能的实施方式中，上述步骤中根据每个图层对应的结构描述信息，从视觉设计稿中确定出多个第一图层的具体实现方式可以如下：
85.通过摘要加密算法计算视觉设计稿的每个图层对应的结构描述信息的摘要；
86.根据视觉设计稿的每个图层对应的结构描述信息的摘要，从视觉设计稿中确定出多个第一图层。
87.其中，各个第一图层对应的结构描述信息的摘要相同。
88.在本公开的实施例中，可以通过对比图层的摘要的方式确定第一图层。示例性的，可以通过摘要加密算法计算视觉设计稿的每个图层对应的结构描述信息的摘要，例如可以通过md算法(md2、md4、md5)、sha算法(sha1、sha256、sha384、sha512)、hmac算法等计算视觉设计稿的每个图层对应的结构描述信息的摘要，计算得到的每个图层的结构描述信息的摘要可以认为是通过摘要加密算法计算得到的加密摘要。然后，可以根据视觉设计稿的每个图层对应的结构描述信息的摘要，从视觉设计稿中确定出多个第一图层，示例性的，可以通过比对每个图层的结构描述信息的摘要，确定图层中的结构描述信息的摘要相同的多个第一图层。这样，可以将除剔除的图层文案和图层背景等少数几个变量之外，其余视觉展示信息均一致的多个图层(即图层集)抽象为一个组件单元，而且，通过摘要的方式确定第一图层，可以提高确定第一图层的速率和准确性，从而可以进一步提高视觉设计稿的调整效率。
89.在进一步可能的实施方式中，上述步骤中根据视觉设计稿的每个图层对应的结构描述信息的摘要，从视觉设计稿中确定出多个第一图层的具体实现方式可以如下：
90.对于第i个图层，将视觉设计稿除第i个图层之外的图层中，与第i个图层的结构描述信息的摘要相同的图层确定为第一图层。
91.其中，i∈(1，n),n为视觉设计稿的图层总数，即i可以从1取到n。
92.在本公开的实施例中，可以将任意一个图层的结构描述信息的摘要依次与其他图层的结构描述信息的摘要进行对比，以确定图层中结构描述信息的摘要相同的多个第一图层。示例性的，对于第i个图层而言，可以将读取视觉设计稿除第i个图层之外的图层的摘要，将视觉设计稿除第i个图层之外的图层的摘要与第i个图层的摘要进行比对，将第i个图层以及与第i个图层的摘要相同的摘要对应的图层确定为第一图层。可以理解的，i可以从1取到n，i的取值顺序可以是由大到小或由小到大依次取值，或者也可以自定义设置。可以理解的，每组摘要相同的第一图层，均可以对应由一个单独的组件单元。这样，可以确保摘要相同的图层均能够被确定出来，从而可以为后续组件单元的生成提供准确全面的数据基础。
93.进一步的，第一图层的加密摘要也可以作为第一图层对应的组件单元的摘要。相应的，在已经存在一个或多个组件单元的情况下，在上述步骤中对于第i个图层，将视觉设计稿除第i个图层之外的图层中，与第i个图层的结构描述信息的摘要相同的图层确定为第一图层之前还可以执行如下处理：
94.对于第i个图层，确定已经存在的组件单元的摘要中是否存在与第i个图层的摘要相同的目标摘要；
95.在已经存在的组件单元的摘要中存在与第i个图层的摘要相同的目标摘要的情况下，将目标摘要对应的组件单元确定为第i个图层对应的组件单元。
96.此时，上述除第i个图层之外的图层中，与第i个图层的结构描述信息的摘要相同的图层确定为第一图层的具体实现方式可以为：
97.在不存在的组件单元的摘要中存在与第i个图层的摘要相同的目标摘要的情况下，对于第i个图层，将视觉设计稿除第i个图层之外的图层中，与第i个图层的结构描述信息的摘要相同的图层确定为第一图层。
98.在本公开的实施例中，在将视觉设计稿除第i个图层之外的图层中，与第i个图层的结构描述信息的摘要相同的图层确定为第一图层之前，还可以确定已经存在的组件单元的摘要中是否存在与第i个图层的摘要相同的摘要，即目标摘要。如果已经存在的组件单元的摘要中存在与第i个图层的摘要相同的目标摘要，则可以认为已经存在基于与第i个图层的结构描述数据相同的结构描述数据生成的组件单元，此时，则无需再单独将第i个图层与其他图层的摘要进行比对，可以将目标摘要对应的组件单元确定为第i个图层对应的组件单元。反之，如果不存在的组件单元的摘要中存在与第i个图层的摘要相同的目标摘要，则可以认为不在基于与第i个图层的结构描述数据相同的结构描述数据生成的组件单元，此时，则可以将视觉设计稿除第i个图层之外的图层中，与第i个图层的结构描述信息的摘要相同的图层确定为第一图层，以进行相应的组件单元的生成。这样，可以先将在第i个图层的摘要与已抽象化的组件单元的摘要进行比对，如果摘要相同，则可以将第i个图层与和其摘要相同的组件单元归为同一组件单元，反之，继续将第i个图层的摘要与其他图层摘要进行比对，如此，可以进一步减少生成组件单元的耗时，减少确定第一图层的耗时，从而可以进一步提高视觉设计稿的调整效率。
99.在一种可能的实施方式中，本公开实施例的方法还可以包括如下处理：
100.生成每个组件单元对应的前端组件代码；
101.生成除第一图层之外的每个第二图层各自对应的前端组件代码。
102.其中，第二图层为视觉设计稿的图层中除第一图层之外的图层，且第二图层与第一图层的结构描述信息不相同。
103.在本公开的实施例中，在生成多个第一图层对应的组件单元之后，可以生成每个组件单元对应的前端组件代码，其中，前端组件代码用于在前端显示对应的组件单元。可以理解的，组件单元可能是一个也可以是多个，在组件单元是一个的情况下，生成每个组件单元对应的前端组件代码实际上就是生成一个组件单元对应的前端组件代码。同时，考虑到视觉设计稿中有些图层(即第二图层)可能是独一无二的，对于这些第二图层而言，则可以分别生成每个第二图层各对应的前端组件代码。可以理解的，还可以导出生成后的前端程序代码，同时，还可以将组件单元对应的图层集作为组件单元类的实例使用。这样，组件单元对应的前端组件代码的生成，可以避免生成每个第一图层对应的前端组件代码，如此，可以有效减少前端组件代码的生成量，减少资源消耗，同时还可以提高前端组件代码的可维护性和可扩展性。
104.在一种可能的实施方式中，本公开实施例的方法还可以包括如下处理：
105.在接收到对组件单元的调整指令的情况下，基于调整指令调整组件单元；
106.在视觉设计稿中使用调整后的组件单元替换每个第一图层。
107.在本公开的实施例中，可以通过调整组件单元实现组件单元对应的第一图层的调整。示例性的，技术人员想调整第一图层时，可以操作电子设备调整组件单元，以使电子设备可以接收到对组件单元的调整指令。在接收到对组件单元的调整指令的情况下，可以响应于该调整指令，基于调整指令调整对应的组件单元，调整指令例如可以是调整组件单元的尺寸、间距等。在调整组件单元后，可以在视觉设计稿中使用调整后的组件单元替换前述组件单元对应的每个第一图层。如此，可以通过调整组件单元实现组件单元对应的多个第一图层的调整，从而可以有效提高视觉设计稿的调整效率。
108.基于相同的发明构思，本公开的实施例还提供了一种图层处理装置，如图3所示，图3是根据一示例性实施例示出的一种图层处理装置的框图。参照图3，该图层处理装置300可以包括：
109.信息提取模块310，被配置为提取视觉设计稿的每个图层对应的结构描述信息；
110.图层确定模块320，被配置为根据每个所述图层对应的结构描述信息，从所述视觉设计稿中确定出多个第一图层；其中，各个所述第一图层对应的结构描述信息相同；
111.组件生成模块330，被配置为基于所述第一图层对应的所述描述信息，生成多个所述第一图层对应的组件单元，以通过调整所述组件单元调整多个所述第一图层。
112.在一种可能的实施方式中，所述信息提取模块310，包括：
113.信息提取单元，被配置为提取视觉设计稿的每个图层对应的样式属性信息；其中，所述样式属性信息包括图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息；
114.信息生成单元，被配置为根据每个所述图层对应的样式属性信息，生成每个所述图层对应的结构描述信息。
115.在一种可能的实施方式中，所述信息生成单元，包括：
116.剔除子单元，被配置为剔除每个所述图层对应的样式属性信息中的所述图层背景和图层文案，得到每个所述图层对应的剔除后的样式属性信息；
117.转换子单元，被配置为对每个所述图层对应的剔除后的样式属性信息进行结构化描述格式转换，得到每个所述图层对应的结构描述信息。
118.在一种可能的实施方式中，所述图层确定模块320，包括：
119.摘要计算单元，被配置为通过摘要加密算法计算所述视觉设计稿的每个所述图层对应的结构描述信息的摘要；
120.图层确定单元，被配置为根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要，从所述视觉设计稿中确定出多个第一图层。
121.在一种可能的实施方式中，所述图层确定单元，具体用于：
122.对于第i个图层，将所述视觉设计稿除所述第i个图层之外的图层中，与所述第i个图层的结构描述信息的摘要相同的图层确定为第一图层；其中，i∈(1，n),n为所述视觉设计稿的图层总数。
123.在一种可能的实施方式中，所述装置300还包括：
124.第一代码生成模块，被配置为生成每个所述组件单元对应的前端组件代码；
125.第二代码生成模块，被配置为生成除所述第一图层之外的每个第二图层各自对应
的前端组件代码；其中，所述第二图层为所述视觉设计稿的图层中除所述第一图层之外的图层，且所述第二图层与所述第一图层的结构描述信息不相同。
126.在一种可能的实施方式中，所述装置300还包括：
127.调整模块，被配置为在接收到对所述组件单元的调整指令的情况下，基于所述调整指令调整所述组件单元；
128.替换模块，被配置为在所述视觉设计稿中使用调整后的所述组件单元替换每个所述第一图层。
129.关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
130.根据本公开的实施例，本公开还提供了一种电子设备、一种计算机可读存储介质和一种计算机程序产品。
131.图4示出了可以用来实施本公开的实施例的示例电子设备400的示意性框图。电子设备400旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。
132.如图4所示，电子设备400包括计算单元401，其可以根据存储在只读存储器(rom)402中的计算机程序或者从存储单元408加载到随机访问存储器(ram)403中的计算机程序，来执行各种适当的动作和处理。在ram403中，还可存储设备400操作所需的各种程序和数据。计算单元401、rom402以及ram 403通过总线404彼此相连。输入/输出(i/o)接口405也连接至总线404。
133.电子设备400中的多个部件连接至i/o接口405，包括：输入单元406，例如键盘、鼠标等；输出单元407，例如各种类型的显示器、扬声器等；存储单元408，例如磁盘、光盘等；以及通信单元409，例如网卡、调制解调器、无线通信收发机等。通信单元409允许电子设备400通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
134.计算单元401可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元401的一些示例包括但不限于中央处理单元(cpu)、图形处理单元(gpu)、各种专用的人工智能(ai)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(dsp)、以及任何适当的处理器、控制器、微控制器等。计算单元401执行上文所描述的各个方法和处理，例如图层处理方法。例如，在一些实施例中，图层处理方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元408。在一些实施例中，计算机程序的部分或者全部可以经由rom 402和/或通信单元409而被载入和/或安装到电子设备400上。当计算机程序加载到ram 403并由计算单元401执行时，可以执行上文描述的图层处理方法的一个或多个步骤。备选地，在其他实施例中，计算单元401可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行图层处理方法。
135.本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、芯片上系统的系统(soc)、负载可编程逻辑设备(cpld)、计算机硬件、固件、软件、和/或它们的组合中实
现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
136.用于实施本公开的方法的计算机程序产品的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
137.在本公开的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。计算机可读存储介质可以是机器可读信号介质或机器可读储存介质。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。计算机可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd-rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
138.为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，crt(阴极射线管)或者lcd(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
139.可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(lan)、广域网(wan)、互联网和区块链网络。
140.计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与vps服务("virtual private server"，或简称"vps")中，存在的管理难度大，业务扩展性弱的缺陷。服务器也可以为分布式系统的服务器，或者是结合了区块链的服务器。
141.应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例
如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。
142.上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

技术特征：
1.一种图层处理方法，其特征在于，包括：提取视觉设计稿的每个图层对应的结构描述信息；其中，所述结构描述信息包括图层尺寸、图层间距、图层的嵌套层级信息；根据每个所述图层对应的结构描述信息，从所述视觉设计稿中确定出多个第一图层；其中，各个所述第一图层对应的结构描述信息相同；基于所述第一图层对应的所述结构描述信息，生成多个所述第一图层对应的组件单元，以通过调整所述组件单元调整多个所述第一图层。2.根据权利要求1所述的图层处理方法，其特征在于，所述提取视觉设计稿的每个图层对应的结构描述信息，包括：提取视觉设计稿的每个图层对应的样式属性信息；其中，所述样式属性信息包括图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息；根据每个所述图层对应的样式属性信息，生成每个所述图层对应的结构描述信息。3.根据权利要求2所述的图层处理方法，其特征在于，所述根据每个所述图层对应的样式属性信息，生成每个所述图层对应的结构描述信息，包括：剔除每个所述图层对应的样式属性信息中的所述图层背景和图层文案，得到每个所述图层对应的剔除后的样式属性信息；对每个所述图层对应的剔除后的样式属性信息进行结构化描述格式转换，得到每个所述图层对应的结构描述信息。4.根据权利要求1所述的图层处理方法，其特征在于，所述根据每个所述图层对应的结构描述信息，从所述视觉设计稿中确定出多个第一图层，包括：通过摘要加密算法计算所述视觉设计稿的每个所述图层对应的结构描述信息的摘要；根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要，从所述视觉设计稿中确定出多个第一图层。5.根据权利要求4所述的图层处理方法，其特征在于，所述根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要，从所述视觉设计稿中确定出多个第一图层，包括：对于第i个图层，将所述视觉设计稿除所述第i个图层之外的图层中，与所述第i个图层的结构描述信息的摘要相同的图层确定为第一图层；其中，i∈(1，n),n为所述视觉设计稿的图层总数。6.根据权利要求3所述的图层处理方法，其特征在于，所述方法还包括：生成每个所述组件单元对应的前端组件代码；生成除所述第一图层之外的每个第二图层各自对应的前端组件代码；其中，所述第二图层为所述视觉设计稿的图层中除所述第一图层之外的图层，且所述第二图层与所述第一图层的结构描述信息不相同。7.根据权利要求3所述的图层处理方法，其特征在于，所述方法还包括：在接收到对所述组件单元的调整指令的情况下，基于所述调整指令调整所述组件单元；在所述视觉设计稿中使用调整后的所述组件单元替换每个所述第一图层。8.一种图层处理装置，其特征在于，包括：信息提取模块，被配置为提取视觉设计稿的每个图层对应的结构描述信息；
图层确定模块，被配置为根据每个所述图层对应的结构描述信息，从所述视觉设计稿中确定出多个第一图层；其中，各个所述第一图层对应的结构描述信息相同；组件生成模块，被配置为基于所述第一图层对应的所述描述信息，生成多个所述第一图层对应的组件单元，以通过调整所述组件单元调整多个所述第一图层。9.一种电子设备，其特征在于，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7中任一项所述的图层处理方法。10.一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至7中任一项所述的图层处理方法。

技术总结
本公开关于一种图层处理方法、装置、电子设备及存储介质。其中，所述图层处理方法，包括：提取视觉设计稿的每个图层对应的结构描述信息；根据每个图层对应的结构描述信息，从视觉设计稿中确定出多个第一图层；其中，各个第一图层对应的结构描述信息相同；基于第一图层对应的描述信息，生成多个第一图层对应的组件单元，以通过调整组件单元调整多个第一图层。采用本公开实施例提供的方法，可以提高图层处理效率。理效率。理效率。


技术研发人员：徐青国
受保护的技术使用者：北京达佳互联信息技术有限公司
技术研发日：2023.07.07
技术公布日：2023/10/6