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

文档序号:20837554发布日期:2020-05-22 17:04阅读:来源:国知局

技术特征:

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

获取界面设计图;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

获取模块,用于获取界面设计图;

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

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

提取模块,用于提取所述界面元素的参数;

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

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

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

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

8.一种电子装置,其特征在于,包括:

处理器;

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


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

技术研发人员:谭龙智
受保护的技术使用者:平安国际智慧城市科技股份有限公司
技术研发日:2019.12.23
技术公布日:2020.05.22
当前第2页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1