图层处理方法、装置、电子设备及存储介质制造方法及图纸

技术编号:39035271 阅读:9 留言:0更新日期:2023-10-10 11:48
本公开关于一种图层处理方法、装置、电子设备及存储介质。其中,所述图层处理方法,包括:提取视觉设计稿的每个图层对应的结构描述信息;根据每个图层对应的结构描述信息,从视觉设计稿中确定出多个第一图层;其中,各个第一图层对应的结构描述信息相同;基于第一图层对应的描述信息,生成多个第一图层对应的组件单元,以通过调整组件单元调整多个第一图层。采用本公开实施例提供的方法,可以提高图层处理效率。理效率。理效率。

【技术实现步骤摘要】
图层处理方法、装置、电子设备及存储介质


[0001]本公开涉及互联网
,尤其涉及一种图层处理方法、装置、电子设备及存储介质。

技术介绍

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

技术实现思路

[0003]本公开提供一种图层处理方法、装置、电子设备及存储介质,以至少解决相关技术中图层处理效率较低的问题。本公开的技术方案如下:
[0004]根据本公开实施例的第一方面,提供一种图层处理方法,包括:
[0005]提取视觉设计稿的每个图层对应的结构描述信息;其中,所述结构描述信息包括图层尺寸、图层间距、图层的嵌套层级信息;
[0006]根据每个所述图层对应的结构描述信息,从所述视觉设计稿中确定出多个第一图层;其中,各个所述第一图层对应的结构描述信息相同;
[0007]基于所述第一图层对应的所述结构描述信息,生成多个所述第一图层对应的组件单元,以通过调整所述组件单元调整多个所述第一图层。
[0008]在一种可能的实施方式中,所述提取视觉设计稿的每个图层对应的结构描述信息,包括:
[0009]提取视觉设计稿的每个图层对应的样式属性信息;其中,所述样式属性信息包括图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息;
[0010]根据每个所述图层对应的样式属性信息,生成每个所述图层对应的结构描述信息。
[0011]在一种可能的实施方式中,所述根据每个所述图层对应的样式属性信息,生成每个所述图层对应的结构描述信息,包括:
[0012]剔除每个所述图层对应的样式属性信息中的所述图层背景和图层文案,得到每个所述图层对应的剔除后的样式属性信息;
[0013]对每个所述图层对应的剔除后的样式属性信息进行结构化描述格式转换,得到每个所述图层对应的结构描述信息。
[0014]在一种可能的实施方式中,所述根据每个所述图层对应的结构描述信息,从所述视觉设计稿中确定出多个第一图层;其中,各个所述第一图层对应的结构描述信息相同,包括:
[0015]通过摘要加密算法计算所述视觉设计稿的每个所述图层对应的结构描述信息的
摘要;
[0016]根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要,从所述视觉设计稿中确定出多个第一图层。
[0017]在一种可能的实施方式中,所述根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要,从所述视觉设计稿中确定出多个第一图层,包括:
[0018]对于第i个图层,将所述视觉设计稿除所述第i个图层之外的图层中,与所述第i个图层的结构描述信息的摘要相同的图层确定为第一图层;其中,i∈(1,n),n为所述视觉设计稿的图层总数。
[0019]在一种可能的实施方式中,所述方法还包括:
[0020]生成每个所述组件单元对应的前端组件代码;
[0021]生成除所述第一图层之外的每个第二图层各自对应的前端组件代码;其中,所述第二图层为所述视觉设计稿的图层中除所述第一图层之外的图层,且所述第二图层与所述第一图层的结构描述信息不相同。
[0022]在一种可能的实施方式中,所述方法还包括:
[0023]在接收到对所述组件单元的调整指令的情况下,基于所述调整指令调整所述组件单元;
[0024]在所述视觉设计稿中使用调整后的所述组件单元替换每个所述第一图层。
[0025]根据本公开实施例的第二方面,提供一种图层处理装置,包括:
[0026]信息提取模块,被配置为提取视觉设计稿的每个图层对应的结构描述信息;
[0027]图层确定模块,被配置为根据每个所述图层对应的结构描述信息,从所述视觉设计稿中确定出多个第一图层;其中,各个所述第一图层对应的结构描述信息相同;
[0028]组件生成模块,被配置为基于所述第一图层对应的所述描述信息,生成多个所述第一图层对应的组件单元,以通过调整所述组件单元调整多个所述第一图层。
[0029]在一种可能的实施方式中,所述信息提取模块,包括:
[0030]信息提取单元,被配置为提取视觉设计稿的每个图层对应的样式属性信息;其中,所述样式属性信息包括图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息;
[0031]信息生成单元,被配置为根据每个所述图层对应的样式属性信息,生成每个所述图层对应的结构描述信息。
[0032]在一种可能的实施方式中,所述信息生成单元,包括:
[0033]剔除子单元,被配置为剔除每个所述图层对应的样式属性信息中的所述图层背景和图层文案,得到每个所述图层对应的剔除后的样式属性信息;
[0034]转换子单元,被配置为对每个所述图层对应的剔除后的样式属性信息进行结构化描述格式转换,得到每个所述图层对应的结构描述信息。
[0035]在一种可能的实施方式中,所述图层确定模块,包括:
[0036]摘要计算单元,被配置为通过摘要加密算法计算所述视觉设计稿的每个所述图层对应的结构描述信息的摘要;
[0037]图层确定单元,被配置为根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要,从所述视觉设计稿中确定出多个第一图层。
[0038]在一种可能的实施方式中,所述图层确定单元,具体用于:
[0039]对于第i个图层,将所述视觉设计稿除所述第i个图层之外的图层中,与所述第i个图层的结构描述信息的摘要相同的图层确定为第一图层;其中,i∈(1,n),n为所述视觉设计稿的图层总数。
[0040]在一种可能的实施方式中,所述装置还包括:
[0041]第一代码生成模块,被配置为生成每个所述组件单元对应的前端组件代码;
[0042]第二代码生成模块,被配置为生成除所述第一图层之外的每个第二图层各自对应的前端组件代码;其中,所述第二图层为所述视觉设计稿的图层中除所述第一图层之外的图层,且所述第二图层与所述第一图层的结构描述信息不相同。
[0043]在一种可能的实施方式中,所述装置还包括:
[0044]调整模块,被配置为在接收到对所述组件单元的调整指令的情况下,基于所述调整指令调整所述组件单元;
[0045]替换模块,被配置为在所述视觉设计稿中使用调整后的所述组件单元替换每个所述第一图层。
[0046]根据本公开实施例的第三方面,提供一种电子设备,包括:
[0047]处理器;
[0048]用于存储所述处理器可执行指令的存储器;
[0049]其中,所述处理器被配置为执行所述指令,以实现如第一方面中任一项所述的图层处理方法。
[0050]根据本公开实施例的第四方面,提供一种计本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种图层处理方法,其特征在于,包括:提取视觉设计稿的每个图层对应的结构描述信息;其中,所述结构描述信息包括图层尺寸、图层间距、图层的嵌套层级信息;根据每个所述图层对应的结构描述信息,从所述视觉设计稿中确定出多个第一图层;其中,各个所述第一图层对应的结构描述信息相同;基于所述第一图层对应的所述结构描述信息,生成多个所述第一图层对应的组件单元,以通过调整所述组件单元调整多个所述第一图层。2.根据权利要求1所述的图层处理方法,其特征在于,所述提取视觉设计稿的每个图层对应的结构描述信息,包括:提取视觉设计稿的每个图层对应的样式属性信息;其中,所述样式属性信息包括图层尺寸、图层间距、图层背景、图层文案、图层的嵌套层级信息;根据每个所述图层对应的样式属性信息,生成每个所述图层对应的结构描述信息。3.根据权利要求2所述的图层处理方法,其特征在于,所述根据每个所述图层对应的样式属性信息,生成每个所述图层对应的结构描述信息,包括:剔除每个所述图层对应的样式属性信息中的所述图层背景和图层文案,得到每个所述图层对应的剔除后的样式属性信息;对每个所述图层对应的剔除后的样式属性信息进行结构化描述格式转换,得到每个所述图层对应的结构描述信息。4.根据权利要求1所述的图层处理方法,其特征在于,所述根据每个所述图层对应的结构描述信息,从所述视觉设计稿中确定出多个第一图层,包括:通过摘要加密算法计算所述视觉设计稿的每个所述图层对应的结构描述信息的摘要;根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要,从所述视觉设计稿中确定出多个第一图层。5.根据权利要求4所述的图层处理方法,其特征在于,所述根据所述视觉设计稿的每个所述图层对应的结构描述信息的摘要...

【专利技术属性】
技术研发人员:徐青国
申请(专利权)人:北京达佳互联信息技术有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1