CN111190595A - 基于界面设计图自动生成界面代码的方法、装置、介质及电子设备 - Google Patents

Abstract

本公开提供了一种基于界面设计图自动生成界面代码的方法、装置、介质及电子设备。本公开涉及智能决策中的检测模型。通过识别所述界面设计图的界面元素的位置，并根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板和对应的通用代码，根据通用代码与提取所述界面元素的参数结合，从而形成对应的界面代码，另外，还可依据请求指令中携带有需要的风格信息进行参数的调整，使得在原有的通用代码上填充调整后的参数，并生成符合用户喜好的界面设计图和对应的界面代码，大大提高界面设计图的工作效率，简化界面设计图生产的工序。

Description

基于界面设计图自动生成界面代码的方法、装置、介质及电子 设备

技术领域

本发明涉及智能决策中的检测模型，特别涉及一种基于界面设计图自动生成界面代码的方法、装置、介质及电子设备。

背景技术

在相关技术中，界面设计图的设计需要通过设计师绘图、人工提炼元素和匹配对应的界面参数，并将对应的界面参数交付至开发人员进行界面编程，界面设计图对应的界面生成相当繁琐，工作效率低，并且不利于把握用户喜好。

发明内容

本公开旨在提供一种基于界面设计图自动生成界面代码的方法、装置、介质及电子设备，其能够依据用户的喜好信息进行对应的界面代码自动生成，大大提高界面设计图的工作效率，简化界面设计图生产的工序。

根据本公开的一方面，提供了一种基于界面设计图自动生成界面代码的方法，包括：获取界面设计图；识别所述界面设计图的界面元素的位置；根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；提取所述界面元素的参数；响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码。

在一个实施例中，所述获取界面设计图，包括：接收到待处理界面设计图，并将所述待处理界面设计图转换成灰度图像；对所述灰度图像进行平滑处理，将所述经平滑处理后的灰度图像进行中值滤波处理；将所述中值滤波处理后的灰度图像进行二值化处理，得到二值图像，作为获取到的界面设计图。

在一个实施例中，所述识别所述界面设计图的界面元素的位置，包括：

识别所述二值图像中的边缘曲线，其中，如果二值图像中相邻两个像素点的像素值相同，则用线连接所述相邻两个像素点，用线连接二值图像上所有相邻的像素值相同的像素点后形成的每一条连通曲线为一条边缘曲线；将所述边缘曲线输入至识别界面元素的机器学习模型，由机器学习模型输出所述界面元素。

在一个实施例中，所述机器学习模型通过以下方式预先训练而成：

获取边缘曲线样本集合，所述边缘曲线样本中的每个边缘曲线样本具有贴好的界面元素标签；将所述边缘曲线样本中的每个边缘曲线样本输入机器学习模型，由所述机器学习模型输出判定的界面元素名称，将判定的界面元素名称与贴好的界面元素标签对应，如不一致，则调整所述机器学习模型的系数，使得判定的界面元素名称与贴好的界面元素标签对应。

在一个实施例中，所述将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码，包括：逐一标记各所述改变后的界面元素的参数，各所述标记依序排列；依照顺序检测所述代码模板所空缺的位置，将所述所空缺的位置与所述标记进行匹配；若匹配成功，则将所述标记对应的参数与对应的所述所空缺的位置进行关联，且将所述标记对应的参数填充至对应的所述所空缺的位置，以生成对应于所述风格信息的界面代码。

根据本公开的一方面，提供了一种基于界面设计图自动生成界面代码的装置，包括：获取模块，用于获取界面设计图；识别模块，用于识别所述界面设计图的界面元素的位置；第一查找模块，用于根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；提取模块，用于提取所述界面元素的参数；响应模块，用于响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；第二查找模块，用于根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；填充模块，用于将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码。

根据本公开的一方面，提供了一种计算机可读程序介质，其存储有计算机程序指令，当所述计算机程序指令被计算机执行时，使计算机执行根据第一方面所述的方法。

根据本公开的一方面，提供了一种电子装置，包括：处理器；存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如权利要求第一方面所述的方法。

本发明的实施例提供的技术方案可以包括以下有益效果：

在本发明的一些实施例所提供的技术方案中，通过识别所述界面设计图的界面元素的位置，并根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板和对应的通用代码，根据通用代码与提取所述界面元素的参数结合，从而形成对应的界面代码，另外，还可依据请求指令中携带有需要的风格信息进行参数的调整，使得在原有的通用代码上填充调整后的参数，并生成符合用户喜好的界面设计图和对应的界面代码，大大提高界面设计图的工作效率，简化界面设计图生产的工序。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并于说明书一起用于解释本发明的原理。

