一种基于图像的界面代码生成的方法概要.doc

说明书摘要 摘要附图 权 利 要 求 书 1、一种基于图像的界面代码生成的方法，其特征在于，包括如下步骤： 输入待处理的UI设计图并进行预处理； 对处理后的设计图进行类型识别，判断UI用途； 利用蛇形遍历和深度搜索的方法得到多个图层； 利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容； 建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息； 利用递归生成不同图层的方法得到界面完整的HTML代码。 2、如权利要求1所述的基于图像的界面代码生成的方法，其特征在于，所述输入待处理的UI设计图并进行预处理包括： 通过图像锐化和去噪使得图像画质得到增强。 3、如权利要求2所述的基于图像的界面代码生成的方法，其特征在于，所述对处理后的设计图进行类型识别，判断UI用途包括： 搜集不同类型用户界面建立一个UI图库； 使用SIFT算法进行图片识别获取图片特征值； 使用特征值匹配库内对应类型的界面，找到相似度最高的一类用来定义这个设计图的类型。 4、如权利要求3所述的基于图像的界面代码生成的方法，其特征在于，所述利用蛇形遍历和深度搜索的方法得到多个图层包括： 切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘； 得到层叠的多图层数据的预期效果设计图识别不同控件设计图说 明 书 技术领域背景技术 专利CN200610001470.5其界面都是根据配置文件临时生成的，生成的界面是死的，用户不能根据自己的需求来调整界面内容，降低了用户体验。 发明内容的预期效果设计图识别不同控件设计图附图说明 具体实施方式 实施本发明实施例的方法，可以解决用户界面代码自动生成普遍存在的低灵活性。同时我们使用了改进的分割算法加强了图像分割的精度，建立有独特的存储页面信息的数据结构（如页面类型，图层维度，组件，背景等），将页面信息参数化并通过将数据传入相应程序从而生成对应代码段，实现了高效率的UI开发过程。 S102、对处理后的设计图进行类型识别，判断UI用途； 具体实施过程中，通过搜集大量主页，登陆/注册页，产品列表页等现有的不同类型用户界面建立一个UI图库；使用SIFT算法进行图片识别获取图片特征值；使用特征值匹配库内对应类型的界面，找到相似度最高的一类，用来定义这个设计图的类型。 S103、利用蛇形遍历和深度搜索的方法得到多个图层； 使用利用蛇形遍历+深度搜索的方法进行图像分割，并在分割过程中记录图层的Z-index值，以达到切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘，得到层叠的多图层数据的预期效果以下是关于这种算法的几点说明 当边缘像素为1的时候，要加一个判断条件，即不仅要比较一个点周围的点，还要拿这个点与周围的点进行比较，防止出现边缘像素为1，边缘两侧颜色相近的情况，边缘像素大于1的时候，算法将每次切割最外层边缘。 因为有些图片是渐变色的，如果仅仅是判断颜色不同，可能会把渐变色的图也给划分为了边缘，这样就会使划分精度下降，引进一个阈值，只有颜色变化大于这个值的时候才会识别为边缘。 对于非矩形的图形，我们可以判断遍历的点能不能回到“原点”，一般来说矩形图形都能回到“原点”，其他一些不规则图形则不能回到“原点”。 深度遍历图形，引进Z值来表示图层的覆盖关系。 S104、利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容； 识别不可分割的最小子图层内容的步骤包括：处理背景图片，将UI设计图识别不同控件HTML元素。 1、背景图片 取图片的几个特征点，利用这些点的颜色亮度，生成与原图色调尽可能相似的纯色图片，用来提示前端工程师加入哪张图片的源地址。 2、将UI设计图 通过控件属性，如形状，文字等判断控件类型的步骤包括：解决图像中文字区域存在的放置稍微倾斜甚至颠倒的现象，减少其对后续识别处理的影响；将这个字从整个图像中分割出来，具体方法有间距法、垂直投影法、基于多行的垂直投影法等；运用K-means提取文字图像，K-means算法是运用聚类分析或者文法判断的方式得到每个汉字的字符与文字图像的对应，以此训练一个能够涵盖几乎全部文字图像的字符集。利用神经网络算法将图像文字分割后的单字图像进行特征提取，然后与训练库进行匹配。具体的特征匹配可采用欧氏距离算法。 3.控件等其他元素 在具体识别这些图层的HTML元素主要是依靠文字（内容和颜色）以及不同页面类型中图层的定位完成，有如下几种判据： 判据一：文字/图像内容，首先在大量页面中采集信息，建立一个可能与lable等不同控件对应的文字库，并对这个文字库按照字典顺序建立索引。同样，很多控件有时使用扁平化的图像代替文字对用户表明自己的功能，对这些图像我们可以建立一个图