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

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

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

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

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

2. 根据权利要求1所述的一种基于界面设计图自动生成界面代码的方法，其特征在于， 所述行识别的具体过程为：步骤1‑1：将界面设计图转为灰度图，获取界面设计图的分辨率以及像素点的行数、列数；

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

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

3.根据权利要求2所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，所述内容识别的具体过程为：步骤2‑1：创建一个长度为N个像素、高度为1个像素的滑块，其中，3≤N≤20，滑块每次以1个像素点为单位进行滑动，从左向右、从上往下对每个行区域进行内容的识别；

步骤2‑2：滑块每滑动一次，都对滑块内的像素点的灰度值求方差和均值，若方差不为

0，则说明找到突变开始点，继续向右滑动，找到方差为0且均值等于背景色的值，则说明找到突变结束点，从突变开始点到突变结束点为1个突变区间；

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

步骤2‑4：遍历该行所有的突变区间，若突变区间的长度大于阀值M，其中 28

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

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

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

4.根据权利要求3所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，所述步骤2‑5的具体过程为：步骤2‑5‑1：以该突变区间为基准分别向下、向左、向右计算突变区间的均值和方差，若方差为0且均值等于背景色值，则说明分别找到了下边界、左边界、右边界，即找到了填充区域；

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

5.根据权利要求4所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，所述步骤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：填充区域的开始行即为该突变区间的所在行，在确定填充区域的结束行、开始列、结束列之后，填充区域确定。

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

7.根据权利要求3‑6任一项所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，还包括填充区域背景色计算步骤：步骤S1：假设填充区域的列宽为J像素，高为K像素，将该填充区域划分为宽为E像素、高为F像素的小区域，其中，J、K、E、F均为正整数；

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

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

8.根据权利要求3所述的一种基于界面设计图自动生成界面代码的方法，其特征在于，所述步骤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。

9.根据权利要求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文件。