一种基于图片检索的UI视图库复用方法和复用装置与流程

阅读：评论：0

一种基于图片检索的ui视图库复用方法和复用装置
技术领域
1.本发明涉及ui视图库的开发技术领域，特别是一种基于图片检索的ui视图库复用方法和复用装置。

背景技术：

2.随着网络信息化的快速发展，前端工程师们所收到的开发任务也越来越多，这其中难免会遇见很多相似设计稿(ui视图)开发。
3.现有开发环境中，在面对关于相似设计稿(ui视图)开发任务时；往往需要进行很多重复性的开发工作，而这部分工作复杂度较低且工作占比较高。
4.中国专利cn111353552a公开了一种基于感知哈希算法的图像相似度对比方法，其解决了视图特征提取繁琐的问题，采用了基于sketch源文件，获取设计稿(ui视图)的图层json数据并转化为dsl(视图树)方案，但该方案存在凭借人工的肉眼判断视图树的相似与否，没有感知哈希算法计算出的视图相似度精确的问题。
5.中国专利cn112651331a公开了文本表格提取方法、系统、计算机设备及存储介质,其解决了只能提取表格布局结构的问题，采用了布局结构的分类判定方案，但该方案存在根据视图布局结构判定方法只能得到大概的整体布局结构，而不能对表格组件等局部区域的结构进行精确捕捉的问题。

技术实现要素：

