System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 设计稿的约束检测方法、装置、计算机设备及存储介质制造方法及图纸_技高网

设计稿的约束检测方法、装置、计算机设备及存储介质制造方法及图纸

技术编号:40547000 阅读:5 留言:0更新日期:2024-03-05 19:04
本公开提供了一种设计稿的约束检测方法、装置、计算机设备及存储介质,其中,该方法包括:获取目标界面设计稿对应的目标界面代码;解析目标界面代码,确定各代码节点分别对应的界面组件的展示属性信息、展示约束信息以及各代码节点之间的层级关系;基于各代码节点分别对应的界面组件的展示属性信息和展示约束信息,确定各代码节点分别对应的界面组件的运动轨迹;基于各代码节点分别对应的界面组件的运动轨迹、各代码节点分别对应的界面组件的展示属性信息以及各代码节点之间的层级关系,确定所述目标界面设计稿中各界面组件的展示约束信息对应的约束检测结果,所述约束检测结果用于表征各展示约束信息是否合理。

【技术实现步骤摘要】

本公开涉及计算机,具体而言,涉及一种设计稿的约束检测方法、装置、计算机设备及存储介质


技术介绍

1、设计稿转代码(design 2code,以下简称d2c)作为软件开发技术的必然产物与趋势,能够实现将设计师设计好的待转换的界面设计稿换为界面代码。

2、相关技术中,在对界面设计稿进行设计的过程中,往往会对界面设计稿中的界面组件设置展示约束信息,从而实现响应式的设计稿编辑效果,但由于展示约束信息设置的不够合理等原因,在开发人员开发界面设计稿的过程中可能会出现原本不重叠的界面组件发生重叠,和/或,原本重叠的界面组件不重叠的异常情况,从而使得开发人员可能需要反复调整展示约束信息,从而降低开发人员的开发效率。


技术实现思路

1、本公开实施例至少提供一种设计稿的约束检测方法、装置、计算机设备及存储介质。

2、第一方面,本公开实施例提供了一种设计稿的约束检测方法,包括:

3、获取目标界面设计稿对应的目标界面代码;其中,所述目标界面代码中包含多层级的代码节点,不同代码节点对应不同的界面组件;

4、解析所述目标界面代码,确定各代码节点分别对应的界面组件的展示属性信息、展示约束信息以及各代码节点之间的层级关系;其中,所述展示约束信息用于限制代码节点的子节点对应的界面组件的展示位置;

5、基于各代码节点分别对应的界面组件的展示属性信息和展示约束信息,确定各代码节点分别对应的界面组件的运动轨迹;所述运动轨迹用于表征界面组件在所述目标界面设计稿中能够被部署的位置;

6、基于各代码节点分别对应的界面组件的运动轨迹、各代码节点分别对应的界面组件的展示属性信息以及各代码节点之间的层级关系,确定所述目标界面设计稿中各界面组件的展示约束信息对应的约束检测结果,所述约束检测结果用于表征各展示约束信息是否合理。

7、一种可能的实施方式中,所述目标界面代码存储时的数据格式为节点树;

8、所述解析所述目标界面代码,确定各代码节点分别对应的界面组件的展示属性信息、展示约束信息以及各代码节点之间的层级关系,包括:

9、逐层对所述目标界面代码对应的目标节点树进行遍历,确定各代码节点分别对应的界面组件的展示属性信息、展示约束信息以及各代码节点之间的层级关系。

10、一种可能的实施方式中,所述基于各代码节点分别对应的界面组件的展示属性信息和展示约束信息,确定各代码节点分别对应的界面组件的运动轨迹,包括:

11、针对所述目标节点树中第n层的任一所述代码节点,基于该代码节点的父节点对应的界面组件的运动轨迹、该代码节点的父节点对应的展示约束信息以及该代码节点对应的界面组件的展示属性信息,确定该代码节点对应的界面组件的运动轨迹;其中,n为大于1的正整数,所述目标节点树中第一层的代码节点对应的界面组件的运动轨迹,为基于预设展示约束信息和所述第一层的代码节点对应的界面组件的展示属性信息确定的。

12、一种可能的实施方式中,所述基于各代码节点分别对应的界面组件的运动轨迹、各代码节点分别对应的界面组件的展示属性信息以及各代码节点之间的层级关系,确定所述目标界面设计稿中各界面组件的展示约束信息对应的约束检测结果,包括:

13、基于各代码节点之间的层级关系,确定所述目标界面代码中的兄弟节点;

14、基于所述兄弟节点分别对应的界面组件的展示属性信息,确定所述兄弟节点对应的界面组件的初始重叠关系;以及,基于所述兄弟节点分别对应的界面组件的运动轨迹,确定所述兄弟节点对应的界面组件的目标重叠关系;其中,所述初始重叠关系用于表征所述兄弟节点对应的界面组件的初始展示位置是否产生重叠,所述目标重叠关系用于表征所述兄弟节点对应的界面组件在按照运动轨迹进行运动时是否产生重叠;

15、基于所述初始重叠关系和所述目标重叠关系,确定所述目标界面设计稿对应的约束检测结果。

16、一种可能的实施方式中,所述界面组件的展示属性信息包括界面组件的初始展示位置信息;

17、所述基于所述兄弟节点分别对应的界面组件的展示属性信息,确定所述兄弟节点对应的界面组件的初始重叠关系,包括:

18、基于所述兄弟节点分别对应的界面组件的初始展示位置信息,确定所述兄弟节点分别对应的界面组件的初始重叠关系。

