(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210364974.2 (22)申请日 2022.04.08 (71)申请人 北京字节跳动网络技 术有限公司 地址 100041 北京市石景山区实兴大街3 0 号院3号楼 2层B-0035房间 (72)发明人 杨健　徐星宇　 (74)专利代理 机构 北京中知法苑知识产权代理 有限公司 1 1226 专利代理师 李明 (51)Int.Cl. G06F 8/38(2018.01) G06F 8/41(2018.01) G06F 9/451(2018.01) (54)发明名称 界面中组成元素的重组方法、 装置以及计算 机设备 (57)摘要 本公开提供了一种界面中组成元素的重组 方法、 装置以及计算机设备， 其中， 该方法包括： 获取界面设计稿中的各个界面组成元素之间的 原始逻辑关系； 基于所述原始逻辑关系确定目标 约束树； 所述目标约束树中各个节 点间的关系用 于表征各个界面组成元素之间的位置约束关系， 所述目标约束树中对应相同父节点且位置约束 关系相同的节 点位于相同层 级； 基于所述原始逻 辑关系对所述各个界面组成元素间的逻辑关系 进行重组， 得到重组逻辑关系； 基于所述重组逻 辑关系和所述目标约束树， 确定所述各个界面组 成元素的目标逻辑关系， 以通过所述目标逻辑关 系对所述界面设计稿进行代码化处 理。 权利要求书2页 说明书14页 附图2页 CN 114860234 A 2022.08.05 CN 114860234 A 1.一种界面中组成元 素的重组方法， 其特 征在于， 包括： 获取界面设计稿中的各个界面组成元 素之间的原 始逻辑关系； 基于所述原始逻辑关系确定目标约束树； 所述目标约束树中各个节点间的关系用于表 征各个界面组成元素之 间的位置约束关系， 所述目标约束树中对应相同父节点且位置约束 关系相同的节点 位于相同层级； 基于所述原始逻辑关系 对所述各个界面组成元素间的逻辑关系 进行重组， 得到重组逻 辑关系； 基于所述重组逻辑关系和所述目标约束树， 确定所述各个界面组成元素的目标逻辑关 系， 以通过 所述目标逻辑关系对所述界面设计稿进行代码化处 理。 2.根据权利要求1所述的方法， 其特征在于， 所述基于所述原始逻辑关系 对所述各个界 面组成元 素间的逻辑关系进行重组， 得到 重组逻辑关系， 包括： 基于所述界面设计稿中的界面组成元素的原始逻辑关系， 对所述界面组成元素进行布 局分割， 得到多个子布局结构； 根据所述多个子布局结构中所包含的界面组成元素间的原始逻辑关系， 确定每个子布 局结构对应的逻辑关系子树； 根据所述逻辑关系子树， 确定所述重组逻辑关系； 其中， 所述重组逻辑关系包含每个所 述子布局结构对应的逻辑关系子树。 3.根据权利要求2所述的方法， 其特征在于， 所述基于所述界面设计稿中的界面组成元 素的原始逻辑关系， 对所述界面组成元 素进行布局分割， 得到多个子布局结构， 包括： 确定所述界面设计稿的布局类型； 在确定出所述界面设计稿的布局类型为第 一布局类型的情况下， 对所述界面设计稿中 的界面组成元素进 行单方向布局分割， 得到多个子布局结构； 其中， 所述单方向布局分割用 于表征按照一个分割方向对界面组成元 素进行分割； 在确定出所述界面设计稿的布局类型为第 二布局类型的情况下， 对所述界面设计稿中 的界面组成元素进行双方向布局分割， 得到多个子布局结构； 所述双方向布局分割用于表 征按照两个分割方向对界面组成元 素进行分割。 4.根据权利要求2所述的方法， 其特征在于， 所述根据所述多个子布局结构中所包含的 界面组成元 素间的逻辑关系， 确定每 个子布局结构对应的逻辑关系子树， 包括： 确定所述子布局结构中界面组成元素的父节点； 所述父节点为包含所述逻辑关系子树 中的界面组成元 素的节点； 基于所述目标约束树， 确定所述父节点和所述子布局结构中界面组成元素之间的位置 约束关系； 确定用于表征所述父节点和所述子布局结构中界面组成元素之间的位置约束关系的 目标关系子树， 并将所述目标关系子树确定为所述逻辑关系子树。 5.根据权利要求1所述的方法， 其特征在于， 所述基于所述原始逻辑关系 对所述各个界 面组成元 素间的逻辑关系进行重组， 得到 重组逻辑关系， 包括： 基于所述原 始逻辑关系确定所述界面设计稿的各个界面组成元 素之间的距离阈值； 获取所述界面设计稿的各个界面组成元素之间的距离值， 并将距离值小于所述距离 阈 值的界面组成元 素确定为 一个界面组成元 素合集；权　利　要　求　书 1/2 页 2 CN 114860234 A 2根据所述界面组成元素合集中包含的界面组成元素间的原始逻辑关系， 确定每个界面 组成元素合集对应的逻辑关系子树； 根据所述逻辑关系子树确定所述重组逻辑关系； 所述重组逻辑关系包含多个所述界面 组成元素合集对应的逻辑关系子树。 6.根据权利要求5所述的方法， 其特征在于， 所述获取所述界面设计稿的各个界面组成 元素之间的距离值， 并将距离值小于所述距离阈值的界面组成元素确定为一个界面组成元 素合集， 包括： 获取每个界面组成元 素与相邻界面组成元 素之间的距离值； 在所述相邻界面组成元素的距离值小于所述距离 阈值的情况下， 将所述相邻界面组成 元素与对应的界面组成元 素确定为 一个所述界面组成元 素合集。 7.根据权利要求1所述的方法， 其特征在于， 所述基于所述原始逻辑关系确定目标约束 树， 包括： 获取所述界面设计稿中各个界面组成元素的位置约束关系以及各个所述界面组成元 素的所属层级； 基于所述 位置约束关系确定所述父节点相同的目标界面组成元 素； 基于所述原始逻辑关系将对应相同父节点的所述目标界面组成元素进行划分， 得到所 述目标约束树。 8.一种界面中组成元 素的重组装置， 其特 征在于， 包括： 获取单元， 用于获取界面设计稿中的各个界面组成元 素之间的原 始逻辑关系； 第一确定单元， 用于基于所述原始逻辑关系确定目标约束树； 所述目标约束树中各个 节点间的关系用于表征各个界面组成元素之间的位置约束关系， 所述目标约束树中对应相 同父节点且位置约束关系相同的节点 位于相同层级； 重组单元， 用于基于所述原始逻辑关系对所述各个界面组成元素间的逻辑关系进行重 组， 得到重组逻辑关系； 第二确定单元， 用于基于所述重组逻辑关系和所述目标约束树， 确定所述各个界面组 成元素的目标逻辑关系， 以通过 所述目标逻辑关系对所述界面设计稿进行代码化处 理。 9.一种计算机设备， 其特征在于， 包括： 处理器、 存储器和总线， 所述存储器存储有所述 处理器可执行 的机器可读指令， 当计算机设备运行时， 所述处理器与所述存储器之间通过 总线通信， 所述机器可读指 令被所述处理器执行时执行如权利要求 1至7任意一项 所述的界 面中组成元 素的重组方法的步骤。 10.一种计算机可读存储介质， 其特征在于， 该计算机可读存储介质上存储有计算机程 序， 该计算机程序被处理器运行时执行如权利要求1至7任意一项 所述的界面中组成元素的 重组方法的步骤。权　利　要　求　书 2/2 页 3 CN 114860234 A 3