图1是根据一示例性实施例示出的一种基于界面设计图自动生成界面代码的方法的流程图。

图2是根据一示例性实施例示出的获取界面设计图的详细流程图。

图3是根据一示例性实施例示出的识别所述界面设计图的界面元素的位置的详细流程图。

图4是根据一示例性实施例示出的机器学习模型的详细流程图。

图5是根据一示例性实施例示出的填充界面代码的详细流程图。

图6是根据一示例性实施例示出的一种基于界面设计图自动生成界面代码的装置的框图。

图7是根据一示例性实施例示出的一种电子装置的硬件图。

图8是根据一示例性实施例示出的一种基于界面设计图自动生成界面代码的方法的计算机可读存储介质。

具体实施方式

这里将详细地对示例性实施例执行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。附图所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。

根据本公开的一个实施例，提供了基于界面设计图自动生成界面代码的方法。该界面设计图是指一般显示在显示设备上的界面，并且可进行对应修改。该界面代码是指对应的界面设计图的软件语言，并且通过界面代码能够生成对应的界面设计图。

如图1所示，该基于界面设计图自动生成界面代码的方法包括：

步骤S110、获取界面设计图；

步骤S120、识别所述界面设计图的界面元素的位置；

步骤S130、根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；

步骤S140、提取所述界面元素的参数；

步骤S150、响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；

步骤S160、根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；

步骤S170、将应于所述风改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对格信息的界面代码。

在本发明的一些实施例中，基于前述方案，通过识别所述界面设计图的界面元素的位置，并根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板和对应的通用代码，根据通用代码与提取所述界面元素的参数结合，从而形成对应的界面代码，另外，还可依据请求指令中携带有需要的风格信息进行参数的调整，使得在原有的通用代码上填充调整后的参数，并生成符合用户喜好的界面设计图和对应的界面代码，大大提高界面设计图的工作效率，简化界面设计图生产的工序。

下面对这些步骤进行详细描述。

在步骤S110中，获取界面设计图。

本公开实施例可以用于界面设计图的应用，也可以用于界面设计图生产的软件。界面设计图是指一般显示在显示设备上的界面，并且可进行对应修改，通过采用现有的界面设计图，方便用户初步确定用户喜好的图样，并且依赖现有的界面设计图方便捕捉其对应的界面设计代码，从而便于界面设计代码的转化。其中，获取界面设计图的方式具体多种，可选的，经手机所拍摄的图片、经电脑传输的图片等等。

在一个实施例中，如图2所示，步骤S110包括：

步骤S111、接收到待处理界面设计图，并将所述待处理界面设计图转换成灰度图像；

步骤S112、对所述灰度图像进行平滑处理，将所述经平滑处理后的灰度图像进行中值滤波处理；

步骤S113、将所述中值滤波处理后的灰度图像进行二值化处理，得到二值图像，作为获取到的界面设计图。

在步骤S111中，界面设计图的形式可选的为图片，可是图片并不能直接给识别，并且图片的识别较为困难，故将该界面设计图转化为灰度图像，并通过灰度图像进行图像处理，使得界面设计图的处理提供了有效的基础，并且能够进一步地对灰度图像进行各种预处理，排除各种颜色等因素对图像识别的影响。

在步骤S112中，对所述灰度图像进行平滑处理和滤波处理，其中，平滑处理主要体现在灰度图像的各种轮廓线，使得边缘更加平滑，有效调整边缘锯齿化的影响，从而提高灰度图像的识别度。另外，通过滤波处理尽量保留图像细节特征的条件下对目标图像的噪声进行抑制，方便图像识别抽取出界面元素，进一步地提高图像分析的可靠性。

在步骤S113中，通过对经中值滤波处理后的灰度图像进行二值化处理，从而形成二值图像，该二值图像的像素点的灰度值设置为0或255，即将整个图像呈现出明显的只有黑和白的视觉效果，从而形成凸出的视觉效果，并且界面元素的轮廓线相对明显，进一步方便后续的界面元素的提取，提高界面元素的识别度。

在一个实施例中，如图2所示，步骤S120可以包括：

步骤S121、识别所述二值图像中的边缘曲线，其中，如果二值图像中相邻两个像素点的像素值相同，则用线连接所述相邻两个像素点，用线连接二值图像上所有相邻的像素值相同的像素点后形成的每一条连通曲线为一条边缘曲线；

步骤S122、将所述边缘曲线输入至识别界面元素的机器学习模型，由机器学习模型输出所述界面元素；

步骤S123、获取所述连通曲线的每个像素点的位置坐标；

