CN110766697B - 一种界面草图的图形界面控件图像识别的方法和装置 - Google Patents

一种界面草图的图形界面控件图像识别的方法和装置 Download PDF

Info

Publication number
CN110766697B
CN110766697B CN201910981782.4A CN201910981782A CN110766697B CN 110766697 B CN110766697 B CN 110766697B CN 201910981782 A CN201910981782 A CN 201910981782A CN 110766697 B CN110766697 B CN 110766697B
Authority
CN
China
Prior art keywords
image
center point
primitive
identification unit
colored pixels
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910981782.4A
Other languages
English (en)
Other versions
CN110766697A (zh
Inventor
潘敏学
张天
解温特
葛笑非
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nanjing University
Original Assignee
Nanjing University
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Nanjing University filed Critical Nanjing University
Priority to CN201910981782.4A priority Critical patent/CN110766697B/zh
Publication of CN110766697A publication Critical patent/CN110766697A/zh
Application granted granted Critical
Publication of CN110766697B publication Critical patent/CN110766697B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/10—Segmentation; Edge detection
    • G06T7/11—Region-based segmentation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00—Pattern recognition
    • G06F18/20—Analysing
    • G06F18/22—Matching criteria, e.g. proximity measures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/10—Segmentation; Edge detection
    • G06T7/181—Segmentation; Edge detection involving edge growing; involving edge linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/90—Determination of colour characteristics
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Data Mining & Analysis (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Bioinformatics & Cheminformatics (AREA)
  • Bioinformatics & Computational Biology (AREA)
  • Evolutionary Biology (AREA)
  • Evolutionary Computation (AREA)
  • General Engineering & Computer Science (AREA)
  • Image Analysis (AREA)

Abstract

本发明公开了一种界面草图的图形界面控件图像识别的方法和装置。该方法对输入的图像进行预处理后，通过对预处理后的图像进行递归分割，对各分割后的图像识别边缘矩形框，然后识别边缘矩形框内的图元标识，根据图元标识对应的控件种类识别出各种类型的控件，并根据边缘矩形框的位置确定该控件在界面上的位置，结合递归的层次关系组成用以表示控件间的层次布局的控件布局树，从而便于设计人员进行界面布局设计。

Description

一种界面草图的图形界面控件图像识别的方法和装置
技术领域
本发明涉及软件图形界面设计领域，特别涉及图形界面草图转换成能够应用于计算机程序的图形用户界面。
背景技术
在软件开发中，图形用户界面非常重要。一个具有丰富且交互友好用户图形界面的软件更容易被用户所接受和青睐。在移动应用软件或者在台式桌面应用软件中，友好的用户图形界面在市场上具有更强的市场竞争力。为软件设计友好的用户图形界面需要耗费很多精力和资源。虽然目前各种应用软件开发平台大都支持图形界面控件拖拽式的所见即所得的图形界面生成平台。然而，这种拖拽的图形界面生成平台往往需要进行复杂的环境配置，这是一种重量级的应用背景，而这些行为不仅对图形界面设计的空间场景有较高要求，且需要用户具有领域内一定的先验知识。
草图作为人类自然沟通的一种重要方式，保存了思维的核心，有利于创造性思维的快速表达。基于此，通过草图建模图形界面是一种软件图形界面设计开发非常便利的方式。
发明内容
本发明所要解决的问题：将界面草图转换成软件的图形界面，特别是识别界面草图中的图形界面控件图像。
为解决上述问题，本发明采用的方案如下：
根据本发明的一种界面草图的图形界面控件图像识别的方法，包括如下步骤：
S1：对输入的图像进行预处理；所述预处理包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤；
S2：对图像进行递归分析处理，生成控件布局树；
所述步骤S2包括：
S21：对图像进行连续性分割，得到图像分割块和所述图像分割块的位置信息；
S22：识别所述图像分割块的边缘矩形框；
S23：若所述图像分割块能够识别到边缘矩形框，则将所述图像分割块清除所述边缘矩形框后得到的图像作为步骤S2的输入转步骤S2进行递归；
S24：若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识；所述图元标识是用于区分控件种类的标识图像；每一种控件种类对应特定的图元标识；
S25：根据识别到的图元标识和所述图像分割块所对应的边缘矩形框确定控件种类，结合所述图像分割块的位置信息，组成控件布局树节点，进而构建相应的控件布局树。
进一步，根据本发明的界面草图的图形界面控件图像识别的方法，所述步骤S24中，若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识单元；所有图像分割块识别结束后，根据当前递归层次下识别到的若干个所述图元标识单元以及所述图元标识单元之间的位置信息组成图元标识。
进一步，根据本发明的界面草图的图形界面控件图像识别的方法，所述识别所述图像分割块内的图元标识单元包括如下步骤：
S241：将所述图像分割块的图像缩放至所述图元标识单元对应模板图像的尺寸大小；
S242：统计缩放后的图像分别在横向和纵向上的投影分布的有色像素数；
S243：统计缩放后的图像分别与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数；
S244：根据所述在横向和纵向上的投影分布的有色像素数以及所述与中心点的按距离分布的有色像素数和所述与中心点的按角度分布的有色像素数作为特征向量与所述图元标识单元对应模板图像进行相似度比较，判断所述图像分割块的图像是否为相应的图元标识单元。
进一步，根据本发明的界面草图的图形界面控件图像识别的方法，所述步骤S242为：统计缩放后的图像和所述图元标识单元对应模板图像在横向上的投影的有色像素数差值Gx＝{x1，x2，...，xW}和在纵向上的投影的有色像素数差值Gy＝{y1，y2，...，yH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，xi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数和所述图元标识单元对应模板图像在横向上第i位置纵向上的有色像素数之差；yj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数和所述图元标识单元对应模板图像在纵向上第j位置横向上的有色像素数之差；所述有色像素为区别于背景色的像素点；
所述步骤S243为：统计缩放后的图像和所述图元标识单元对应模板图像与中心点的距离分布的有色像素数差值Gl＝{l1，l2，...，lL}和与中心点的等角分布的有色像素数差值Gb＝{b1，b2，...，bB}；其中，L为与中心点的距离数，B为与中心点的等角数，lk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数和所述图元标识单元对应模板图像与中心点距离落在区间[rk，rk+1)的有色像素数之差；bc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数和所述图元标识单元对应模板图像与中心点的角度落在区间[ac，ac+1)的有色像素数之差；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；
所述步骤S244为：将Gx、Gy、Gl和Gb组成向量G，并计算向量G的原点距，根据所述向量G的原点距是否超过预先设定的值判断所述图像分割块的图像是否为相应的图元标识单元。
进一步，根据本发明的界面草图的图形界面控件图像识别的方法，所述步骤S242为：统计缩放后的图像在横向上的投影的有色像素数GTx＝{tx1，tx2，...，txW}和在纵向上的投影的有色像素数GTy＝{ty1，ty2，...，tyH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，txi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数；tyj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数；所述有色像素为区别于背景色的像素点；
所述步骤S243为：统计缩放后的图像与中心点的距离分布的有色像素数GTl＝{tl1，tl2，...，tlL}和与中心点的等角分布的有色像素数GTb＝{tb1，tb2，...，tbB}；其中，L为与中心点的距离数，B为与中心点的等角数，tlk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数；tbc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；
所述步骤S244为：将GTx、GTy、GTl和GTb组成向量GT，并通过余弦相似度公式计算向量GT与所述图元标识单元对应模板图像对应的向量GM之间的相似度，然后根据得到的相似度判断所述图像分割块的图像是否为相应的图元标识单元。
根据本发明的一种界面草图的图形界面控件图像识别的装置，包括如下模块：
M1，用于：对输入的图像进行预处理；所述预处理包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤；
M2，用于：对图像进行递归分析处理，生成控件布局树；
所述模块M2包括：
M21，用于：对图像进行连续性分割，得到图像分割块和所述图像分割块的位置信息；
M22，用于：识别所述图像分割块的边缘矩形框；
M23，用于：若所述图像分割块能够识别到边缘矩形框，则将所述图像分割块清除所述边缘矩形框后得到的图像作为模块M2的输入调用模块M2进行递归；
M24，用于：若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识；所述图元标识是用于区分控件种类的标识图像；每一控件种类对应特定的图元标识；
M25，用于：根据识别到的图元标识和所述图像分割块所对应的边缘矩形框确定控件种类，结合所述图像分割块的位置信息，组成控件布局树节点，进而构建相应的控件布局树。
进一步，根据本发明的界面草图的图形界面控件图像识别的装置，所述模块M24中，若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识单元；所有图像分割块识别结束后，根据当前递归层次下识别到的若干个所述图元标识单元以及所述图元标识单元之间的位置信息组成图元标识。
进一步，根据本发明的界面草图的图形界面控件图像识别的装置，所述识别所述图像分割块内的图元标识单元包括如下模块：
M241，用于：将所述图像分割块的图像缩放至所述图元标识单元对应模板图像的尺寸大小；
M242，用于：统计缩放后的图像分别在横向和纵向上的投影分布的有色像素数；
M243，用于：统计缩放后的图像分别与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数；
M244，用于：根据所述在横向和纵向上的投影分布的有色像素数以及所述与中心点的按距离分布的有色像素数和所述与中心点的按角度分布的有色像素数作为特征向量与所述图元标识单元对应模板图像进行相似度比较，判断所述图像分割块的图像是否为相应的图元标识单元。
进一步，根据本发明的界面草图的图形界面控件图像识别的装置，所述模块M242为用于：统计缩放后的图像和所述图元标识单元对应模板图像在横向上的投影的有色像素数差值Gx＝{x1，x2，...，xw}和在纵向上的投影的有色像素数差值Gy＝{y1，y2，...，yH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，xi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数和所述图元标识单元对应模板图像在横向上第i位置纵向上的有色像素数之差；yj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数和所述图元标识单元对应模板图像在纵向上第j位置横向上的有色像素数之差；所述有色像素为区别于背景色的像素点；
所述模块M243为用于：统计缩放后的图像和所述图元标识单元对应模板图像与中心点的距离分布的有色像素数差值Gl＝{l1，l2，...，lL}和与中心点的等角分布的有色像素数差值Gb＝{b1，b2，...，bB}；其中，L为与中心点的距离数，B为与中心点的等角数，lk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数和所述图元标识单元对应模板图像与中心点距离落在区间[rk，rk+1)的有色像素数之差；bc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数和所述图元标识单元对应模板图像与中心点的角度落在区间[ac，ac+1)的有色像素数之差；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；
所述模块M244为用于：将Gx、Gy、Gl和Gb组成向量G，并计算向量G的原点距，根据所述向量G的原点距是否超过预先设定的值判断所述图像分割块的图像是否为相应的图元标识单元。
进一步，根据本发明的界面草图的图形界面控件图像识别的装置，所述模块M242为用于：统计缩放后的图像在横向上的投影的有色像素数GTx＝{tx1，tx2，...，txW}和在纵向上的投影的有色像素数GTy＝{ty1，ty2，...，tyH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，txi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数；tyj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数；所述有色像素为区别于背景色的像素点；
所述模块M243为用于：统计缩放后的图像与中心点的距离分布的有色像素数GTl＝{tl1，tl2，...，tlL}和与中心点的等角分布的有色像素数GTb＝{tb1，tb2，...，tbB}；其中，L为与中心点的距离数，B为与中心点的等角数，tlk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数；tbc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；
所述模块M244为用于：将GTx、GTy、GTl和GTb组成向量GT，并通过余弦相似度公式计算向量GT与所述图元标识单元对应模板图像对应的向量GM之间的相似度，然后根据得到的相似度判断所述图像分割块的图像是否为相应的图元标识单元。
本发明的技术效果如下：本软件开发设计人员所绘制的图形界面草图能够被转换成应用于软件的图形用户界面，从而于软件开发设计人员通过草图形式设计图形用户界面，特别是本发明在轻量级场景下的移动应用界面设计上具有非常好的应用前景。
附图说明
图1是本发明实施例的流程图。
图2是本发明实施例输入的图形界面草图示例。
图3是本发明实施例的另一实施方式流程图。
图4是图2中的图像分割示例。
图5是本发明实施例图元标识单元模板示例。
图6是本发明根据图2中的图元标识单元组成的图元标识和控件对应表的示例。
图7是本发明实施例根据图4的草图示例得到的控件布局树。
图8是本发明实施例另一实施方式下的图元标识和控件对应表的示例。
具体实施方式
下面结合附图对本发明做进一步详细说明。
如图l所示，本实施例的界面草图的图形界面控件图像识别的方法包括两个步骤：第一个步骤是草图预处理步骤，第二个步骤是对预处理后的草图进行递归处理步骤。该方法输入的是图形界面草图，输出是控件布局树。
输入的图形界面草图通常是由扫描仪扫描纸件上的图形界面草图得到的图像，或者由相机拍摄纸件或白板或黑板得到的图像。无论是扫描仪扫描得到的图像还是相机拍摄得到的图像，本领域技术人员理解，通常为JPG格式的图片，包含有大量的噪音信息，不能直接输入至第二步骤进行递归处理，因此需要对该输入的草图进行预处理。这就是第一个步骤，也就是前述和图1中的步骤S1，对输入的图像进行预处理。
草图预处理步骤，本实施例中，包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤。
灰度化处理步骤也就是将彩色化的JPG格式的图片转换成灰度化表示，具体来说将图像每个像素RGB表示的彩色转换成每个像素的灰度值形成灰度化表示，本领域技术人员理解，灰度值可以根据公式：Gray＝(R×77+G×151+B×28)＞＞8进行快速计算，得到的灰度值Gray位于区间0～255。本实施例的示例中，通过直接调用MatLab中的rgb2gray函数实现。rgb2gray函数输入的是彩色图像，输出为灰度图像。
二值化处理步骤也就是将前述得到的灰度图像做进一步处理使得灰度图像转换成0和255或0和1的二值图像，使得整个图像呈现为非黑即白和非白即黑的黑白效果。本领域技术人员理解二值化处理可以通过对灰度图像的每个灰度值统计得到灰度值的直方图HH＝{h0，h1，h2，...，h255}后，然后通过聚类算法对灰度值的直方图聚类分析后，得到背景色和前景色的中心灰度值，然后根据背景色和前景色的中心灰度值划分出背景色的灰度值范围和前景色的灰度值范围，灰度值落入背景色的灰度值范围的设为0，落入前景色的灰度值范围的设为255或l，从而得到二值灰度的二值图像。直方图HH＝{h0，h1，h2，...，h255}中，h0，h1，h2，...，h255分别为灰度图像各个灰度值的统计值。本实施例的示例中，通过直接调用MatLab中的graythresh函数实现。graythresh函数输入的是灰度图像，输出为0和255的二值图像。
去噪声处理步骤，也即是剔除二值图像中面积小于预先设定阈值的图像块。比如，在0和255表示的二值图像中，0为背景色，255为前景色，剔除掉颜色为255前景色的面积小于预先设定阈值的图像块替换成背景色0表示。本实施例的示例中，通过直接调用MatLab中的bwareaopen函数实现。函数bwareaopen用于删除二值图像BW中面积小于预先设定阈值的对象。预先设定阈值可以定义为5～15。
线体单像素细化步骤。草图绘制中，绘制的图像通常通过线体表示。但草图绘制的线体粗细通常不一，体现在去噪声处理步骤后的二值图像中，对应的线体可能是1～N个像素宽度，为便于后续的第二个步骤的递归处理，本实施例将线体单像素细化，该步骤处理后，线体宽度全都转换成单像素宽度。本实施例的示例中，通过直接调用MatLab中的bwmorph函数实现。
经上述预处理后的图像输入至第二个步骤进行递归分析处理。第二个步骤，也就是前述前述和图l中的步骤S2，其输出为控件布局树。步骤S2如图l所示，大体包括：步骤S2l，图像分割步骤；步骤S22，识别边缘矩形框步骤；步骤S23，清除边缘矩形框后递归调用步骤S2的步骤；步骤S24，识别图元标识步骤；步骤S25，构建控件布局树步骤。步骤S2的递归处理体现在步骤S23中。
步骤S21图像分割步骤是根据图像前景色的连续性划分区块而形成图像分割块。图像分割步骤分割得到的图像分割块可能有多块，因此需要对多块图像分割块进行循环遍历。判断步骤T1分割块是否都遍历过是循环遍历过程中的循环结束判断步骤。步骤S22、S23和S24是针对某个图像分割块所处理的步骤。对于该图像分割块首先执行步骤S22识别边缘矩形框。如果步骤S22能够识别到边缘矩形框，则执行步骤S23，清除边缘矩形框后留下边缘矩形框内的图像内容输入至步骤S2进行递归，递归结束后返回图像分割块的遍历过程；如果步骤S22不能够识别到边缘矩形框则执行步骤S24识别图元标识。步骤S24识别图元标识后，一个图像分割块的处理结束，返回至判断步骤T1，进行下一个图像分割块的处理。若判断步骤T1判断到所有的图像分割块均遍历过，则执行步骤S25，构建控件布局树，之后结束当前层次的递归过程返回至上一层次。返回上一层次的递归时，存在两种可能性，第一种是递归分析处理整体处理步骤结束，第二种是通过步骤S23返回至上一层次后继续下一图像分割块的遍历过程。
图2是本实施例的一个图形界面草图输入示例。该图形界面草图中，矩形框F1、F11、F12、F13、F14、F15、F16、F161、F1611、F1612、F1613以及F17即为边缘矩形框，由于经图像分割后得到相应的图像分割块中，这些矩形框位于该图像分割块的边缘，因此，本发明称之为边缘矩形框。该图形界面草图经步骤Sl的草图预处理后进行递归处理过程时，首先执行步骤S21，步骤S21执行后得到一个矩形框F1所圈定范围的图像分割块，此时执行步骤S22时，能够识别到矩形框F1作为该图像分割块的边缘矩形框，因此，转步骤S23。步骤S23后清除作为边缘矩形框的矩形框F1后，剩下矩形框F1内的图像内容作为步骤S2的输入进行下一层次的递归。对矩形框F1内的图像内容进行递归时，步骤S21执行后能够得到多个图像分割块，分别为矩形框F11、F12、F13、F14、F15、F16和F17各自所圈定的范围作为图像分割块。矩形框F11、F12、F13、F14、F15、F16和F17各自所对应的图像分割块，识别到相应的矩形框F11、F12、F13、F14、F15、F16和F17后，执行步骤S23清除相应的矩形框F11、F12、F13、F14、F15、F16和F17后，剩下矩形框F11、F12、F13、F14、F15、F16和F17内的图像内容再输入至步骤S2进行递归调用。对于矩形框F11所对应的图像分割块，去除矩形框F11，剩下圆圈F111。剩下圆圈F111的图像内容输入至步骤S2进行递归调用时，步骤S22识别不到矩形框，则执行步骤S24。对于矩形框F12所对应的图像分割块，去除矩形框F12后剩下三个叉F121，则执行步骤S24。同理对于矩形框F13、F14和F15以及F17均如此。而对于矩形框F16所对应的图像分割块，去除矩形框F16后剩下矩形框F161和箭头F162，此时执行步骤S21时能够分割出两个图像分割块分别为：矩形框F161所圈定范围的图像分割块和箭头F162所对应的图像分割块。矩形框F161所对应的图像分割块在执行步骤S22时，能够识别到相应的矩形框F162作为边缘矩形框，因此，转步骤S23，清除边缘矩形框F162后得到三个矩形框F1611、F1612、F1613的剩余图像进行步骤S2的递归。而对于箭头F162所对应的图像分割块则在步骤S22中识别不到相应的边缘矩形框，则执行步骤S24。对于三个矩形框F1611、F1612和F1613的剩余图像进行步骤S2递归时，在步骤S21中分割成矩形框F1611、F1612和F1613各自对应的图像分割块。矩形框F1611、F1612和F1613各自所对应的图像分割块，识别到相应的矩形框F1611、F1612和F1613后，执行步骤S23清除相应的矩形框F1611、F1612和F1613后，剩下矩形框F1611、F1612和F1613内的图像内容再输入至步骤S2进行递归调用。对于矩形框F1611所对应的图像分割块，去除矩形框F1611，剩下三角形F16111。剩下三角形F16111的图像内容输入至步骤S2进行递归调用时，步骤S22识别不到矩形框，则执行步骤S24。而对于矩形框F1612和F1613所对应的图像分割块的处理同前述的矩形框F12。
根据前述图2的示例，步骤S21就是对二值图像内图像内容的连续性分割，这对本领域技术人员来说为并不难实现，为本领域技术人员所熟悉。本实施例中，为简单起见，同时也考虑到，矩形框是水平摆放的，当矩形框出现明显不合理的倾斜、线条扭曲等情况是不合理的控件的摆放方式，不予识别，为此，将输入的图像向横向和纵向上进行投影，提取在横向上和纵向上的投影连续区域则作为预分割块。若预分割块向横向和纵向上进行投影时，若在横向上和纵向上的投影连续，则作为图像分割块，否则提取在横向上和纵向上的投影连续区域则作为预分割块，然后再对这些预分割块分别进行向横向和纵向上进行投影判读其连续性。也就是说，本实施例步骤S21的图像分割本身为递归处理过程，而且该递归过程与前述的递归过程结合，参照图3。
图3显示了本发明步骤S2又一实施方式下的流程。相比于图l中的流程，图l中的步骤S1在图3所显示的流程中被分解成：步骤S211、T11、T12、S212。步骤S211投影分割即为前述的输入的图像向横向和纵向上进行投影，提取在横向上和纵向上的投影连续区域则作为预分割块。步骤S211投影分割所分割到的预分割块可能由多块，因此有判断步骤T11，预分割块是否都遍历过。判断步骤T1l类似于前述图l中的判断步骤T1，是为循环遍历步骤的中的循环判断条件。步骤T12的投影判断细分用于判断该预分割块是否可以进一步进行细分，若能够细分，则表明该预分割块由多个前述的图像分割块所组成而执行步骤S212递归调用步骤S2，若不能够细分，则表明该预分割块独立构成前述的图像分割块，则对该图像分割块执行前述图1中的步骤S22、S23和S24。步骤T12的投影判断细分也就是前述的将预分割块向横向和纵向上进行投影，若在横向上和纵向上的投影连续，则该预分割块不能细分独立构成图像分割块，否则表明该预分割块由多个图像分割块组成。图3实施方式下，图像分割成图像分割块的过程与对图像分割块的遍历混淆，逻辑上不是很清楚，因此本发明优先采用图1实施方式下，将图像先分割成若干图像分割块后再循环遍历各个图像分割块。
步骤S21分割得到的图像分割块或者步骤S211分割得到的预分割块为矩形区域。图2中的矩形框F16所对应的图像分割块为如图4所示的虚线框E16所标注的矩形区域，而对于三角形F16111所对应的图像分割块为如图4所示的虚线框E1611l所标注的矩形区域。
步骤S22识别边缘矩形框。边缘矩形框的识别方法很多，本实施例采用如下方法，首先，统计图像分割块横向上的直方图HX＝{hxi|i∈[1..MX]}和纵向上的直方图HY＝{hyi|i∈[1..MY]}，其中，MX为图像分割块的宽度，MY为图像分割块的高度。hxi为第i个横向坐标在纵向上的前景色像素点值；hyi为第i个纵向坐标在横向上的前景色像素点值。然后对直方图HX＝{hxi|i∈[1..MX]}和HY＝{hyi|i∈[1..MY]}用卷积核{-1，-1，-1，-1，8，-1，-1，-1，-1}进行卷积，分别得到卷积直方图SX＝{sxi|i∈[1..MX]}和SY＝{syi|i∈[1..MY]}；然后判断i＜9和i＜MX-9时是否存在sxi＞0.6×MY以及i＜9和i＜MY-9时是否存在syi＞0.6×MX，若条件满足，则存在边缘矩形框。
步骤S23清除边缘矩形框采用如下方法：对图像分割块每一水平线进行自左到右和自右到左扫描，将扫描到第一个前景色像素点替换成背景色，以及对图像分割块每一垂直线进行自上而下和自下而上扫描，将扫描到的扫描到第一个前景色像素点替换成背景色。由于，本实施例在步骤S1中对边缘矩形框的线体进行了单像素操作，因此，上述处理后，即清除了边缘矩形框。
步骤S24识别图元标识中，图元标识是用于区分控件种类的标识图像，每一种控件种类对应特定的图元标识。图元标识的标识图像具有特定形状以区分控件种类。本实施例中，图元标识基于图元标识单元。图元标识由单个图元标识单元或多个图元标识单元组成。每个图元标识单元通过特定的图形进行区分。图5显示了本实施例所定义的图元标识单元。本实施例定义了8种图元标识单元，分别为：竖直线VertLine，圆Cirle，三角形Triangle，叉Cross，勾Check，水平线HorzLine，向下箭头Arrow，以及矩形Rectangle。图6则显示了本实施例所定义的图元标识与控件类型的对应表，该表定义了9中图元标识，分别为：文本编辑框EditBox，按钮Button，图片框ImageBox，文本框TextBox，复选框RadioBox，勾选框CheckBox，状态切换按钮SwitchButton，工具条ToolBar和列表List。其中，文本编辑框EditBox的图元标识为单个的竖直线VertLine；按钮Button的图元标识为单个的圆Cirle；图片框ImageBox的图元标识为单个的三角形Triangle；文本框TextBox的图元标识由三个叉Cross组成；复选框RadioBox的图元标识由一个圆Cirle和两个叉Cross组成；勾选框CheckBox的图元标识由一个勾Check和两个叉Cross组成；状态切换按钮SwitchButton的图元标识由一个圆Cirle和一个水平线HorzLine组成；工具条ToolBar的图元标识由三个水平线HorzLine和一个圆Cirle组成；列表List由一个矩形Rectangle和一个向下箭头Arrow组成，以此表示若干个相同类型的矩形Rectangle圈定的范围组成的列表。此外，多个图元标识单元组成图元标识时，多个图元标识单元之间具有相对固定的位置关系。
由于本实施例中的图元标识由多个独立的图元标识单元，因此步骤S24采用如下方法，也就是，若图像分割块未能识别到边缘矩形框，则识别图像分割块内的图元标识单元；在所有图像分割块识别结束后，根据当前递归层次下识别到的若干个图元标识单元以及图元标识单元之间的位置信息组成图元标识。其中，图元标识单元的识别具体采用如下步骤：
S241：将图像分割块的图像缩放至图元标识单元对应模板图像的尺寸大小；
S242：统计缩放后的图像分别在横向和纵向上的投影分布的有色像素数；
S243：统计缩放后的图像分别与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数；
S244：根据在横向和纵向上的投影分布的有色像素数以及与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数作为特征向量与图元标识单元对应模板图像进行相似度比较，判断图像分割块的图像是否为相应的图元标识单元。
其中，图元标识单元对应模板图像即为图5中所定义的图元标识单元模板图像，有色像素即为像素二值化灰度为前景色的像素，与此对应的无色像素为像素二值化灰度为背景色的像素。这里的统计缩放后的图像分别在横向和纵向上的投影分布的有色像素数，即为前述步骤S22中的统计图像分割块横向上的直方图HX＝{hxi|i∈[1..MX]}和纵向上的直方图HY＝{hyi|i∈[1..MY]}，也就是，横向上的直方图HX＝{hxi|i∈[1..MX]}和纵向上的直方图HY＝{hyi|i∈[1..MY]}即为横向和纵向上的投影分布的有色像素数，只不过这里的MX和MY对应于图元标识单元模板图像的宽度和高度，也可表示成：在横向上的投影的有色像素数GTx＝{tx1，tx2，...，txw}和在纵向上的投影的有色像素数GTy＝{ty1，ty2，...，tyH}；其中，W为图元标识单元对应模板图像横向上的尺寸，H为图元标识单元对应模板图像纵向上的尺寸，txi|i∈(1..W)为缩放后的图像在横向上第i位置纵向上的有色像素数；tyj|j∈(1..H)为缩放后的图像在纵向上第j位置横向上的有色像素数。步骤S243中，缩放后的图像分别与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数可以表示成：与中心点的距离分布的有色像素数GTl＝{tl1，tl2，...，tlL}和与中心点的等角分布的有色像素数GTb＝{tb1，tb2，...，tbB}；其中，L为与中心点的距离数，B为与中心点的等角数，tlk|k∈(1..L)为缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数；tbc|c∈(1..B)为缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点。本实施例中，与中心点的按角度分布中的角度分布为等角度分布。与中心点的按距离分布可以是等距离分布，也可以是其他分布，比如等对数距离分布。等对数距离分布也就是与中心点的距离分割点r1，r2，...，rL+1满足：ri＝ln(rxi)，其中rx1，rx2，...，rxL+1满足等距分布。
相似度比较的方法有很多种，本实施例第一种实施方式是，将GTx、GTy、GTl和GTb组成向量GT，并通过余弦相似度公式计算向量GT与图元标识单元对应模板图像对应的向量GM之间的相似度，然后根据得到的相似度判断图像分割块的图像是否为相应的图元标识单元。其中，GT＝{tx1，tx2，...，txw，ty1，ty2，...，tyH，tl1，tl2，...，tlL，tb1，tb2，...，tbB}。其中，图元标识单元对应模板图像对应的向量GM由GMx、GMy、GMl和GMb组成，GMx、GMy、GMl和GMb分别为图元标识单元对应模板图像在横向上的投影的有色像素数、在纵向上的投影的有色像素数、与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数，分别定义如下：GMx＝{mx1，mx2，...，mxW}；GMy＝{my1，my2，...，myH}；GMl＝{ml1，ml2，...，mlL}；GMb＝{mb1，mb2，...，mbB}；其中，mxi|i∈(1..W)为图元标识单元对应模板图像在横向上第i位置纵向上的有色像素数；myj|j∈(1..H)为图元标识单元对应模板图像在纵向上第j位置横向上的有色像素数；mlklk∈(1..L)为图元标识单元对应模板图像与中心点距离落在区间[rk，rk+1)的有色像素数；mbc|c∈(1..B)为图元标识单元对应模板图像与中心点的角度落在区间[ac，ac+1)的有色像素数。对应于向量GT，向量GM则有：
GM＝{mxl，mx2，...，mxW，my1，my2，...，myH，ml1，ml2，...，mlL，mbl，mb2，...，mbB}。
向量之间的余弦相似度公式为本领域技术人员所熟悉，本说明书不再赘述。此外，需要说明的是，由于图元标识单元对应的模板图像是预先设定的，因此，向量GM可以预先计算得到。此外，相似度也可以采用原点距离公式计算，也即是对于向量GT＝{ti|i∈[1..WHLB]}和向量GM＝{mi|i∈[1..WHLB]}，其中WHLB＝W+H+L+B；原点距离公式有：或者简单点地：/>此种方式下，步骤S242中可以直接统计缩放后的图像和图元标识单元对应模板图像在横向上的投影的有色像素数差值Gx＝{x1，x2，...，xW}和在纵向上的投影的有色像素数差值Gy＝{y1，y2，...，yH}；其中，Gx＝GTx-GMx；Gy＝GTy-GMy；步骤243中可直接统计缩放后的图像和所述图元标识单元对应模板图像与中心点的距离分布的有色像素数差值G1＝{l1，l2，...，lL}和与中心点的等角分布的有色像素数差值Gb＝{b1，b2，...，bB}；其中，Gl＝GTl-GMl；Gb＝GTb-GMb。于是步骤S244中可将向量Gx、Gy、Gl和Gb组成向量G，并计算向量G的原点距。此时向量G＝GT-GM＝{gi|i∈[1..WHLB]}。向量G的原点距/>或者/>而易见地有gi＝ti-mi。
此外，需要指出的是，对于部分图元标识单元，比如，竖直线VertLine和水平线HorzLine可以对上述步骤S242至步骤S244进行简化：对于竖直线VertLine，仅需要统计缩放后的图像分别在横向上的投影分布的有色像素数，此时有向量GT＝GTx；而对于水平线HorzLine，仅需要统计缩放后的图像分别在纵向上的投影分布的有色像素数，此时有GM＝GMy。
此外，对于矩形Rectangle的图元标识单元无需步骤S24进行识别，矩形Rectangle的图元标识单元的识别由步骤S22实现。
此外，需要说明的是，上述循环遍历过程中，所有图像分割块识别结束后，根据当前递归层次下识别到的若干个图元标识单元以及图元标识单元之间的位置信息组成图元标识。因此需要在步骤S24中判断当前的图像分割块是否为最后一个图像分割块。或者也可以将步骤“所有图像分割块识别结束后，根据当前递归层次下识别到的若干个图元标识单元以及图元标识单元之间的位置信息组成图元标识”提至循环遍历过程之后进行。本实施例优选后者实施方式。
在上述前提之下，也就是，步骤“所有图像分割块识别结束后，根据当前递归层次下识别到的若干个图元标识单元以及图元标识单元之间的位置信息组成图元标识”提至循环遍历过程之后，步骤S25之前进行。步骤S22、S23和S24的循环结束后，将得到每个图像分割块的图元标识单元识别信息(Type，Postion，SubTree)，其中，Type表示为图元标识单元类型；Postion表示为图像分割块的位置信息，可以表示为：(XB，YB，WB，HB)，其中，XB，YB，WB，HB分别为图像分割块的横坐标、纵坐标以及宽度和高度，SubTree表示为控件布局树。多个图像分割块的图元标识单元识别信息(Type，Postion，SubTree)组成图元标识单元识别信息表{(Type，Postion，SubTree)i|i∈[1..K]}；其中K为图像分割块的数目。显而易见地，这里的控件布局树SubTree为子树，而且，只有当图元标识单元类型Type为矩形Rectangle时，才有可能带有控件布局树，其他类型的图元标识单元不可能带有控件布局树。
根据得到的图元标识单元识别信息表{(Type，Postion，SubTree)i|i∈[1..K]}识别图元标识进而执行步骤S25构建出控件布局树。图7显示了根据图2所示的界面草图所生成的控件布局树。比如，对于图2的矩形框F12内的图像分割块进行遍历时，三个叉F121对应的图像分割块识别后形成的图元标识单元识别信息表为{(Cross，Postion，0)i|i∈[1..3]}；其中0标识为控件布局树为空，然后根据对{(Cross，Postion，0)i|i∈[1..3]}内三个叉Cross的位置匹配比较得到当前的图元标识类型为TextBox。图元标识类型也就是控件类型，于是在相应的步骤S25中构建出图7所示的单个节点构成的控件布局树TF12。返回上一次层次后，在对矩形框F1内的图像进行循环遍历后，矩形框F12对应的图像分割块所对应的图元标识单元识别信息为(Rectange，Postion，TF12)；在对矩形框F1内的图像执行步骤S25后，该Rectange内的控件布局树TF12作为子树加入至图7所示的控件布局树TF1内。再比如对于矩形框F16内的图像分割块进行循环遍历后，得到图元标识单元识别信息表为{(Rectange，Postion，TF161)，(Arrow，Postion，0)}，其中，控件布局树TF161包含带有单个节点子树：TF161，TF1612和TF1613。TF1611，TF16和TF1613分别对应三个矩形框F1611、F1612和F1613。根据对图元标识单元识别信息表{(Rectange，Postion，TF161)，(Arrow，Postion，0)}中矩形框F16l和箭头F162的位置匹配比较后，当前的图元标识类型为List，于是在相应的步骤S25中构建出图7所示的控件布局树TF1，控件布局树TF16包含有子树TF161。由此在对在对矩形框F1内的图像进行循环遍历后，矩形框F16对应的图像分割块所对应的图元标识单元识别信息为(Rectange，Postion，TF16)，于是，在对在对矩形框F1内的图像进行循环遍历后所生成的图元标识单元识别信息表为：(Rectange，Postion，TF11)，(Rectange，Postion，TF1)，(Rectange，Postion，TF1)，(Rectange，Postion，TF1)，(Rectange，Postion，TF1)，(Rectange，Postion，TF16)，(Rectange，Postion，TF17)，由于该图元标识单元识别信息表无法识别出相应的图元标识，直接执行步骤S25，构建出图7所示的控件布局树TF1，控件布局树TF11、TF12、TF13、TF14、TF1、TF16、TF17则作为控件布局树TF1的子树。之后回到上一次层次步骤S2中执行时，步骤S22至步骤S4循环遍历结束后，得到图元标识单元识别信息表仅包含矩形框F1对应的图形分割块所生成的图元标识单元识别信息，该图元标识单元识别信息为(Rectange，Postion，TF1)，之后通过步骤S25的执行，控件布局树TF1加入根节点后，得到最终的控件布局树TRoot。控件布局树的每个节点可以表示为(ControlType，Postion，SubNodes)。ControlType表示为控件类型；Postion表示为控件所处的位置；SubNodes表示为控件布局树的子节点。需要指出的是，控件类型除了前述的EditBox，Button，ImageBox，TextBox，RadioBox，CheckBox，SwitchButton，ToolBar和List之外，本实施例中，还包括Block类型。Block表示为由矩形框圈定的块体。图7中，控件布局树TRoot的根节点、控件布局树TF1的根节点以及控件布局树TF16的根节点的控件类型均为Block。此外，List控件类型表示若干个相同类型的矩形Rectangle圈定的范围组成的列表，由此可以将List类型视为Block类型的一种。在此基础上，仅有Block类型的节点才有可能包含有控件布局树的子节点和控件布局树的子树。其他类型的控件均只能作为控件布局树的叶子节点。
此外，需要指出的是，上述实施方式中，“所有图像分割块识别结束后，根据当前递归层次下识别到的若干个图元标识单元以及图元标识单元之间的位置信息组成图元标识”建立在图元标识可能有多个图元标识单元组成的情况下，本领域技术人员理解，若每种图元标识均只有一个图元标识单元，那么该图元标识单元也就是图元标识，比如图8所显示的表格中，每种控件类型对应一种图元标识，每种图元标识仅有一个图元标识单元组成。此种情形下，步骤S24可以直接完成对图元标识的识别。

Claims (6)

1.一种界面草图的图形界面控件图像识别的方法，其特征在于，包括如下步骤：
S1：对输入的图像进行预处理；所述预处理包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤；
S2：对图像进行递归分析处理，生成控件布局树；
所述步骤S2包括：
S21：对图像进行连续性分割，得到图像分割块和所述图像分割块的位置信息；
S22：识别所述图像分割块的边缘矩形框；
S23：若所述图像分割块能够识别到边缘矩形框，则将所述图像分割块清除所述边缘矩形框后得到的图像作为步骤S2的输入转步骤S2进行递归；
S24：若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识；所述图元标识是用于区分控件种类的标识图像；每一种控件种类对应特定的图元标识；
S25：根据识别到的图元标识和所述图像分割块所对应的边缘矩形框确定控件种类，结合所述图像分割块的位置信息，组成控件布局树节点，进而构建相应的控件布局树；
所述步骤S24中，若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识单元；所有图像分割块识别结束后，根据当前递归层次下识别到的若干个所述图元标识单元以及所述图元标识单元之间的位置信息组成图元标识；
所述识别所述图像分割块内的图元标识单元包括如下步骤：
S241：将所述图像分割块的图像缩放至所述图元标识单元对应模板图像的尺寸大小；
S242：统计缩放后的图像分别在横向和纵向上的投影分布的有色像素数；
S243：统计缩放后的图像分别与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数；
S244：根据所述在横向和纵向上的投影分布的有色像素数以及所述与中心点的按距离分布的有色像素数和所述与中心点的按角度分布的有色像素数作为特征向量与所述图元标识单元对应模板图像进行相似度比较，判断所述图像分割块的图像是否为相应的图元标识单元。
2.如权利要求1所述的界面草图的图形界面控件图像识别的方法，其特征在于，所述步骤S242为：统计缩放后的图像和所述图元标识单元对应模板图像在横向上的投影的有色像素数差值Gx＝{x1,x2,…,xw}和在纵向上的投影的有色像素数差值Gy＝{y1,y2,…,yH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，xi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数和所述图元标识单元对应模板图像在横向上第i位置纵向上的有色像素数之差；yj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数和所述图元标识单元对应模板图像在纵向上第j位置横向上的有色像素数之差；所述有色像素为区别于背景色的像素点；
所述步骤S243为：统计缩放后的图像和所述图元标识单元对应模板图像与中心点的距离分布的有色像素数差值Gl＝{l1，l2，...，lL}和与中心点的等角分布的有色像素数差值Gb＝{b1，b2，...，bB}；其中，L为与中心点的距离数，B为与中心点的等角数，lk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数和所述图元标识单元对应模板图像与中心点距离落在区间[rk，rk+1)的有色像素数之差；bc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数和所述图元标识单元对应模板图像与中心点的角度落在区间[ac，ac+1)的有色像素数之差；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；
所述步骤S244为：将Gx、Gy、Gl和Gb组成向量G，并计算向量G的原点距，根据所述向量G的原点距是否超过预先设定的值判断所述图像分割块的图像是否为相应的图元标识单元。
3.如权利要求1所述的界面草图的图形界面控件图像识别的方法，其特征在于，所述步骤S242为：统计缩放后的图像在横向上的投影的有色像素数GTx＝{tx1，tx2，...，txw}和在纵向上的投影的有色像素数GTy＝{ty1，ty2，...，tyH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，txi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数；tyj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数；所述有色像素为区别于背景色的像素点；
所述步骤S243为：统计缩放后的图像与中心点的距离分布的有色像素数GTl＝{tl1，tl2，...，tlL}和与中心点的等角分布的有色像素数GTb＝{tb1，tb2，...，tbB}；其中，L为与中心点的距离数，B为与中心点的等角数，tlk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数；tbc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；
所述步骤S244为：将GTx、GTy、GTl和GTb组成向量GT，并通过余弦相似度公式计算向量GT与所述图元标识单元对应模板图像对应的向量GM之间的相似度，然后根据得到的相似度判断所述图像分割块的图像是否为相应的图元标识单元。
4.一种界面草图的图形界面控件图像识别的装置，其特征在于，包括如下模块：
M1，用于：对输入的图像进行预处理；所述预处理包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤；
M2，用于：对图像进行递归分析处理，生成控件布局树；
所述模块M2包括：
M21，用于：对图像进行连续性分割，得到图像分割块和所述图像分割块的位置信息；
M22，用于：识别所述图像分割块的边缘矩形框；
M23，用于：若所述图像分割块能够识别到边缘矩形框，则将所述图像分割块清除所述边缘矩形框后得到的图像作为模块M2的输入转模块M2进行递归；
M24，用于：若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识；所述图元标识是用于区分控件种类的标识图像；每一控件种类对应特定的图元标识；
M25，用于：根据识别到的图元标识和所述图像分割块所对应的边缘矩形框确定控件种类，结合所述图像分割块的位置信息，组成控件布局树节点，进而构建相应的控件布局树；
所述模块M24中，若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识单元；所有图像分割块识别结束后，根据当前递归层次下识别到的若干个所述图元标识单元以及所述图元标识单元之间的位置信息组成图元标识；
所述识别所述图像分割块内的图元标识单元包括如下模块：
M241，用于：将所述图像分割块的图像缩放至所述图元标识单元对应模板图像的尺寸大小；
M242，用于：统计缩放后的图像分别在横向和纵向上的投影分布的有色像素数；
M243，用于：统计缩放后的图像分别与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数；
M244，用于：根据所述在横向和纵向上的投影分布的有色像素数以及所述与中心点的按距离分布的有色像素数和所述与中心点的按角度分布的有色像素数作为特征向量与所述图元标识单元对应模板图像进行相似度比较，判断所述图像分割块的图像是否为相应的图元标识单元。
5.如权利要求4所述的界面草图的图形界面控件图像识别的装置，其特征在于，所述模块M242为用于：统计缩放后的图像和所述图元标识单元对应模板图像在横向上的投影的有色像素数差值Gx＝{x1,x2,…,xW}和在纵向上的投影的有色像素数差值Gy＝{y1,y2,…,yH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，xi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数和所述图元标识单元对应模板图像在横向上第i位置纵向上的有色像素数之差；yj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数和所述图元标识单元对应模板图像在纵向上第j位置横向上的有色像素数之差；所述有色像素为区别于背景色的像素点；
所述模块M243为用于：统计缩放后的图像和所述图元标识单元对应模板图像与中心点的距离分布的有色像素数差值Gl＝{l1,l2,…,lL}和与中心点的等角分布的有色像素数差值Gb＝{b1，b2，...，bB}；其中，L为与中心点的距离数，B为与中心点的等角数，lk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数和所述图元标识单元对应模板图像与中心点距离落在区间[rk，rk+1)的有色像素数之差；bc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数和所述图元标识单元对应模板图像与中心点的角度落在区间[ac，ac+1)的有色像素数之差；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；
所述模块M244为用于：将Gx、Gy、Gl和Gb组成向量G，并计算向量G的原点距，根据所述向量G的原点距是否超过预先设定的值判断所述图像分割块的图像是否为相应的图元标识单元。
6.如权利要求4所述的界面草图的图形界面控件图像识别的装置，其特征在于，所述模块M242为用于：统计缩放后的图像在横向上的投影的有色像素数GTx＝{tx1，tx2，...，txW}和在纵向上的投影的有色像素数GTy＝{ty1，ty2，...，tyH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，txi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数；tyj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数；所述有色像素为区别于背景色的像素点；
所述模块M243为用于：统计缩放后的图像与中心点的距离分布的有色像素数GTl＝{tl1，tl2，...，tlL}和与中心点的等角分布的有色像素数GTb＝{tb1，tb2，...，tbB}；其中，L为与中心点的距离数，B为与中心点的等角数，tlk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数；tbc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；
所述模块M244为用于：将GTx、GTy、GTl和GTb组成向量GT，并通过余弦相似度公式计算向量GT与所述图元标识单元对应模板图像对应的向量GM之间的相似度，然后根据得到的相似度判断所述图像分割块的图像是否为相应的图元标识单元。
CN201910981782.4A 2019-10-16 2019-10-16 一种界面草图的图形界面控件图像识别的方法和装置 Active CN110766697B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910981782.4A CN110766697B (zh) 2019-10-16 2019-10-16 一种界面草图的图形界面控件图像识别的方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910981782.4A CN110766697B (zh) 2019-10-16 2019-10-16 一种界面草图的图形界面控件图像识别的方法和装置

Publications (2)

Publication Number Publication Date
CN110766697A CN110766697A (zh) 2020-02-07
CN110766697B true CN110766697B (zh) 2023-08-04

Family

ID=69331284

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910981782.4A Active CN110766697B (zh) 2019-10-16 2019-10-16 一种界面草图的图形界面控件图像识别的方法和装置

Country Status (1)

Country Link
CN (1) CN110766697B (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113298072A (zh) * 2020-02-21 2021-08-24 阿里巴巴集团控股有限公司 识别设计稿的方法、装置及电子设备
CN112416340A (zh) * 2020-05-14 2021-02-26 上海哔哩哔哩科技有限公司 基于草图的网页生成方法和系统
CN112836644B (zh) * 2021-02-04 2022-11-25 电子科技大学 一种基于超图学习的安全帽实时检测方法
CN113010741B (zh) * 2021-03-30 2023-09-05 南京大学 基于草图的移动应用模型查询方法
CN117573118A (zh) * 2023-11-16 2024-02-20 南京数睿数据科技有限公司 基于草图识别的应用页面生成方法、装置和电子设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108563984A (zh) * 2018-03-02 2018-09-21 山东科技大学 一种流程模型图的自动识别与理解方法
CN109190370A (zh) * 2018-07-02 2019-01-11 南京大学 一种基于控件区域分布特征的安卓界面相似度计算方法
CN110032989A (zh) * 2019-04-23 2019-07-19 福州大学 一种基于框线特征和像素分布的表格文档图像分类方法

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10437914B2 (en) * 2018-01-02 2019-10-08 Go Daddy Operating Company, LLC Creating HTML layouts based on client input and processing

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108563984A (zh) * 2018-03-02 2018-09-21 山东科技大学 一种流程模型图的自动识别与理解方法
CN109190370A (zh) * 2018-07-02 2019-01-11 南京大学 一种基于控件区域分布特征的安卓界面相似度计算方法
CN110032989A (zh) * 2019-04-23 2019-07-19 福州大学 一种基于框线特征和像素分布的表格文档图像分类方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
季海峰 ; 田怀文 ; .面向概念设计的组合图形草图识别方法.计算机科学.2016,(S1),全文. *

Also Published As

Publication number Publication date
CN110766697A (zh) 2020-02-07

Similar Documents

Publication Publication Date Title
CN110766697B (zh) 一种界面草图的图形界面控件图像识别的方法和装置
CN110598610B (zh) 一种基于神经选择注意的目标显著性检测方法
Lu et al. Salient object detection using concavity context
CN111273905B (zh) 基于界面草图的应用检索方法和装置
US5265173A (en) Rectilinear object image matcher
CN105528614B (zh) 一种漫画图像版面的识别方法和自动识别系统
Gong et al. Advanced image and video processing using MATLAB
CN110751655A (zh) 一种基于语义分割和显著性分析的自动抠图方法
CN114529925B (zh) 一种全线表表格结构识别方法
US11836958B2 (en) Automatically detecting and isolating objects in images
CN108399644A (zh) 一种墙体图像识别方法及其装置
CN111507334A (zh) 一种基于关键点的实例分割方法
CN110268442B (zh) 在图像中检测背景物上的外来物的计算机实现的方法、在图像中检测背景物上的外来物的设备以及计算机程序产品
Zhu et al. Coarse-to-fine document localization in natural scene image with regional attention and recursive corner refinement
Den Hartog et al. Knowledge-based interpretation of utility maps
Rubio et al. BASS: boundary-aware superpixel segmentation
CN111161281A (zh) 一种人脸区域识别方法、装置及存储介质
KR20070117393A (ko) 사전 모양 정보를 이용한 디지털 영상에서의 물체를추출하기 위한 방법 및 상기 방법을 수행하는 시스템
Grosky et al. Optimal quadtrees for image segments
CN111524204B (zh) 一种人像发丝动漫化纹理生成方法
Ablameyko An introduction to interpretation of graphic images
Coughlan et al. Shape matching with belief propagation: Using dynamic quantization to accomodate occlusion and clutter
Hanbury How do superpixels affect image segmentation?
CN109871910A (zh) 一种手写字符识别方法及装置
Ha et al. A novel method for automatic detection of basic shapes on whiteboard images using faster RCNN

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant