CN116820561B - 一种基于界面设计图自动生成界面代码的方法 - Google Patents

Abstract

本发明公开了一种基于界面设计图自动生成界面代码的方法，包括以下步骤：行识别：获取界面设计图的分辨率以及像素点的行数、列数，计算得到相邻两行像素点的均值、方差以及差值，根据两行像素点的均值、方差以及差值的关系，确定行分割线并进一步确定行；内容识别：对每个行逐一进行内容的识别，找出所有突变区间并遍历突变区间，判断是否存在填充区域，若存在，找出填充区域并添加到元素结果集，最后逐一判断突变区间是否与元素结果集中的元素形成交集，得到元素的位置；元素识别：采用AI识别出具体的元素；分组与定位：对识别出的元素进行分组和定位。本发明无需前端工程师根据经验来编写界面设计图对应的程序源代码，大大提高工作效率。

Description

一种基于界面设计图自动生成界面代码的方法

技术领域

本发明涉及界面设计图解析技术领域，具体是一种基于界面设计图自动生成界面代码的方法。

背景技术

界面设计图是指UI设计师制作的用于在电脑显示屏上的网页、手机上的app和小程序、车机等地方的程序显示或交互的界面设计图。现有从界面设计图到界面程序主要是靠前端开发工程师凭借经验来阅读和分析界面设计图，再人为编写代码将界面设计图实现为界面程序。

现有方法中，将界面设计图转化为程序源代码的方式主要为前端工程师根据经验编写代码，该方法是纯人工的方法，不仅非常费时费力，而且不同的工程师编写代码的风格、逻辑完全不同，非常耗费时间。

发明内容

为克服现有技术的不足，本发明提供了一种基于界面设计图自动生成界面代码的方法，用以解决现有方法在将界面设计图转化为程序源代码时，存在信息化项目开发的工作量较大，费时费力、效率较低的问题。

本发明解决上述问题所采用的技术方案是：

一种基于界面设计图自动生成界面代码的方法，包括以下步骤：

步骤1、行识别：首先将界面设计图转化为灰度图，然后获取界面设计图的分辨率以及像素点的行数、列数，计算得到每行像素点的均值、方差以及相邻两行像素点的差值，根据均值、方差以及差值的关系，确定行分割线并进一步确定行区域；

步骤2、内容识别：对每个行区域的每行像素点逐一进行内容的识别，找出每个行区域的每一行的所有突变区间并遍历突变区间，判断是否存在填充区域，若存在，则找出填充区域并添加到元素结果集，最后逐一判断突变区间是否与元素结果集中的元素形成交集，得到元素相对于界面设计图左上角的开始行行号、结束行行号、开始列列号、结束列列号。

步骤3、元素识别：采用AI识别出具体的元素；

步骤4、分组与定位：对识别出的元素进行分组和定位。

进一步地，作为优选技术方案，所述行识别的具体过程为：

步骤1-1：将界面设计图转为灰度图，获取界面设计图的分辨率以及像素点的行数、列数；

步骤1-2：计算出该灰度图中每行像素点的均值和方差，以及相邻两行像素点的差值数组；

步骤1-3：若相邻两行像素点的方差均为0且均值不同，则当前为行分割线；如果一个方差为0且另一个方差不为0，则当前为行分割线；如果相邻两行像素点的方差和均值均不为0且差值数组中为0的比例小于阀值a，其中0≤a≤5%，则当前为行区域分割线。

进一步地，作为优选技术方案，所述内容识别的具体过程为：

步骤2-1：创建一个长度为N个像素、高度为1个像素的滑块，其中，3≤N≤20，滑块每次以1个像素点为单位进行滑动，从左向右、从上往下对每个行区域进行内容的识别；

步骤2-2：滑块每滑动一次，都对滑块内的像素点的灰度值求方差和均值，若方差不为0，则说明找到突变开始点，继续向右滑动，找到方差为0且均值等于背景色的值，则说明找到突变结束点，从突变开始点到突变结束点为1个突变区间；

步骤2-3：滑块从行开头一直滑动到行末尾，找到该行所有的突变区间，并记录每个突变区间的开始列的列号以及结束列的列号；

步骤2-4：遍历该行所有的突变区间，若突变区间的长度大于阀值M，其中 28<M<128，则进行步骤2-5；若小于等于阀值M，则进行步骤2-6；

步骤2-5：假定该突变区间为某个填充区域的开始行，找出该填充区域，并将该填充区域的开始行行号、结束行行号、开始列列号、结束列列号添加到元素结果集中；

步骤2-6：逐一判断该行的突变区间是否与元素结果集中的元素存在交集，若无交集，则将无交集的突变区间的开始列编号和结束列编号以及当前行的编号添加到元素结果集中；若有突变区间与元素结果集的元素存在交集且该突变区间所在行的编号等于元素结果集中元素的结束行编号加1，则将元素结果集中该元素的结束行行号加1，该元素的开始列和结束列取并集后的值；

步骤2-7：滑块跳到下一行开头，重复步骤2-3到步骤2-6，直至最后一行的内容识别全部识别完成。

进一步地，作为优选技术方案，所述步骤2-5的具体过程为：

步骤2-5-1：以该突变区间为基准分别向下、向左、向右计算突变区间的均值和方差，若方差为0且均值等于背景色值，则说明分别找到了下边界、左边界、右边界，即找到了填充区域；

步骤2-5-2：将找到的填充区域添加到元素结果集中。

进一步地，作为优选技术方案，所述步骤2-5-1的具体过程为：

步骤2-5-1-1：假设该突变区间为[P，Q]且处于第R行，P表示该突变区间开始的列号，Q表示该突变区间结束的列号，Q-P>M；

步骤2-5-1-2：计算第R+1行的第P列到第Q列的像素点一维数组的方差和均值，若该方差为O，则说明填充区域的下边界找到，第R行即为填充区域的结束行；若该方差不为0，则填充区域未结束，继续逐行往下计算，直至第R+S行的第P列到第Q列的像素构成的一维数组的方差为0，且均值与父元素相同，说明第R+S-1行为填充区域的结束行；

步骤2-5-1-3：计算第P-1列的第R行到第R+S-1行的像素点一维数组的均值和方差，若该方差为0，则说明填充区域的左边界找到，第P列即为填充区域的开始列；若该方差不为0，说明填充区域的左边界还未找到，继续向左计算，直至第P-W列的第R行到第R+S-1行的像素点一维数组的均值为0，且方差与父元素均值相同，则说明第P-W+1列为填充区域的开始列；

步骤2-5-1-4：同理，计算第Q+1列的第R行到第R+S-1行的像素点一维数组的均值和方差，若该方差为0，则说明填充区域的右边界找到，第Q列即为填充区域的结束列；若该方差不为0，说明填充区域的右边界还未找到，继续向右计算，直至第Q+Y列的第R行到第R+S-1行的像素点一维数组的均值为0，且方差与父元素均值相同，则说明第Q+Y-1列为填充区域的结束列；

步骤2-5-1-5：填充区域的开始行即为该突变区间的所在行，在确定填充区域的结束行、开始列、结束列之后，填充区域确定。

进一步地，作为优选技术方案，将填充区域添加到元素结果集中后，后续找突变区间时则跳过该填充区域，具体操作是：当滑块滑动到某一行的某一列时，优先判断该像素点是否在填充区域内，若在填充区域内，则滑块直接跳到该填充区域的结束列，并从该结束列开始继续找突变区间；当整个界面设计图的最后一行的最后一列识别完后，再对填充区域进行内容识别。

进一步地，作为优选技术方案，还包括填充区域背景色计算步骤：

步骤S1：假设填充区域的列宽为J像素，高为K像素，将该填充区域划分为宽为E像素、高为F像素的小区域，其中，J、K、E、F均为正整数；

步骤S2：分别计算每个小区域的方差和均值，并对方差为0的小区域的均值进行计数；

步骤S3：将出现次数最多的均值设定为该填充区域的背景色。

进一步地，作为优选技术方案，所述步骤2-6的具体过程为：

步骤2-6-1：判断元素结果集中是否存在有某个元素的“结束行行号”加1之后与当前突变区间的行号相等，若存在，则进行步骤2-6-3，否则进行步骤2-6-2；

步骤2-6-2：将当前突变区间添加到元素结果集中；

步骤2-6-3：判断当前突变区间的开始列的列号是否小于元素结果集中该元素的开始列的列号且当前突变区间的结束列的列号大于元素结果集中该元素的开始列的列号，若是，则将当前突变区间的开始列的列号赋值给元素结果集中该元素的开始列列号，同时，将元素结果集中该元素的结束行行号加1；然后进行步骤2-6-4；若否，则直接进行步骤2-6-4；

步骤2-6-4：判断当前突变区间的结束列的列号是否大于元素结果集中该元素的结束列的列号且当前突变区间的开始列的列号小于元素结果集中该元素的结束列的列号，若是，则将当前突变区间的结束列的列号赋值给元素结果集中该元素的结束列列号，同时，将元素结果集中该元素的结束行行号加1；然后进行步骤2-6-5；若否，则直接进行步骤2-6-5；

步骤2-6-5：判断当前突变区间的开始列的列号是否大于等于元素结果集中该元素的开始列的列号且当前突变区间的结束列的列号小于等于元素结果集中该元素的结束列的列号，若是，则将元素结果集中该元素的结束行行号加1。

进一步地，作为优选技术方案，所述步骤4的具体过程为：

步骤4-1：遍历每个行区域，取出当前行区域内的子元素；

步骤4-2：对当前行区域内元素进行投影，如果为首次投影或上一次为列投影，则对当前行区域内元素进行行投影，然后进行步骤4-3；如果上一次投影为行投影，则对当前行区域内元素进行列投影，然后进行步骤4-4；

步骤4-3：如果本次和上次投影的结果均为1，说明本次投影的对象为单个元素，则将该元素存入树形结果集，否则创建对应数量的行div节点，并将元素放入对应的行div，然后存入树形结果集；