19、一种可能的实施方式中,所述运动轨迹包括在水平方向上的第一运动轨迹,以及在垂直方向上的第二运动轨迹;

20、所述基于所述兄弟节点分别对应的界面组件的运动轨迹,确定所述兄弟节点对应的界面组件的目标重叠关系,包括:

21、基于所述兄弟节点分别对应的界面组件的第一运动轨迹,确定所述兄弟节点对应的界面组件在水平方向上的目标重叠关系;以及,

22、基于所述兄弟节点分别对应的界面组件的第二运动轨迹,确定所述兄弟节点对应的界面组件在垂直方向上的目标重叠关系。

23、一种可能的实施方式中,所述基于所述初始重叠关系和所述目标重叠关系,确定所述目标界面设计稿对应的约束检测结果,包括:

24、在检测到所述初始重叠关系与所述目标重叠关系不匹配的情况下,确定所述目标界面设计稿对应的约束检测结果为检测不通过;以及,

25、在检测到所述初始重叠关系与所述目标重叠关系匹配的情况下,确定所述目标界面设计稿对应的约束检测结果为检测通过。

26、一种可能的实施方式中,所述方法还包括:

27、在检测到所述目标界面设计稿对应的约束检测结果为检测不通过的情况下,将各代码节点分别对应的界面组件的展示约束信息调整为目标约束信息;或者,删除各代码节点分别对应的界面组件的展示约束信息。

28、第二方面,本公开实施例还提供一种设计稿的约束检测装置,包括:

29、获取模块,用于获取目标界面设计稿对应的目标界面代码;其中,所述目标界面代码中包含多层级的代码节点,不同代码节点对应不同的界面组件;

30、解析模块,用于解析所述目标界面代码,确定各代码节点分别对应的界面组件的展示属性信息、展示约束信息以及各代码节点之间的层级关系;其中,所述展示约束信息用于限制代码节点的子节点对应的界面组件的展示位置;

31、第一确定模块,用于基于各代码节点分别对应的界面组件的展示属性信息和展示约束信息,确定各代码节点分别对应的界面组件的运动轨迹;所述运动轨迹用于表征界面组件在所述目标界面设计稿中能够被部署的位置;

32、第二确定模块,用于基于各代码节点分别对应的界面组件的运动轨迹、各代码节点分别对应的界面组件的展示属性信息以及各代码节点之间的层级关系,确定所述目标界面设计稿中各界面组件的展示约束信息对应的约束检测结果,所述约束检测结果用于表征各展示约束信息是否合理。

33、一种可能的实施方式中,所述目标界面代码存储时的数据格式为节点树;

34、所述解析模块,在解析所述目标界面代码,确定各代码节点分别对应本文档来自技高网...

【技术保护点】

1.一种设计稿的约束检测方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述目标界面代码存储时的数据格式为节点树;

3.根据权利要求2所述的方法,其特征在于,所述基于各代码节点分别对应的界面组件的展示属性信息和展示约束信息,确定各代码节点分别对应的界面组件的运动轨迹,包括:

4.根据权利要求1所述的方法,其特征在于,所述基于各代码节点分别对应的界面组件的运动轨迹、各代码节点分别对应的界面组件的展示属性信息以及各代码节点之间的层级关系,确定所述目标界面设计稿中各界面组件的展示约束信息对应的约束检测结果,包括:

5.根据权利要求4所述的方法,其特征在于,所述界面组件的展示属性信息包括界面组件的初始展示位置信息;

6.根据权利要求4所述的方法,其特征在于,所述运动轨迹包括在水平方向上的第一运动轨迹,以及在垂直方向上的第二运动轨迹;

7.根据权利要求4所述的方法,其特征在于,所述基于所述初始重叠关系和所述目标重叠关系,确定所述目标界面设计稿对应的约束检测结果,包括:

8.根据权利要求7所述的方法,其特征在于,所述方法还包括:

9.一种设计稿的约束检测装置,其特征在于,包括:

10.一种计算机设备,其特征在于,包括:处理器、存储器和总线,所述存储器存储有所述处理器可执行的机器可读指令,当计算机设备运行时,所述处理器与所述存储器之间通过总线通信,所述机器可读指令被所述处理器执行时执行如权利要求1至8任一所述的设计稿的约束检测方法的步骤。

11.一种计算机可读存储介质,其特征在于,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行如权利要求1至8任一所述的设计稿的约束检测方法的步骤。

...

【技术特征摘要】

1.一种设计稿的约束检测方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述目标界面代码存储时的数据格式为节点树;

3.根据权利要求2所述的方法,其特征在于,所述基于各代码节点分别对应的界面组件的展示属性信息和展示约束信息,确定各代码节点分别对应的界面组件的运动轨迹,包括:

4.根据权利要求1所述的方法,其特征在于,所述基于各代码节点分别对应的界面组件的运动轨迹、各代码节点分别对应的界面组件的展示属性信息以及各代码节点之间的层级关系,确定所述目标界面设计稿中各界面组件的展示约束信息对应的约束检测结果,包括:

5.根据权利要求4所述的方法,其特征在于,所述界面组件的展示属性信息包括界面组件的初始展示位置信息;

6.根据权利要求4所述的方法,其特征在于,所述运动轨迹包括在水平方向上的第一运动...

【专利技术属性】
技术研发人员:杨健刘佳
申请(专利权)人:抖音视界有限公司
类型:发明
国别省市:

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

1