(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211296458.7 (22)申请日 2022.10.21 (71)申请人 珠海格力电器股份有限公司 地址 519000 广东省珠海市珠海横琴新区 汇通三路108号办公6 08 申请人 珠海联云科技有限公司 (72)发明人 娄秀标　李绍斌　黎清顾　曹林　 (74)专利代理 机构 广州京诺知识产权代理有限 公司 44407 专利代理师 冼启泰 (51)Int.Cl. G06F 16/51(2019.01) G06F 16/535(2019.01) G06F 16/54(2019.01) G06F 16/583(2019.01)G06N 3/04(2006.01) G06N 3/08(2006.01) (54)发明名称 一种基于图片检索的UI视图库复用方法和 复用装置 (57)摘要 一种基于图片检索的UI视图库复用方法和 复用装置， 包括以下步骤： 导入已合并图层的UI 视图设计稿， 并生成设计稿的当前DSL视图树； 将 当前DSL视图树与UI视图库中的已存DSL视图树 进行比较， 判断是否存在相似的DSL视图树： 若是 则导出相应的U I视图设计稿的实现代码； 若否则 将当前DSL视图树和U I视图设计稿以及实现代码 存储在UI视图库中。 本发明将设计稿的DSL视图 树进行检索比对， 获取相似设计稿的实现代码， 并对其进行导出复用， 降低了设计稿转码的研发 成本， 减少相似设计稿的重复性开发工作， 提高 了前端工程师的开发效率。 权利要求书2页 说明书6页 附图1页 CN 115455220 A 2022.12.09 CN 115455220 A 1.一种基于图片检索的UI视图库复用方法， 其特 征在于： 包括以下步骤： 导入已合并图层的UI视图设计稿， 并生成设计稿的当前D SL视图树； 将当前DSL视图树与UI视图库中的已存DSL视图树进行比较， 判断是否存在相似的DSL 视图树： 若是则导出相应的UI视图设计稿的实现代码； 若否则将当前D SL视图树和UI视图设计稿以及实现代码存 储在UI视图库中。 2.根据权利权利要求1所述的一种基于图片检索的UI视图库复用方法， 其特征在于， 所 述导入已合并图层的UI视图设计稿， 并生成设计稿的当前D SL视图树 步骤中还 包括： 获取设计稿的扁平化数据； 对设计稿的结构进行判定； 将大区域分解 为子区域， 生成子区域的列表组件； 将子区域的列表组件进行合并， 生成设计稿的当前D SL视图树。 3.根据权利要求2所述的一种基于图片检索的UI视图库复用方法， 其特征在于： 所述对 设计稿的结构判定包括先根据Sketch源文件， 获取UI视图设计稿的扁平化数据， 所述扁平 化数据包括图层的JSON数据， 再通过布局结构判定方法确定设计稿的整体结构的布局结 构， 所述布局结构包括有 行布局、 列布局、 包含布局、 成组布局、 悬浮布局的其中一种或两种 以上。 4.根据权利要求3所述的一种基于图片检索的UI视图库复用方法， 其特征在于： 将设计 稿一部分区域视为一个子区域， 基于图层的位置、 大小信息， 计算每个图层的上/下/左/右 边缘坐标与其 他图层的相对关系， 将子区域分解成更小的子区域， 然后执 行以下判断步骤； S321， 判断子区域是否是 行布局， 是则生成行布局， 否则执 行S322步骤； S322， 判断子区域是否为列布局， 是则生成列布局， 否则执 行S323步骤； S323， 判断子区域是否为包含布局， 是则以子区域生成DSL视图树后生成包含布局， 否 则执行S324步骤； S324， 生成交叉规则参数， 与历史规则库中参数对比， 根据两标签属于共生关系或层叠 关系对应生成 成组布局或悬浮布局。 5.根据权利要求4所述的一种基于图片检索的UI视图库复用方法， 其特征在于： 所述布 局结构的判定依赖矩形 的上下左右坐标， 再根据矩形与矩形 的相交、 相 离和包含位置关系 将布局结构进行以下分类： 行布局： 每 个子区域 为相离位置关系； 列布局： 文字与文字之间为相离位置关系； 包含布局： 某一个标签包 含另一个标签的位置关系； 成组布局： 一标签与另一标签属于共生 位置关系； 悬浮布局： 一标签与另一标签具有层叠位置关系。 6.根据权利要求5所述的一种基于图片检索的UI视图库复用方法， 其特征在于， 所述将 布局结构还 包括以下列表 布局： 单状态列表组件： 每一个子区域的布局结构为相同； 多状态列表组件： 每个子区域有多种状态， 包括选 中状态和非选 中状态， 并且不同状态 的布局结构不相同。权　利　要　求　书 1/2 页 2 CN 115455220 A 27.根据权利要求2所述的一种基于图片检索的UI视图库复用方法， 其特征在于， 所述将 大区域分解 为子区域， 生成子区域的列表组件 包括： 将整体区域分解为小块儿 的子区域， 再次通过布局结构判定方法对子区域的布局结构 进行判定， 并在子区域生成DSL视图树， 然后再将子区域中生成的DSL视图树合并为列表组 件， 最后将各列表组件合并在一 起生成UI视图设计稿的D SL视图树。 8.一种基于图片检索的UI视图库复用装置， 包括存储器和处理器， 其特征在于： 所述处 理器通过调用所述存储器中存储的控制程序， 以执行如权利要求1 ‑7任一项所述的一种基 于图片检索的UI视图库复用方法。 9.一种计算机设备， 包括存储器、 处理器及存储在所述存储器上并可在所述处理器上 运行的计算机程序， 其特征在于： 所述处理器执行所述计算机程序时实现如权利要求 1‑7任 一项所述的一种基于图片检索的UI视图库复用方法。 10.一种计算机可读存储介质， 其特征在于， 所述计算机可读存储介质存储有计算机程 序， 所述计算机程序当被处理器执行时使所述处理器执行如权利要求1 ‑7任一项所述的一 种基于图片检索的UI视图库复用方法。权　利　要　求　书 2/2 页 3 CN 115455220 A 3