步骤4-4：如果本次和上次投影的结果均为1，说明本次投影的对象为单个元素，则将投影结果存入树形结果集，否则创建对应数量的列div节点，并将元素放入对应的列div，然后存入树形结果集；

步骤4-5：循环步骤4-1到步骤4-4，直至所有行区域内所有元素完成分组；

步骤4-6：对树形结果集进行遍历，判断当前节点与兄弟节点的排列类型，若为横向排列，则进行步骤4-7；若为纵向排列，则进行步骤4-8；

步骤4-7：赋值父节点的display值为flex，并取出当前节点和它的兄弟节点，计算当前节点和兄弟节点的margin值，判断当前节点的位置，若当前节点为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；若当前节点不为第一个节点，则margin_left=上一个节点的结束列列号-当前节点的开始列列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；

步骤4-8:计算兄弟节点的数量，并计算当前节点和兄弟节点的margin值，判断当前节点的位置，若当前节点为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；若当前节点不为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列列号，margin_top=上一个节点的结束行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；

步骤4-9：循环步骤4-6到步骤4-8，直至树形结果集遍历完成;

步骤4-10：生成可直接用于界面元素渲染的结果集json文件。

本发明相比于现有技术，具有以下有益效果是：

本发明通过创新性地采用滑块识别的方式对界面设计图进行逐行内容识别，并以突变区间作为识别出的最小单位，能够较为精准地识别出界面设计图中各元素的位置，进而对元素进行分组、定位，最终能够得到可直接用于界面元素渲染的结果集json文件，从而无需前端工程师根据经验来编写界面设计图对应的程序源代码，大大提高了工作效率，同时，由于本发明能依托界面元素的位置、大小、类型自动完成前端页面的代码编写，且本发明是按照常规的前端界面开发逻辑进行前端代码生成，有非常好的代码可读性。

附图说明

图1为本发明的行识别流程图；

图2为本发明的内容识别流程图；

图3为本发明实例的灰度图；

图4为只含文字的界面设计图；

图5为滑块识别出突变区间的结构示意图；

图6为滑块找出元素所在区域的结构示意图；

图7为本发明的填充区域的划分示意图；

图8为本发明的元素分组流程示意图；

图9为本发明的元素定位流程示意图。

实施方式

下面结合实施例及附图，对本发明作进一步的详细说明，但本发明的实施方式不限于此。

行识别：行识别是一个计算过程，行识别的输入是界面设计图（灰度图），输出是行区域的位置，本申请所述的行识别指将一个复杂的界面设计图中背景色相同的部分划分为同一个行区域。

行区域：行区域也是一种特殊的元素，一个行区域内可能含有1或多个元素。

内容识别：内容识别也是一个计算过程，内容识别是指行识别结束后，在每个行区域中找出界面设计图上的元素，如文字、按钮、搜索框、纯色、图标、图片和填充区域的位置信息，内容识别的输出是元素的位置信息。

元素：如文字、按钮、搜索框、纯色、图标、图片和填充区域，文字、按钮、搜索框、纯色、图标、图片中不可能包含自己或其他元素，只有填充区域能包含其他元素或比自己更小的填充区域。

填充区域：填充区域是指“行区域”中存在的子区域，这个子区域存在有多个元素。

元素结果集：记录了本方法识别出的行区域和所有元素的位置信息集合，每个行区域或元素的位置信息包含他相对于界面设计图左上角第一个像素点的开始行行号、结束行行号、开始列列号、结束列列号。

突变区间：突变区间是指内容识别时，在对灰度图的每行像素点进行扫描时该行与背景色不同的开始点到恢复到背景色的点，灰度图的每行像素点可能存在0个或1个或多个突变区间。

父元素：行区域中有一个或多个元素，填充区域中也有一个或多个元素，这个行区域就是他包含的元素的的父元素，同理这个填充区域也是他包含的元素的父元素。

"locationX": 该元素相对于设计稿左上角的水平距离（像素）；

"locationY":该元素相对于设计稿左上角的垂直距离（像素）；

"locationWidth": 该元素的宽度；

"display": "flex,block （元素水平或垂直排列的标识）"；

"styleBgColor": "该元素的背景色"；

"margin_top":相对定位值；

"margin_right":相对定位值；

"margin_bottom": 相对定位值；

"margin_left": 相对定位值。

实施例

如图1、图2所示，本实施例所示的一种基于界面设计图自动生成界面代码的方法，包括以下步骤：

步骤1、行识别：首先将界面设计图转化为灰度图，然后获取界面设计图的分辨率以及像素点的行数、列数，计算得到每行像素点的均值、方差以及相邻两行像素点的差值，根据均值、方差以及差值的关系，确定行分割线并进一步确定行区域；

步骤2、内容识别：对每个行区域的每行像素点逐一进行内容的识别，找出每个行区域的每一行的所有突变区间并遍历突变区间，判断是否存在填充区域，若存在，则找出填充区域并添加到元素结果集，最后逐一判断突变区间是否与元素结果集中的元素形成交集，得到元素相对于界面设计图左上角的开始行行号、结束行行号、开始列列号、结束列列号。

