一种基于图片检索的UI视图库复用方法和复用装置制造方法及图纸

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

【技术实现步骤摘要】
一种基于图片检索的UI视图库复用方法和复用装置


[0001]本专利技术涉及UI视图库的开发
，特别是一种基于图片检索的UI视图库复用方法和复用装置。

技术介绍

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

技术实现思路

[0006]针对上述不能对相似设计稿的DSL视图树进行检索比较和相似设计稿的实现代码不能重复利用问题，本专利技术提供一种基于图片检索的UI视图库复用方法和复用装置。
[0007]为实现上述目的，本专利技术选用如下技术方案：一种基于图片检索的UI视图库复用方法，包括以下步骤：
[0008]导入已合并图层的UI视图设计稿，并生成设计稿的当前DSL视图树；
[0009]将当前DSL视图树与UI视图库中的已存DSL视图树进行比较，判断是否存在相似的DSL视图树：
[0010]若是则导出相应的UI视图设计稿的实现代码；
[0011]若否则将当前DSL视图树和UI视图设计稿以及实现代码存储在UI视图库中。
[0012]优选地，所述导入已合并图层的UI视图设计稿，并生成设计稿的当前DSL视图树步骤中还包括：
[0013]获取设计稿的扁平化数据；
[0014]对设计稿的结构进行判定；
[0015]将大区域分解为子区域，生成子区域的列表组件；
[0016]将子区域的列表组件进行合并，生成设计稿的当前DSL视图树。
[0017]优选地，所述对设计稿的结构判定包括先根据Sketch源文件，获取UI视图设计稿的扁平化数据，所述扁平化数据包括图层的JSON数据，再通过布局结构判定方法确定设计
稿的整体结构的布局结构，所述布局结构包括有行布局、列布局、包含布局、成组布局、悬浮布局的其中一种或两种以上。
[0018]优选地，将设计稿一部分区域视为一个子区域，基于图层的位置、大小信息，计算每个图层的上/下/左/右边缘坐标与其他图层的相对关系，将子区域分解成更小的子区域，然后执行以下判断步骤；
[0019]S321，判断子区域是否是行布局，是则生成行布局，否则执行S322步骤；
[0020]S322，判断子区域是否为列布局，是则生成列布局，否则执行S323步骤；
[0021]S323，判断子区域是否为包含布局，是则以子区域生成DSL视图树后生成包含布局，否则执行S324步骤；
[0022]S324，生成交叉规则参数，与历史规则库中参数对比，根据两标签属于共生关系或层叠关系对应生成成组布局或悬浮布局。
[0023]优选地，所述布局结构的判定依赖矩形的上下左右坐标，再根据矩形与矩形的相交、相离和包含位置关系将布局结构进行以下分类：
[0024]行布局：每个子区域为相离位置关系；
[0025]列布局：文字与文字之间为相离位置关系；
[0026]包含布局：某一个标签包含另一个标签的位置关系；
[0027]成组布局：一标签与另一标签属于共生位置关系；
[0028]悬浮布局：一标签与另一标签具有层叠位置关系。
[0029]优选地，所述将布局结构还包括以下列表布局：
[0030]单状态列表组件：每一个子区域的布局结构为相同；
[0031]多状态列表组件：每个子区域有多种状态，包括选中状态和非选中状态，并且不同状态的布局结构不相同。
[0032]优选地，所述将大区域分解为子区域，生成子区域的列表组件包括：
[0033]将整体区域分解为小块儿的子区域，再次通过布局结构判定方法对子区域的布局结构进行判定，并在子区域生成DSL视图树，然后再将子区域中生成的DSL视图树合并为列表组件，最后将各列表组件合并在一起生成UI视图设计稿的DSL视图树。
[0034]另一方面，本专利技术选用如下技术方案：一种基于图片检索的UI视图库复用装置，包括存储器和处理器，所述处理器通过调用所述存储器中存储的控制程序，以执行如上述的一种基于图片检索的UI视图库复用方法。
[0035]另一方面，本专利技术选用如下技术方案：一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述的一种基于图片检索的UI视图库复用方法。
[0036]另一方面，本专利技术选用如下技术方案：一种计算机可读存储介质，，所述计算机可读存储介质存储有计算机程序，所述计算机程序当被处理器执行时使所述处理器执行如上述的一种基于图片检索的UI视图库复用方法。
[0037]相较于现有技术，本专利技术具有以下有益效果：
[0038]本专利技术将设计稿的DSL视图树进行检索比对，获取相似设计稿的实现代码，并对其进行导出复用，降低了设计稿转码的研发成本，减少相似设计稿的重复性开发工作，提高了前端工程师的开发效率。
附图说明
[0039]为了更清楚地说明技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0040]图1为本专利技术的流程结构示意图。
[0041]图2为布局结构判定方法步骤示意图。
具体实施方式
[0042]为了能够清楚、完整地理解技术方案，现结合实施例和附图对本专利技术进一步说明，显然，所记载的实施例仅仅是本专利技术部分实施例，所属领域的技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0043]应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
[0044]还应当理解，在此本专利技术说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本专利技术。如在本专利技术说明书和所附权利要求书中本文档来自技高网...

【技术保护点】

【技术特征摘要】
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视图库复...

【专利技术属性】
技术研发人员：娄秀标，李绍斌，黎清顾，曹林，
申请(专利权)人：珠海联云科技有限公司，
类型：发明
国别省市：