6.针对上述不能对相似设计稿的dsl视图树进行检索比较和相似设计稿的实现代码不能重复利用问题，本发明提供一种基于图片检索的ui视图库复用方法和复用装置。
7.为实现上述目的，本发明选用如下技术方案：一种基于图片检索的ui视图库复用方法，包括以下步骤：
8.导入已合并图层的ui视图设计稿，并生成设计稿的当前dsl视图树；
9.将当前dsl视图树与ui视图库中的已存dsl视图树进行比较，判断是否存在相似的dsl视图树：
10.若是则导出相应的ui视图设计稿的实现代码；
11.若否则将当前dsl视图树和ui视图设计稿以及实现代码存储在ui视图库中。
12.优选地，所述导入已合并图层的ui视图设计稿，并生成设计稿的当前dsl视图树步骤中还包括：
13.获取设计稿的扁平化数据；
14.对设计稿的结构进行判定；
15.将大区域分解为子区域，生成子区域的列表组件；
16.将子区域的列表组件进行合并，生成设计稿的当前dsl视图树。
17.优选地，所述对设计稿的结构判定包括先根据sketch源文件，获取ui视图设计稿的扁平化数据，所述扁平化数据包括图层的json数据，再通过布局结构判定方法确定设计
稿的整体结构的布局结构，所述布局结构包括有行布局、列布局、包含布局、成组布局、悬浮布局的其中一种或两种以上。
18.优选地，将设计稿一部分区域视为一个子区域，基于图层的位置、大小信息，计算每个图层的上/下/左/右边缘坐标与其他图层的相对关系，将子区域分解成更小的子区域，然后执行以下判断步骤；
19.s321，判断子区域是否是行布局，是则生成行布局，否则执行s322步骤；
20.s322，判断子区域是否为列布局，是则生成列布局，否则执行s323步骤；
21.s323，判断子区域是否为包含布局，是则以子区域生成dsl视图树后生成包含布局，否则执行s324步骤；
22.s324，生成交叉规则参数，与历史规则库中参数对比，根据两标签属于共生关系或层叠关系对应生成成组布局或悬浮布局。
23.优选地，所述布局结构的判定依赖矩形的上下左右坐标，再根据矩形与矩形的相交、相离和包含位置关系将布局结构进行以下分类：
24.行布局：每个子区域为相离位置关系；
25.列布局：文字与文字之间为相离位置关系；
26.包含布局：某一个标签包含另一个标签的位置关系；
27.成组布局：一标签与另一标签属于共生位置关系；
28.悬浮布局：一标签与另一标签具有层叠位置关系。
29.优选地，所述将布局结构还包括以下列表布局：
30.单状态列表组件：每一个子区域的布局结构为相同；
31.多状态列表组件：每个子区域有多种状态，包括选中状态和非选中状态，并且不同状态的布局结构不相同。
32.优选地，所述将大区域分解为子区域，生成子区域的列表组件包括：
33.将整体区域分解为小块儿的子区域，再次通过布局结构判定方法对子区域的布局结构进行判定，并在子区域生成dsl视图树，然后再将子区域中生成的dsl视图树合并为列表组件，最后将各列表组件合并在一起生成ui视图设计稿的dsl视图树。
34.另一方面，本发明选用如下技术方案：一种基于图片检索的ui视图库复用装置，包括存储器和处理器，所述处理器通过调用所述存储器中存储的控制程序，以执行如上述的一种基于图片检索的ui视图库复用方法。
35.另一方面，本发明选用如下技术方案：一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述的一种基于图片检索的ui视图库复用方法。
36.另一方面，本发明选用如下技术方案：一种计算机可读存储介质，，所述计算机可读存储介质存储有计算机程序，所述计算机程序当被处理器执行时使所述处理器执行如上述的一种基于图片检索的ui视图库复用方法。
37.相较于现有技术，本发明具有以下有益效果：
38.本发明将设计稿的dsl视图树进行检索比对，获取相似设计稿的实现代码，并对其进行导出复用，降低了设计稿转码的研发成本，减少相似设计稿的重复性开发工作，提高了前端工程师的开发效率。
附图说明
39.为了更清楚地说明技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
40.图1为本发明的流程结构示意图。
41.图2为布局结构判定方法步骤示意图。
具体实施方式
42.为了能够清楚、完整地理解技术方案，现结合实施例和附图对本发明进一步说明，显然，所记载的实施例仅仅是本发明部分实施例，所属领域的技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
43.应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
44.还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
45.还应当进一步理解，在本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
46.如图1和2所示，一种基于图片检索的ui视图库复用方法，包括以下步骤：
47.s100，导入已合并图层的ui视图设计稿，并生成设计稿的当前dsl视图树。传统技术中主流代码生成有两种，一种是通过训练神经网络，从图片或草图直接生成代码，基于神经网络的代码生成对复杂层布局的准确率较低、可解释程度不高导致后续无法持续优化，本实施选用另一种为基于sketch源文件，sketch源文件信息量丰富、算法自定义程度高、优化空间大，从中解析出图层信息转化成dsl并生成代码。
48.s200，获取设计稿的扁平化数据，先根据sketch源文件，获取ui视图设计稿的扁平化数据，所述扁平化数据包括图层的json数据；sketch源文件中组件与图层的对应关系是一对多的关系，本实施案例的图层在sketch源文件中的表现形式如下的json数据结构所示：
[0049][0050]
json数据结构描述了图层的坐标、大小等信息，后续布局结构判定基于对图层的切割。
[0051]
s300，对设计稿的结构进行判定，本实施案例将所述ui视图设计稿一部分区域视为一个子区域，最开始的时候子区域和整个模板的面积一样大，基于图层的位置、大小信息，计算每个图层的上/下/左/右边缘坐标与其他图层的相对关系，寻到切割点，接下来依据切割点，将子区域切割成更小的子区域。
[0052]
s310，通过布局结构判定方法确定设计稿的整体结构的布局结构，所述布局结构包括有行布局、列布局、包含布局、成组布局、悬浮布局的其中一种或两种以上，其中，所述布局结构的判定依赖矩形的上下左右坐标，再根据矩形与矩形的相交、相离和包含位置关系将布局结构进行以下分类：
[0053]
行布局：每个子区域为相离位置关系；
[0054]
列布局：文字与文字之间为相离位置关系；
[0055]
包含布局：某一个标签包含另一个标签的位置关系；
[0056]
成组布局：一标签与另一标签属于共生位置关系；
[0057]
悬浮布局：一标签与另一标签具有层叠位置关系。
[0058]
列表布局分为单状态列表组件和多状态列表组件：
[0059]
s320，将设计稿一部分区域视为一个子区域，基于图层的位置、大小信息，计算每个图层的上/下/左/右边缘坐标与其他图层的相对关系，将子区域分解成更小的子区域，然后执行以下判断步骤；
[0060]
s321，判断子区域是否是行布局，是则生成行布局，否则执行s122步骤；
[0061]
s322，判断子区域是否为列布局，是则生成列布局，否则执行s123步骤；
[0062]
s323，判断子区域是否为包含布局，是则以子区域生成dsl视图树后生成包含布局，否则执行s124步骤；
[0063]
s324，生成交叉规则参数，与历史规则库中参数对比，根据两标签属于共生关系或层叠关系对应生成成组布局或悬浮布局。；
[0064]
s400，将大区域分解为子区域，生成子区域的列表组件：
[0065]
将整体区域分解为小块儿的子区域，再次通过布局结构判定方法对子区域的布局结构进行判定，并在子区域生成dsl视图树，然后再将子区域中生成的dsl视图树合并为列表组件，最后将各列表组件合并在一起生成ui视图设计稿的dsl视图树；
[0066]
本实施案例在切割的过程中若切割点是横向的，则生成列布局；如果切割点是纵向的，则生成行布局。通过不断的切割子区域得到更小的子区域，直到所有的子区域只剩下图片或者文本等不可切割的图层，生成完整的dsl视图树。其中包含布局和成组布局的处理为相同的，而对于图层相交时可能存在成组布局和悬浮布局的两种布局结构，图层相交的情况可以根据历史模板中成组布局图层之间的位置关系判断是否在历史规则库中完成识别，其中历史模板历史规则库为预先设定，历史模板构建的成组规则库选用常规的技术手段构建。若在历史模板的成组规则库中识别到相似的图层相交位置关系，则以成组布局处理，否则以悬浮布局处理。
[0067]
本实施案例在布局结构判定方法确定设计稿的行布局、列布局、包含布局、成组布局、悬浮布局之外，还进一步识别行布局和/或列布局的元素是否形成列表布局，所述列表布局包括：
[0068]
单状态列表组件：每一个子区域的布局结构为相同；
[0069]
多状态列表组件：每个子区域有多种状态，包括选中状态和非选中状态，并且不同状态的布局结构不相同。
[0070]
需要说明的是：对行布局和/或列布局中单状态列表组件的识别选用现有的识别方法，比较item子视图树的结构，子视图树结构一致则判断为单状态列表组件；对多状态列表组件的识别采用自动识别和人工干预的方式，自动识别的方式较为简单直接，当行列布局中子item的宽/高接近，并且子item不是基本组件，则判定为多状态列表组件，计算子item宽高的标准差，小于阈值就判定为多状态列表组件，否则不是，在此不过多赘述。
[0071]
s500，将子区域的列表组件进行合并，生成设计稿的当前dsl视图树。
[0072]
s600，将当前dsl视图树与ui视图库中的已存dsl视图树进行比较，判断是否存在相似的dsl视图树，所述ui视图库中数据库为预先设定的，对ui视图设计稿的当前dsl视图树与已存dsl视图树进行检索比较：
[0073]
若存在相似dsl视图树，则导出相应的ui视图设计稿的实现代码；
[0074]
若不存在相似dsl视图树，则将当前dsl视图树和ui视图设计稿以及实现代码存储在ui视图库中，补充ui视图库的数据，以满足后续检索比较后复用，减少相似设计稿的重复
性开发工作，提高了前端工程师的开发效率。
[0075]
本实施案例在获取设计稿的扁平化数据时还可以基于imgcook的操作原理，通过设计工具插件从设计稿中提取图层json格式的描述信息。
[0076]
本实施案例将设计稿的dsl视图树进行检索比对，获取相似设计稿的实现代码，并对其进行导出复用，降低了设计稿转码的研发成本。
[0077]
另一方面，本发明还包括另一实施案例：一种基于图片检索的ui视图库复用装置，包括存储器和处理器，所述处理器通过调用所述存储器中存储的控制程序，以执行如上述的一种基于图片检索的ui视图库复用方法。
[0078]
另一方面，本发明还包括另一实施案例：一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述的一种基于图片检索的ui视图库复用方法。结合本文中公开的实施例描述的方法或算法的步骤可直接在硬件中、在由处理器执行的软件模块中、或在这两者的组合中体现。软件模块可驻留在ram存储器、闪存、rom存储器、eprom存储器、eeprom存储器、寄存器、硬盘、可移动盘、cd-rom、或本领域中所知的任何其他形式的存储介质中。示例性存储介质耦合到处理器以使得该处理器能从/向该存储介质读取和写入信息。在替换方案中，存储介质可以被整合到处理器。处理器和存储介质可驻留在asic中。asic可驻留在用户终端中。在替换方案中，处理器和存储介质可作为分立组件驻留在用户终端中。
[0079]
另一方面，本发明还包括另一实施案例：一种计算机可读存储介质，，所述计算机可读存储介质存储有计算机程序，所述计算机程序当被处理器执行时使所述处理器执行如上述的一种基于图片检索的ui视图库复用方法。计算机可读介质包括计算机存储介质和通信介质两者，其包括促成计算机程序从一地向另一地转移的任何介质。存储介质可以是能被计算机访问的任何可用介质。作为示例而非限定，这样的计算机可读介质可包括ram、rom、eeprom、cd-rom或其它光盘存储、磁盘存储或其它磁存储设备、或能被用来携带或存储指令或数据结构形式的合意程序代码且能被计算机访问的任何其它介质。任何连接也被正当地称为计算机可读介质。
[0080]
上述披露的仅为本发明优选实施例的一种或多种，用于帮助理解技术方案的发明构思，并非对本发明作其他形式的限制，所属领域的技术人员依据本发明所限定特征作出其他等同或惯用手段的置换方案，仍属于本发明所涵盖的范围。