步骤3、元素识别：采用AI识别出具体的元素，比如该元素是文字还是按钮、图片、图标、搜索框等；AI识别元素属于现有技术范畴，其大致原理是先通过机器学习识别出元素类别，再用ocr技术将图片形式的文字识别出，得到具体的文字（或字符），由于其为现有技术，故本实施例不再对其具体识别过程和原理做过多地赘述。

步骤4、分组与定位：对识别出的元素进行分组和定位。

如图1所示，本实施例的行识别的具体过程为：

步骤1-1：将界面设计图转为灰度图，获取界面设计图的分辨率以及像素点的行数、列数；

步骤1-2：计算出该灰度图中每行像素点的均值和方差，以及相邻两行像素点的差值数组；

步骤1-3：若相邻两行像素点的方差均为0且均值不同，则当前为行分割线；如果一个方差为0且另一个方差不为0，则当前为行分割线；如果相邻两行像素点的方差和均值均不为0且差值数组中为0的比例小于阀值a，其中0≤a≤5%，则当前为行区域分割线。

如图2所示，本实施例的内容识别的具体过程为：

步骤2-1：创建一个长度为N个像素、高度为1个像素的滑块，其中，3≤N≤20，滑块每次以1个像素点为单位进行滑动，从左向右、从上往下对每个行区域进行内容的识别；

步骤2-2：滑块每滑动一次，都对滑块内的像素点的灰度值求方差和均值，若方差不为0，则说明找到突变开始点，继续向右滑动，找到方差为0且均值等于背景色的值，则说明找到突变结束点，从突变开始点到突变结束点为1个突变区间；

步骤2-3：滑块从行开头一直滑动到行末尾，找到该行所有的突变区间，并记录每个突变区间的开始列的列号以及结束列的列号；

步骤2-4：遍历该行所有的突变区间，若突变区间的长度大于阀值M，其中 28<M<128，则进行步骤2-5；若小于等于阀值M，则进行步骤2-6；

步骤2-5：假定该突变区间为某个填充区域的开始行，找出该填充区域，并将该填充区域的开始行行号、结束行行号、开始列列号、结束列列号添加到元素结果集中；

步骤2-6：逐一判断该行的突变区间是否与元素结果集中的元素存在交集，若无交集，则将无交集的突变区间的开始列编号和结束列编号以及当前行的编号添加到元素结果集中；若有突变区间与元素结果集的元素存在交集且该突变区间所在行的编号等于元素结果集中元素的结束行编号加1，则将元素结果集中该元素的结束行行号加1，该元素的开始列和结束列取并集后的值；

步骤2-7：滑块跳到下一行开头，重复步骤2-3到步骤2-6，直至最后一行的内容识别全部识别完成。

进一步地，作为优选技术方案，所述步骤2-5的具体过程为：

步骤2-5-1：以该突变区间为基准分别向下、向左、向右计算突变区间的均值和方差，若方差为0且均值等于背景色值，则说明分别找到了下边界、左边界、右边界，即找到了填充区域；

步骤2-5-2：将找到的填充区域添加到元素结果集中。

进一步地，作为优选技术方案，所述步骤2-5-1的具体过程为：

步骤2-5-1-1：假设该突变区间为[P，Q]且处于第R行，P表示该突变区间开始的列号，Q表示该突变区间结束的列号，Q-P>M；

步骤2-5-1-2：计算第R+1行的第P列到第Q列的像素点一维数组的方差和均值，若该方差为O，则说明填充区域的下边界找到，第R行即为填充区域的结束行；若该方差不为0，则填充区域未结束，继续逐行往下计算，直至第R+S行的第P列到第Q列的像素构成的一维数组的方差为0，且均值与父元素相同，说明第R+S-1行为填充区域的结束行；

步骤2-5-1-3：计算第P-1列的第R行到第R+S-1行的像素点一维数组的均值和方差，若该方差为0，则说明填充区域的左边界找到，第P列即为填充区域的开始列；若该方差不为0，说明填充区域的左边界还未找到，继续向左计算，直至第P-W列的第R行到第R+S-1行的像素点一维数组的均值为0，且方差与父元素均值相同，则说明第P-W+1列为填充区域的开始列；

步骤2-5-1-4：同理，计算第Q+1列的第R行到第R+S-1行的像素点一维数组的均值和方差，若该方差为0，则说明填充区域的右边界找到，第Q列即为填充区域的结束列；若该方差不为0，说明填充区域的右边界还未找到，继续向右计算，直至第Q+Y列的第R行到第R+S-1行的像素点一维数组的均值为0，且方差与父元素均值相同，则说明第Q+Y-1列为填充区域的结束列；

步骤2-5-1-5：填充区域的开始行即为该突变区间的所在行，在确定填充区域的结束行、开始列、结束列之后，填充区域确定。

