[发明专利]一种基于图像的界面代码生成的方法及系统

摘要

本发明实施例公开了一种基于图像的界面代码生成的方法及系统，其方法包括：输入待处理的UI设计图并进行预处理；对处理后的设计图进行类型识别，判断UI用途；利用蛇形遍历和深度搜索的方法得到多个图层；利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；利用递归生成不同图层的方法得到界面完整的HTML代码。本发明实施例增强了图像界面代码转换的效率，增强用户体验度。

主权项

1.一种基于图像的界面代码生成的方法，其特征在于，包括如下步骤：输入待处理的UI设计图并进行预处理；对处理后的设计图进行类型识别，判断UI用途；利用蛇形遍历和深度搜索的方法得到多个图层，具体为：使用蛇形遍历+深度搜索的方法进行图像分割，并在分割过程中记录图层的Z‑index值，以达到切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘，得到层叠的多图层数据的预期效果；利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容，具体为：处理背景图片，将UI设计图中的文字转化为文本信息，识别不同控件以及获取控件的位置，颜色等信息；建立层次化的数据结构记录UI设计图中的图层、控件、图像、文字的内容和属性全部的网页页面信息；利用递归生成不同图层的方法得到界面完整的HTML代码。