步骤S124、基于所述连通曲线的每个像素点的位置坐标，确定所述连通中心的坐标，作为对应界面元素的位置。

在步骤S121中，将获取的界面设计图转换为二值图像，并对二值图像进行处理，使得在获取的界面设计图上进行像素处理及界面元素识别，其中，二值图像是指将图像上的每一个像素只有两种可能的取值或灰度等级状态，人们经常用黑白、B&W、单色图像表示二值图像，通过二值图像明显突出界面设计图中不同界面元素的轮廓，以便于区分和处理界面元素。

另外，通过二值图像将界面元素的各个像素点暴露出来，并且能够区分相邻的像素点的像素值是否相同，通过将相邻的像素值相同的像素点进行连线，并依次相连，以形成一条边缘曲线，且该边缘曲线基于像素值的相同能够精准地获得界面元素的轮廓，提高识别界面元素的精度。

在步骤S122中，经过步骤S121获得界面元素，该界面元素可以为动物、建筑物、人体等。基于界面元素在各个获取的界面设计图中存在不确定，并且数量较多，故界面元素的识别需要经过识别界面元素的机器学习模型，而该识别界面元素的机器学习模型能够针对不同的界面元素实现识别，以输出界面元素所对应的名称，从而获知界面元素的名称及其类别，方便在进一步转化。

如图3所示其中，所述机器学习模型通过以下方式预先训练而成：

步骤S1221、获取边缘曲线样本集合，所述边缘曲线样本中的每个边缘曲线样本具有贴好的界面元素标签；

步骤S1222、将所述边缘曲线样本中的每个边缘曲线样本输入机器学习模型，由所述机器学习模型输出判定的界面元素名称，将判定的界面元素名称与贴好的界面元素标签对应，如不一致，则调整所述机器学习模型的系数，使得判定的界面元素名称与贴好的界面元素标签对应。

在步骤S1221中，人为的将界面元素的边缘曲线与对应的界面元素标签实现排列，使得形成已知的界面元素的边缘曲线与界面元素标签的对应关系，并且收集大量的数据，以形成数据集合，从而方便数据集合的运算，为机器学习模型的训练提供必要的数据支撑。其中，由界面元素的边缘曲线与界面元素的标签形成的数据集合视为机器学习模型的训练样本。

在步骤S1222中，基于训练样本构建出机器学习模型，并由机器学习模型输出判定的界面元素名称，其中，机器学习模型在训练的过程中逐一进行调整，具体的，结合界面元素的边缘曲线调整对应的界面元素名称，使得机器学习模型所输出的界面元素名称为正确的界面元素名称，从而调整机器学习模型的训练，提高机器学习模型的输出的准确性，

另外，通过在机器学习模型中调整界面元素名称，具体的，调整所述机器学习模型的系数，使得判定的界面元素名称与贴好的界面元素标签对应，从而通过机器学习模型的系数调整机器学习模型，进而提高机器学习模型的输出的准确性。

在步骤S123中，由上述技术方案能够获知界面元素的轮廓和对应的名称，另外，界面代码还与界面元素的位置有关。通过二值图像获得了对应的界面元素的外轮廓的像素点，其中，在二值图像构建坐标轴，并以二值图像的一个端点为原点，从而得出界面元素的连通曲线的像素点的位置坐标。

在步骤S124中，基于众多的界面元素的连通曲线的像素点的位置坐标，汇聚于中心点，并与界面元素的连通曲线的中心点为界面元素的中心位置，并以此作为定位界面元素的位置，另外，界面元素的连通曲线的中心点置于二值图像所构建的坐标轴中，使得界面元素的连通曲线的中心点明确得知，从而确定了界面元素的位置，通过界面元素的中心位置定位界面元素，提高界面元素转化的代码的准确性。此时，界面元素对应的名称和中心位置均已明确。

在步骤S130中，在对应界面设计图的界面代码中存在一部分通用代码，该通用代码并不随界面元素的变化而变化，可是，通用代码界面元素的位置存在对应关系，并将该对应关系形成代码模板的对应关系表，使得所述代码模板的对应关系表中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写。

由于在步骤S120中确认了界面设计图的界面元素的位置，故通过界面设计图的界面元素的位置查找所述代码模板的对应关系表能够得出针对该位置的通用代码，从而生产对应位置的通用代码，方便进行界面元素的转化，且不受位置的影响，提高生成界面代码的稳定性。