本实施例中，将填充区域添加到元素结果集中后，后续找突变区间时则跳过该填充区域，具体操作是：当滑块滑动到某一行的某一列时，优先判断该像素点是否在填充区域内，若在填充区域内，则滑块直接跳到该填充区域的结束列，并从该结束列开始继续找突变区间；当整个界面设计图的最后一行的最后一列识别完后，再对填充区域进行内容识别。

本实施例中，还包括填充区域背景色计算步骤：

步骤S1：假设填充区域的列宽为J像素，高为K像素，将该填充区域划分为宽为E像素、高为F像素的小区域，其中，J、K、E、F均为正整数；

步骤S2：分别计算每个小区域的方差和均值，并对方差为0的小区域的均值进行计数；

步骤S3：将出现次数最多的均值设定为该填充区域的背景色。

本实施例中，步骤2-6的具体过程为：

步骤2-6-1：判断元素结果集中是否存在有某个元素的“结束行行号”加1之后与当前突变区间的行号相等，若存在，则进行步骤2-6-3，否则进行步骤2-6-2；

步骤2-6-2：将当前突变区间添加到元素结果集中；

步骤2-6-3：判断当前突变区间的开始列的列号是否小于元素结果集中该元素的开始列的列号且当前突变区间的结束列的列号大于元素结果集中该元素的开始列的列号，若是，则将当前突变区间的开始列的列号赋值给元素结果集中该元素的开始列列号，同时，将元素结果集中该元素的结束行行号加1；然后进行步骤2-6-4；若否，则直接进行步骤2-6-4；

步骤2-6-4：判断当前突变区间的结束列的列号是否大于元素结果集中该元素的结束列的列号且当前突变区间的开始列的列号小于元素结果集中该元素的结束列的列号，若是，则将当前突变区间的结束列的列号赋值给元素结果集中该元素的结束列列号，同时，将元素结果集中该元素的结束行行号加1；然后进行步骤2-6-5；若否，则直接进行步骤2-6-5；

步骤2-6-5：判断当前突变区间的开始列的列号是否大于等于元素结果集中该元素的开始列的列号且当前突变区间的结束列的列号小于等于元素结果集中该元素的结束列的列号，若是，则将元素结果集中该元素的结束行行号加1。

如图8、图9所示，本实施例中，元素的分组和定位的具体过程为：

步骤4-1：遍历每个行区域，取出当前行区域内的子元素；

步骤4-2：对当前行区域内元素进行投影，如果为首次投影或上一次为列投影，则对当前行区域内元素进行行投影，然后进行步骤4-3；如果上一次投影为行投影，则对当前行区域内元素进行列投影，然后进行步骤4-4；

步骤4-3：如果本次和上次投影的结果均为1，说明本次投影的对象为单个元素，则将该元素存入树形结果集，否则创建对应数量的行div节点，并将元素放入对应的行div，然后存入树形结果集；

步骤4-4：如果本次和上次投影的结果均为1，说明本次投影的对象为单个元素，则将投影结果存入树形结果集，否则创建对应数量的列div节点，并将元素放入对应的列div，然后存入树形结果集；

行投影和列投影的结果均为等于或大于1的整数，比如对某个行区域进行行投影，结果为3，说明横向有3行元素，然后创建3个行div节点并将元素放入对应的行div，同理，如果列投影结果为5，则说明有5列元素，然后创建5个列div节点并将元素放入对应的列div，最终都存入树形结果集。

步骤4-5：循环步骤4-1到步骤4-4，直至所有行区域内所有元素完成分组；

步骤4-6：对树形结果集进行遍历，判断当前节点与兄弟节点的排列类型，若为横向排列，则进行步骤4-7；若为纵向排列，则进行步骤4-8；

步骤4-7：赋值父节点的display值为flex，并取出当前节点和它的兄弟节点，计算当前节点和兄弟节点的margin值，判断当前节点的位置，若当前节点为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；若当前节点不为第一个节点，则margin_left=上一个节点的结束列列号-当前节点的开始列列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；

步骤4-8:计算兄弟节点的数量，并计算当前节点和兄弟节点的margin值，判断当前节点的位置，若当前节点为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；若当前节点不为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列列号，margin_top=上一个节点的结束行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；

步骤4-9：循环步骤4-6到步骤4-8，直至树形结果集遍历完成;

步骤4-10：生成可直接用于界面元素渲染的结果集json文件。

下面，结合实例来进行说明。

UI设计师绘制的界面设计图是BGR三通道的彩色图，本发明涉及到的方法均是读取的灰度图数据，首先，可采用OpenCV的cvtColor方法将BGR三通道的彩色图转为灰度图，如图3所示即为彩色界面设计图经过灰度处理后的灰度图。

由于3通道的BGR图是3维数组，BGR图每个像素点由3个数字表示颜色，灰度图是2维数组，灰度图的每个像素是由1个数字表示颜色，数值为0到255之间，0表示黑色，255表示白色。

叶子节点指该节点内不能再划分出子元素，当前叶子节点包括6种：文字、按钮、搜索框、纯色、图标、图片。如图3所示，图中的文字、图片均为叶子节点；填充区域指该节点内能再划分出子区域或叶子结点的元素，如图3所示，图中包括3个填充区域，每个填充区域中包含图片和文字。