技术特征：

1.一种基于图片检索的ui视图库复用方法，其特征在于：包括以下步骤：导入已合并图层的ui视图设计稿，并生成设计稿的当前dsl视图树；将当前dsl视图树与ui视图库中的已存dsl视图树进行比较，判断是否存在相似的dsl视图树：若是则导出相应的ui视图设计稿的实现代码；若否则将当前dsl视图树和ui视图设计稿以及实现代码存储在ui视图库中。2.根据权利权利要求1所述的一种基于图片检索的ui视图库复用方法，其特征在于，所述导入已合并图层的ui视图设计稿，并生成设计稿的当前dsl视图树步骤中还包括：获取设计稿的扁平化数据；对设计稿的结构进行判定；将大区域分解为子区域，生成子区域的列表组件；将子区域的列表组件进行合并，生成设计稿的当前dsl视图树。3.根据权利要求2所述的一种基于图片检索的ui视图库复用方法，其特征在于：所述对设计稿的结构判定包括先根据sketch源文件，获取ui视图设计稿的扁平化数据，所述扁平化数据包括图层的json数据，再通过布局结构判定方法确定设计稿的整体结构的布局结构，所述布局结构包括有行布局、列布局、包含布局、成组布局、悬浮布局的其中一种或两种以上。4.根据权利要求3所述的一种基于图片检索的ui视图库复用方法，其特征在于：将设计稿一部分区域视为一个子区域，基于图层的位置、大小信息，计算每个图层的上/下/左/右边缘坐标与其他图层的相对关系，将子区域分解成更小的子区域，然后执行以下判断步骤；s321，判断子区域是否是行布局，是则生成行布局，否则执行s322步骤；s322，判断子区域是否为列布局，是则生成列布局，否则执行s323步骤；s323，判断子区域是否为包含布局，是则以子区域生成dsl视图树后生成包含布局，否则执行s324步骤；s324，生成交叉规则参数，与历史规则库中参数对比，根据两标签属于共生关系或层叠关系对应生成成组布局或悬浮布局。5.根据权利要求4所述的一种基于图片检索的ui视图库复用方法，其特征在于：所述布局结构的判定依赖矩形的上下左右坐标，再根据矩形与矩形的相交、相离和包含位置关系将布局结构进行以下分类：行布局：每个子区域为相离位置关系；列布局：文字与文字之间为相离位置关系；包含布局：某一个标签包含另一个标签的位置关系；成组布局：一标签与另一标签属于共生位置关系；悬浮布局：一标签与另一标签具有层叠位置关系。6.根据权利要求5所述的一种基于图片检索的ui视图库复用方法，其特征在于，所述将布局结构还包括以下列表布局：单状态列表组件：每一个子区域的布局结构为相同；多状态列表组件：每个子区域有多种状态，包括选中状态和非选中状态，并且不同状态的布局结构不相同。
7.根据权利要求2所述的一种基于图片检索的ui视图库复用方法，其特征在于，所述将大区域分解为子区域，生成子区域的列表组件包括：将整体区域分解为小块儿的子区域，再次通过布局结构判定方法对子区域的布局结构进行判定，并在子区域生成dsl视图树，然后再将子区域中生成的dsl视图树合并为列表组件，最后将各列表组件合并在一起生成ui视图设计稿的dsl视图树。8.一种基于图片检索的ui视图库复用装置，包括存储器和处理器，其特征在于：所述处理器通过调用所述存储器中存储的控制程序，以执行如权利要求1-7任一项所述的一种基于图片检索的ui视图库复用方法。9.一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于：所述处理器执行所述计算机程序时实现如权利要求1-7任一项所述的一种基于图片检索的ui视图库复用方法。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序当被处理器执行时使所述处理器执行如权利要求1-7任一项所述的一种基于图片检索的ui视图库复用方法。

技术总结

一种基于图片检索的UI视图库复用方法和复用装置，包括以下步骤：导入已合并图层的UI视图设计稿，并生成设计稿的当前DSL视图树；将当前DSL视图树与UI视图库中的已存DSL视图树进行比较，判断是否存在相似的DSL视图树：若是则导出相应的UI视图设计稿的实现代码；若否则将当前DSL视图树和UI视图设计稿以及实现代码存储在UI视图库中。本发明将设计稿的DSL视图树进行检索比对，获取相似设计稿的实现代码，并对其进行导出复用，降低了设计稿转码的研发成本，减少相似设计稿的重复性开发工作，提高了前端工程师的开发效率。了前端工程师的开发效率。了前端工程师的开发效率。