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

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

Methods, devices, media and electronic equipment for automatically generating interface codes based on interface design drawings

【技术实现步骤摘要】
基于界面设计图自动生成界面代码的方法、装置、介质及电子设备
本专利技术涉及智能决策中的检测模型，特别涉及一种基于界面设计图自动生成界面代码的方法、装置、介质及电子设备。
技术介绍
在相关技术中，界面设计图的设计需要通过设计师绘图、人工提炼元素和匹配对应的界面参数，并将对应的界面参数交付至开发人员进行界面编程，界面设计图对应的界面生成相当繁琐，工作效率低，并且不利于把握用户喜好。
技术实现思路
本公开旨在提供一种基于界面设计图自动生成界面代码的方法、装置、介质及电子设备，其能够依据用户的喜好信息进行对应的界面代码自动生成，大大提高界面设计图的工作效率，简化界面设计图生产的工序。根据本公开的一方面，提供了一种基于界面设计图自动生成界面代码的方法，包括：获取界面设计图；识别所述界面设计图的界面元素的位置；根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；提取所述界面元素的参数；响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码。在一个实施例中，所述获取界面设计图，包括：接收到待处理界面设计图，并将所述待处理界面设计图转换成灰度图像；对所述灰度图像进行平滑处理，将所述经平滑处理后的灰度图像进行中值滤波处理；将所述中值滤波处理后的灰度图像进行二值化处理，得到二值图像，作为获取到的界面设计图。在一个实施例中，所述识别所述界面设计图的界面元素的位置，包括：识别所述二值图像中的边缘曲线，其中，如果二值图像中相邻两个像素点的像素值相同，则用线连接所述相邻两个像素点，用线连接二值图像上所有相邻的像素值相同的像素点后形成的每一条连通曲线为一条边缘曲线；将所述边缘曲线输入至识别界面元素的机器学习模型，由机器学习模型输出所述界面元素。在一个实施例中，所述机器学习模型通过以下方式预先训练而成：获取边缘曲线样本集合，所述边缘曲线样本中的每个边缘曲线样本具有贴好的界面元素标签；将所述边缘曲线样本中的每个边缘曲线样本输入机器学习模型，由所述机器学习模型输出判定的界面元素名称，将判定的界面元素名称与贴好的界面元素标签对应，如不一致，则调整所述机器学习模型的系数，使得判定的界面元素名称与贴好的界面元素标签对应。在一个实施例中，所述将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码，包括：逐一标记各所述改变后的界面元素的参数，各所述标记依序排列；依照顺序检测所述代码模板所空缺的位置，将所述所空缺的位置与所述标记进行匹配；若匹配成功，则将所述标记对应的参数与对应的所述所空缺的位置进行关联，且将所述标记对应的参数填充至对应的所述所空缺的位置，以生成对应于所述风格信息的界面代码。根据本公开的一方面，提供了一种基于界面设计图自动生成界面代码的装置，包括：获取模块，用于获取界面设计图；识别模块，用于识别所述界面设计图的界面元素的位置；第一查找模块，用于根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；提取模块，用于提取所述界面元素的参数；响应模块，用于响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；第二查找模块，用于根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；填充模块，用于将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码。根据本公开的一方面，提供了一种计算机可读程序介质，其存储有计算机程序指令，当所述计算机程序指令被计算机执行时，使计算机执行根据第一方面所述的方法。根据本公开的一方面，提供了一种电子装置，包括：处理器；存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如权利要求第一方面所述的方法。本专利技术的实施例提供的技术方案可以包括以下有益效果：在本专利技术的一些实施例所提供的技术方案中，通过识别所述界面设计图的界面元素的位置，并根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板和对应的通用代码，根据通用代码与提取所述界面元素的参数结合，从而形成对应的界面代码，另外，还可依据请求指令中携带有需要的风格信息进行参数的调整，使得在原有的通用代码上填充调整后的参数，并生成符合用户喜好的界面设计图和对应的界面代码，大大提高界面设计图的工作效率，简化界面设计图生产的工序。应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本专利技术。附图说明此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本专利技术的实施例，并于说明书一起用于解释本专利技术的原理。图1是根据一示例性实施例示出的一种基于界面设计图自动生成界面代码的方法的流程图。图2是根据一示例性实施例示出的获取界面设计图的详细流程图。图3是根据一示例性实施例示出的识别所述界面设计图的界面元素的位置的详细流程图。图4是根据一示例性实施例示出的机器学习模型的详细流程图。图5是根据一示例性实施例示出的填充界面代码的详细流程图。图6是根据一示例性实施例示出的一种基于界面设计图自动生成界面代码的装置的框图。图7是根据一示例性实施例示出的一种电子装置的硬件图。图8是根据一示例性实施例示出的一种基于界面设计图自动生成界面代码的方法的计算机可读存储介质。具体实施方式这里将详细地对示例性实施例执行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本专利技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本专利技术的一些方面相一致的装置和方法的例子。此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。附图所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。根据本公开的一个实施例，提供了基于界面设计图自动生成界面代码的方法。该界面设计图是指一般显示在显示设备上的界面，并且可进行对应修改。该界面代码是指对应的界面设计图的软件语言，并且通过界面代码能够生成对应的界面设计图。如图1所示，该基于界面设计图自动生成界面代码的方法包括：步骤S110、获取界面设计图；步骤S1本文档来自技高网...

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

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


2.根据权利要求1所述的方法，其特征在于，所述获取界面设计图，包括：
接收到待处理界面设计图，并将所述待处理界面设计图转换成灰度图像；
对所述灰度图像进行平滑处理，将所述经平滑处理后的灰度图像进行中值滤波处理；
将所述中值滤波处理后的灰度图像进行二值化处理，得到二值图像，作为获取到的界面设计图。


3.根据权利要求2所述的方法，其特征在于，所述识别所述界面设计图的界面元素的位置，包括：
识别所述二值图像中的边缘曲线，其中，如果二值图像中相邻两个像素点的像素值相同，则用线连接所述相邻两个像素点，用线连接二值图像上所有相邻的像素值相同的像素点后形成的每一条连通曲线为一条边缘曲线；
将所述边缘曲线输入至识别界面元素的机器学习模型，由机器学习模型输出所述界面元素；
获取所述连通曲线的每个像素点的位置坐标；
基于所述连通曲线的每个像素点的位置坐标，确定所述连通中心的坐标，作为对应界面元素的位置。


4.根据权利要求3所述的方法，其特征在于，所述机器学习模型通过以下方式预先训练而成：
获取边缘曲线样本集合，所述边缘曲线样本中的每个边缘曲线样本具有贴好的界面元素标签；
将所述边缘曲线样本中的每个边缘曲线样本输入机器学习模型，由所述机器学...

【专利技术属性】
技术研发人员：谭龙智，
申请(专利权)人：平安国际智慧城市科技股份有限公司，
类型：发明
国别省市：广东;44