如图4、图5、图6所示，本发明识别出Copyright元素的位置和大小的过程为：

步骤1、首先，介绍两个重要的内存变量Element的list和全局的list数组contentList，Element的list用于存储每次识别到的元素，该element有4个重要的参数：开始行的行号，结束行的行号，开始列的列号以及结束列的列号；全局的list数组contentList用于存储识别到的所有元素。

步骤2、如图5所示，当滑块在第3590行向右滑动到第403列时（图5左下角标识有行号），当前的方差为0，继续向右滑动一个像素时，滑块内的数据的灰度值方差不为0，说明该行的第403列是突变开始点；

步骤3、滑块继续向右滑动到415列时，滑块内的数据的方差0，且均值等于当前区域的父区域的灰度，说明当前滑块的最左边的位置减去1的值为突变结束区域，即当前行的第一个突变区间为[403,409]（滑块长度为5个像素）；

步骤4、按照该逻辑继续滑动，识别本行后续列的突变区间。

步骤5、本行识别完毕后，在contentList中查找是否有元素与当前突变区间存在交集，本次是查找结果为无，就创建一个element的list对象，分别将开始行的行号，结束行的行号，开始列的列号，结束列的列号的值[3590 ,3590 ,403 ,409 ]赋值给list ，然后将该element放入contentList。

步骤6、上一行的突变区间处理完毕后，开始对3591行进行识别。当滑块滑动到402的时候发现方差不为0 ，继续滑动到415时滑块内的数据的方差0，且均值等于行的灰度，则说明本行的突变区间为[402,409]，按照该逻辑继续滑动，识别本行后续列的突变区间。

步骤7、本行识别完毕后，在contentList中查找是否有元素与当前突变区间存在交集，在查找时发现contentList中存在某个元素的“结束行行号”加1等于当前突变区间所在行的行号，且该元素与当前突变区间满足下列三种情况的一种或多种，则contentList中的元素的结束行增加1 ，如果满足向左扩展和向右扩展，则将contentList中的开始行或结束行赋新的值。

1、向左扩展：突变区间的开始列列号小于contentList中该元素的开始列列号且突变区间的结束列列号大于contentList中该元素的开始列列号。

2、向右扩展：突变区间的结束列列号大于contentList中该元素的结束列列号且突变区间的开始列列号小于contentList中该元素的结束列列号。

3、完全包含：突变区间的开始列列号大于contentList中该元素的开始列列号且突变区间的结束列列号小于contentList中该元素的结束列列号。

当前实例下，contentList元素中开始行和结束行行号为3590，开始列列号为403，结束列列号位409 的元素与当前3591行识别出来的突变区间[402,409]，满足向左扩展的条件，则更新contentList中该节点的值为[3590 ,3591 ,402 ,409 ]，即将原[3590 ,3590,403 ,409 ]中的结束行行号增加1，开始列列号减少1。

步骤8、按照步骤6和步骤7的逻辑继续对后续行进行突变区间的提取和识别结果计算，最后会得到[3590 ,3600 ,401 ,410 ]这样一个区域，如图6所示，该区域就称为一个元素。

如图7所示，整体为填充区域，该填充区域中包含类型为图片和文字的叶子节点，本发明识别这个填充区域的过程为：

1、图7中左上角和右上角两个点的行和列分别是[1066，361]和[1066，746]，所以当本发明对1066行扫描完成后，发现[361,746]为突变区间；

2、该突变区间的长度为746-361=385大于设定的阀值M后（M可设定为14*3px），则对突变区间[361,746]进行填充区域判断；

3、计算由第1067行的第361列到746列的像素点一维数组的方差，得出方差不为0，说明填充区域未结束；

4、计算由第1068行的第361列到746列的像素点一维数组的方差，方差值依然不为0，逐行往下计算，直到计算由第1454行的第361列到746列的方差才为0，如图4所示，本填充区域的左下角坐标为[1453,361]），且均值也为该元素父的背景值，则说明第1453行为本填充区域的结束行；

5、找本填充区域的开始列，计算第360列（突变区间开始列的前一列）的第1066行到1453行的像素点一维数组的均值和方差，若方差为0，且均值与父元素均值相同，则第361列为开始列，否则计算359列对应行的方差，按照同样的方法计算，

6、同理找到结束列第745列；

7、计算本填充区域的背景色（后续对本填充区域进行解析的时候需要），该填充区域是列宽为385像素，高为388像素，将该填充区域划分为宽为5像素、高为5像素的小区域，分别计算每个区域的方差和均值，对方差为0的区域的均值进行计数，哪个均值出现的次数最多就是本填充区域的背景色。

8、填充区域识别出来后，就将该填充区域添加到元素结果集中，后续找突变区间的时候就要跳过填充区域，如扫描到1067行的第361列时，优先判断该像素点是否在填充区域内，若在填充区域内，则直接跳到该填充区域的结束列，即746列，从第746列继续找突变区间。