其中，代码模板的对应关系表可以根据人为经验列举成表，也可以通过大数据及学习模型的结合形成该表，该代码模板的对应关系表明确了界面元素的位置与代码的关系，即特定的界面元素的位置具有特定的代码，并且提前输入至表格中。代码模板的对应关系表能够作为参考的依据，实现对应界面元素的位置的代码快速成型，并且提高通用代码的准确性。

在步骤S140中，从二值图像中提取界面元素，其中，界面元素可以为动物、建筑物、人体等。界面元素与生成界面元素的代码具有对应关系，另外，界面元素的参数对于界面元素的代码的参数，并能够实现转化，通过界面元素的代码的参数方便填入至通用代码中，从而实现界面代码的自动生成，并且界面元素的代码的参数填入需要填充至对应的区域，降低界面代码的自动生成出错的概率。

在步骤S150中，用户的喜好存在多样性，并且界面设计图需要符合用户的喜好，故获取的界面设计图需要针对用户的喜好进行对应的调整，以满足用户的需求。

通过响应于接收到用于风格转化的请求指令，获悉用户对界面设计图的喜好信息，其中，所述请求指令中携带有需要的风格信息，该风格信息为用户对界面设计图的喜好信息，该喜好信息可选的年轻、成熟、热血等等。

在步骤S160中，由于界面设计图需要针对用户的喜好实现调整，故用户的喜好信息与界面元素的参数进行匹配，而风格信息与参数改变量匹配关系表主要记录着用户信息与界面元素的参数对应关系，即年轻对应有年轻的界面元素。

依据用户的喜好信息查找风格信息与参数改变量匹配关系表，明确得出对应的参数信息，并依照该参数信息实现所提取的界面元素的参数实现转化，其中，可选的，等比例转化、矩阵转化等。通过所提取的界面元素的参数转化成用户所喜好界面元素的参数，从而为获取的界面设计图转化为用户喜好的界面设计图提供了较好的基础。

在步骤S170中，依据用户喜好的信息和参数改变量匹配关系表获得调整后的用户所喜好界面元素的参数，并将该用户所喜好界面元素的参数填充到所述代码模板中，其中，所述代码模板依据界面元素的中心位置进行确定，使得界面元素的相对布置定位，故通过对调整后的参数填充至所述代码模板的对应位置上，并形成一个完整的界面代码，从而生成对应于所述风格信息的界面代码。

其中，界面元素的变化与界面元素的位置进行了分离，使得双方具有独立性，并且在以界面元素的中心位置确定的代码模板与界面元素的参数衔接无障碍，使得生成对应于所述风格信息的界面代码更加有效率。

通过识别所述界面设计图的界面元素的位置，并根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板和对应的通用代码，根据通用代码与提取所述界面元素的参数结合，从而形成对应的界面代码，另外，还可依据请求指令中携带有需要的风格信息进行参数的调整，使得在原有的通用代码上填充调整后的参数，并生成符合用户喜好的界面设计图和对应的界面代码，大大提高界面设计图的工作效率，简化界面设计图生产的工序。

如图5所示，在一个实施例中，如图4所示，步骤S170可以包括：

步骤S171、逐一标记各所述改变后的界面元素的参数，各所述标记依序排列；

步骤S172、依照顺序检测所述代码模板所空缺的位置，将所述所空缺的位置与所述标记进行匹配；

步骤S173、若匹配成功，则将所述标记对应的参数与对应的所述所空缺的位置进行关联，且将所述标记对应的参数填充至对应的所述所空缺的位置，以生成对应于所述风格信息的界面代码。

在步骤S171中，由于所述改变后的界面元素的参数具有多个，并且避免界面元素的参数在转化过程中产生位置上的变化，通过对所述改变后的界面元素的参数进行标记，有效地记录各个所述改变后的界面元素的参数，提高所述改变后的界面元素的参数填充过程的精准度。另外，各所述标记依序排列，从而有效地对应所述改变后的界面元素的参数的填充过程，提高填充的效率。

在步骤S172中，所述代码模板中的位置具有严格的顺序性，所述代码模板中的空缺位置是依序展开的，空缺位置之间具有顺序性，通过所述代码模板中的空缺位置是依序展开的，空缺位置之间具有顺序性，通过所述代码模板中的空缺位置与所述标记进行匹配，使得所述代码模板中的空缺位置与所述改变后的界面元素的参数进行匹配，保证所述代码模板中的空缺位置与所述改变后的界面元素的参数的统一性，提高所述代码模板的填充准确性。