当本发明对界面设计图识别完成后，即识别到最后行的最后列后，再来统一对刚才识别的填充区域内部进行识别，即继续采用上述方法对图4中的图像进行识别，进一步识别出填充区域中的各个元素（文字、图片等）。

如上所述，可较好地实现本发明。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，依据本发明的技术实质，在本发明的精神和原则之内，对以上实施例所作的任何简单的修改、等同替换与改进等，均仍属于本发明技术方案的保护范围之内。

Claims (7)

1.一种基于界面设计图自动生成界面代码的方法，其特征在于，包括以下步骤：

步骤1、行识别：首先将界面设计图转化为灰度图，然后获取界面设计图的分辨率以及像素点的行数、列数，计算得到每行像素点的均值、方差以及相邻两行像素点的差值，根据均值、方差以及差值的关系，确定行分割线并进一步确定行区域；

步骤2、内容识别：对每个行区域的每行像素点逐一进行内容的识别，找出每个行区域的每一行的所有突变区间并遍历突变区间，判断是否存在填充区域，若存在，则找出填充区域并添加到元素结果集，最后逐一判断突变区间是否与元素结果集中的元素形成交集，得到元素相对于界面设计图左上角的开始行行号、结束行行号、开始列列号、结束列列号；

步骤3、元素识别：采用AI识别出具体的元素；

步骤4、分组与定位：对识别出的元素进行分组和定位，生成可直接用于界面元素渲染的结果集json文件；

所述行识别的具体过程为：

步骤1-1：将界面设计图转为灰度图，获取界面设计图的分辨率以及像素点的行数、列数；

步骤1-2：计算出该灰度图中每行像素点的均值和方差，以及相邻两行像素点的差值数组；

步骤1-3：若相邻两行像素点的方差均为0且均值不同，则当前为行分割线；如果一个方差为0且另一个方差不为0，则当前为行分割线；如果相邻两行像素点的方差和均值均不为0且差值数组中为0的比例小于阈值a，其中0≤a≤5%，则当前为行区域分割线；

所述内容识别的具体过程为：

步骤2-1：创建一个长度为N个像素、高度为1个像素的滑块，其中，3≤N≤20，滑块每次以1个像素点为单位进行滑动，从左向右、从上往下对每个行区域进行内容的识别；

步骤2-2：滑块每滑动一次，都对滑块内的像素点的灰度值求方差和均值，若方差不为0，则说明找到突变开始点，继续向右滑动，找到方差为0且均值等于背景色的值，则说明找到突变结束点，从突变开始点到突变结束点为1个突变区间；

步骤2-3：滑块从行开头一直滑动到行末尾，找到该行所有的突变区间，并记录每个突变区间的开始列的列号以及结束列的列号；

步骤2-4：遍历该行所有的突变区间，若突变区间的长度大于阈值M，其中28<M<128，则进行步骤2-5；若小于等于阈值M，则进行步骤2-6；

步骤2-5：假定该突变区间为某个填充区域的开始行，找出该填充区域，并将该填充区域的开始行行号、结束行行号、开始列列号、结束列列号添加到元素结果集中；

步骤2-6：逐一判断该行的突变区间是否与元素结果集中的元素存在交集，若无交集，则将无交集的突变区间的开始列编号和结束列编号以及当前行的编号添加到元素结果集中；若有突变区间与元素结果集的元素存在交集且该突变区间所在行的编号等于元素结果集中元素的结束行编号加1，则将元素结果集中该元素的结束行行号加1，该元素的开始列和结束列取并集后的值；

步骤2-7：滑块跳到下一行开头，重复步骤2-3到步骤2-6，直至最后一行的内容识别全部识别完成。

2.根据权利要求1所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，所述步骤2-5的具体过程为：

步骤2-5-1：以该突变区间为基准分别向下、向左、向右计算突变区间的均值和方差，若方差为0且均值等于背景色值，则说明分别找到了下边界、左边界、右边界，即找到了填充区域；

步骤2-5-2：将找到的填充区域添加到元素结果集中。

3.根据权利要求2所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，所述步骤2-5-1的具体过程为：

步骤2-5-1-1：假设该突变区间为[P，Q]且处于第R行，P表示该突变区间开始的列号，Q表示该突变区间结束的列号，Q-P>M；

步骤2-5-1-2：计算第R+1行的第P列到第Q列的像素点一维数组的方差和均值，若该方差为O，则说明填充区域的下边界找到，第R行即为填充区域的结束行；若该方差不为0，则填充区域未结束，继续逐行往下计算，直至第R+S行的第P列到第Q列的像素构成的一维数组的方差为0，且均值与父元素相同，说明第R+S-1行为填充区域的结束行；

步骤2-5-1-3：计算第P-1列的第R行到第R+S-1行的像素点一维数组的均值和方差，若该方差为0，则说明填充区域的左边界找到，第P列即为填充区域的开始列；若该方差不为0，说明填充区域的左边界还未找到，继续向左计算，直至第P-W列的第R行到第R+S-1行的像素点一维数组的均值为0，且方差与父元素均值相同，则说明第P-W+1列为填充区域的开始列；