在步骤S173中，在所述代码模板中的空缺位置与所述改变后的界面元素的参数匹配成功时，所述代码模板中的空缺位置需要对应所述改变后的界面元素的参数，由于所述代码模板中的空缺位置与所述改变后的界面元素的参数通过标记而具有关联性，从而所述代码模板中的空缺位置快速填充所述改变后的界面元素的参数，以生成对应于所述风格信息的界面代码，并且有效地保证所述风格信息的界面代码的准确性，实现所述风格信息的界面代码顺利运行。

如图6所示，在一个实施例中，所述一种基于界面设计图自动生成界面代码的装置200还包括：

获取模块210，用于获取界面设计图；

识别模块220，用于识别所述界面设计图的界面元素的位置；

第一查找模块230，用于根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；

提取模块240，用于提取所述界面元素的参数；

响应模块250，用于响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；

第二查找模块260，用于根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；

填充模块270，用于将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码。

下面参照图4来描述根据本发明的这种实施方式的电子设备40。图4显示的电子设备40仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，电子设备40以通用计算设备的形式表现。电子设备40的组件可以包括但不限于：上述至少一个处理单元41、上述至少一个存储单元42、连接不同系统组件(包括存储单元42和处理单元41)的总线43。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元41执行，使得所述处理单元41执行本说明书上述“实施例方法”部分中描述的根据本发明各种示例性实施方式的步骤。

存储单元42可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)421和/或高速缓存存储单元422，还可以进一步包括只读存储单元(ROM)423。

存储单元42还可以包括具有一组(至少一个)程序模块425的程序/实用工具424，这样的程序模块425包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线43可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备40也可以与一个或多个外部设备(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备40交互的设备通信，和/或与使得该电子设备40能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口45进行。并且，电子设备40还可以通过网络适配器46与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器46通过总线43与电子设备40的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备40使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施方式的方法。

根据本公开一个实施例，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的步骤。

参考图8所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品50，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (8)

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

获取界面设计图；

识别所述界面设计图的界面元素的位置；

根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；

提取所述界面元素的参数；

响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；

根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；

将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码。

2.根据权利要求1所述的方法，其特征在于，所述获取界面设计图，包括：

接收到待处理界面设计图，并将所述待处理界面设计图转换成灰度图像；

对所述灰度图像进行平滑处理，将所述经平滑处理后的灰度图像进行中值滤波处理；

将所述中值滤波处理后的灰度图像进行二值化处理，得到二值图像，作为获取到的界面设计图。

3.根据权利要求2所述的方法，其特征在于，所述识别所述界面设计图的界面元素的位置，包括：

识别所述二值图像中的边缘曲线，其中，如果二值图像中相邻两个像素点的像素值相同，则用线连接所述相邻两个像素点，用线连接二值图像上所有相邻的像素值相同的像素点后形成的每一条连通曲线为一条边缘曲线；

将所述边缘曲线输入至识别界面元素的机器学习模型，由机器学习模型输出所述界面元素；

获取所述连通曲线的每个像素点的位置坐标；

基于所述连通曲线的每个像素点的位置坐标，确定所述连通中心的坐标，作为对应界面元素的位置。

4.根据权利要求3所述的方法，其特征在于，所述机器学习模型通过以下方式预先训练而成：

获取边缘曲线样本集合，所述边缘曲线样本中的每个边缘曲线样本具有贴好的界面元素标签；

将所述边缘曲线样本中的每个边缘曲线样本输入机器学习模型，由所述机器学习模型输出判定的界面元素名称，将判定的界面元素名称与贴好的界面元素标签对应，如不一致，则调整所述机器学习模型的系数，使得判定的界面元素名称与贴好的界面元素标签对应。

5.根据权利要求1所述的方法，其特征在于，所述将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码，包括：

逐一标记各所述改变后的界面元素的参数，各所述标记依序排列；

依照顺序检测所述代码模板所空缺的位置，将所述所空缺的位置与所述标记进行匹配；

若匹配成功，则将所述标记对应的参数与对应的所述所空缺的位置进行关联，且将所述标记对应的参数填充至对应的所述所空缺的位置，以生成对应于所述风格信息的界面代码。

6.一种基于界面设计图自动生成界面代码的装置，其特征在于，包括：

获取模块，用于获取界面设计图；

识别模块，用于识别所述界面设计图的界面元素的位置；

第一查找模块，用于根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；

提取模块，用于提取所述界面元素的参数；

响应模块，用于响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；

第二查找模块，用于根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；

填充模块，用于将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码。

7.一种计算机可读程序介质，其特征在于，其存储有计算机程序指令，当所述计算机程序指令被计算机执行时，使计算机执行根据权利要求1至4中任一项所述的方法。

8.一种电子装置，其特征在于，包括：

处理器；

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如权利要求1至4任一项所述的方法。

Images