步骤2-5-1-4：同理，计算第Q+1列的第R行到第R+S-1行的像素点一维数组的均值和方差，若该方差为0，则说明填充区域的右边界找到，第Q列即为填充区域的结束列；若该方差不为0，说明填充区域的右边界还未找到，继续向右计算，直至第Q+Y列的第R行到第R+S-1行的像素点一维数组的均值为0，且方差与父元素均值相同，则说明第Q+Y-1列为填充区域的结束列；

步骤2-5-1-5：填充区域的开始行即为该突变区间的所在行，在确定填充区域的结束行、开始列、结束列之后，填充区域确定。

4.根据权利要求3所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，将填充区域添加到元素结果集中后，后续找突变区间时则跳过该填充区域，具体操作是：当滑块滑动到某一行的某一列时，优先判断该像素点是否在填充区域内，若在填充区域内，则滑块直接跳到该填充区域的结束列，并从该结束列开始继续找突变区间；当整个界面设计图的最后一行的最后一列识别完后，再对填充区域进行内容识别。

5.根据权利要求1-4任一项所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，还包括填充区域背景色计算步骤：

步骤S1：假设填充区域的列宽为J像素，高为K像素，将该填充区域划分为宽为E像素、高为F像素的小区域，其中，J、K、E、F均为正整数；

步骤S2：分别计算每个小区域的方差和均值，并对方差为0的小区域的均值进行计数；

步骤S3：将出现次数最多的均值设定为该填充区域的背景色。

6.根据权利要求1所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，所述步骤2-6的具体过程为：

步骤2-6-1：判断元素结果集中是否存在有某个元素的“结束行行号”加1之后与当前突变区间的行号相等，若存在，则进行步骤2-6-3，否则进行步骤2-6-2；

步骤2-6-2：将当前突变区间添加到元素结果集中；

步骤2-6-3：判断当前突变区间的开始列的列号是否小于元素结果集中该元素的开始列的列号且当前突变区间的结束列的列号大于元素结果集中该元素的开始列的列号，若是，则将当前突变区间的开始列的列号赋值给元素结果集中该元素的开始列列号，同时，将元素结果集中该元素的结束行行号加1；然后进行步骤2-6-4；若否，则直接进行步骤2-6-4；

步骤2-6-4：判断当前突变区间的结束列的列号是否大于元素结果集中该元素的结束列的列号且当前突变区间的开始列的列号小于元素结果集中该元素的结束列的列号，若是，则将当前突变区间的结束列的列号赋值给元素结果集中该元素的结束列列号，同时，将元素结果集中该元素的结束行行号加1；然后进行步骤2-6-5；若否，则直接进行步骤2-6-5；

步骤2-6-5：判断当前突变区间的开始列的列号是否大于等于元素结果集中该元素的开始列的列号且当前突变区间的结束列的列号小于等于元素结果集中该元素的结束列的列号，若是，则将元素结果集中该元素的结束行行号加1。

7.根据权利要求1所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，所述步骤4的具体过程为：

步骤4-1：遍历每个行区域，取出当前行区域内的子元素；

步骤4-2：对当前行区域内元素进行投影，如果为首次投影或上一次为列投影，则对当前行区域内元素进行行投影，然后进行步骤4-3；如果上一次投影为行投影，则对当前行区域内元素进行列投影，然后进行步骤4-4；

步骤4-3：如果本次和上次投影的结果均为1，说明本次投影的对象为单个元素，则将该元素存入树形结果集，否则创建对应数量的行div节点，并将元素放入对应的行div，然后存入树形结果集；

步骤4-4：如果本次和上次投影的结果均为1，说明本次投影的对象为单个元素，则将投影结果存入树形结果集，否则创建对应数量的列div节点，并将元素放入对应的列div ，然后存入树形结果集；

步骤4-5：循环步骤4-1到步骤4-4，直至所有行区域内所有元素完成分组；

步骤4-6：对树形结果集进行遍历，判断当前节点与兄弟节点的排列类型，若为横向排列，则进行步骤4-7；若为纵向排列，则进行步骤4-8；

步骤4-7：赋值父节点的display值为flex，并取出当前节点和它的兄弟节点，计算当前节点和兄弟节点的margin值，判断当前节点的位置，若当前节点为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；若当前节点不为第一个节点，则margin_left=上一个节点的结束列列号-当前节点的开始列列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；

步骤4-8:计算兄弟节点的数量，并计算当前节点和兄弟节点的margin值，判断当前节点的位置，若当前节点为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列号，margin_top=父节点的开始行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；若当前节点不为第一个节点，则margin_left=父节点的开始列列号减去当前节点的开始列列号，margin_top=上一个节点的结束行行号减去当前节点的开始行行号，margin_right=auto，margin_bottom=auto；

步骤4-9：循环步骤4-6到步骤4-8，直至树形结果集遍历完成;

步骤4-10：生成可直接用于界面元素渲染的结果集json文件。