基于机器视觉的软件界面元素关联关系识别方法及系统

技术领域

本发明涉及用户界面技术领域，特别是涉及一种基于机器视觉的软件界面元素关联关系识别方法及系统。

背景技术

软件用户界面是系统与用户进行信息交换的媒介，是人机交互中最为重要的环节。在过去几十年间，随着图形用户界面(GUI)的广泛使用，理解软件使用方式的难度大幅度降低，其在人机交互性、美观性、实用性上所具有的巨大价值为软件领域带来了一场变革，GUI也逐渐成为用户与软件进行交互时不可替代的存在。

如今随着软件大范围的普及使用，软件设计、软件测试等软件全生命周期中各项工作的资源耗费急剧增加。软件设计领域高度依赖于设计者本身的过往经验以及主观认知，及其需要大量的UI设计修改的特点为软件设计师带来了巨额的工作量，多频次的返工更是使得软件设计的工程时间不断被延长；软件测试领域需要测试人员反复进行大量且易失误的同质化操作，但这一过程中所耗费的大量的资源在传统的软件测试方法中是难以剩下的。因此如何推动软件全生命周期的智能化和自动化的实现目前已经成为了软件工程领域新的研究热点。而如何让计算机对软件的用户界面形成正确的理解正是这一智能化和自动化实现的关键以及基础所在。

计算机视觉是指利用摄像机和计算机等相关设备，模拟生物具有的视觉特性，进行图像信息的处理和解释，最终使得计算机可以像人类一样观察和理解自然世界。当下在这一领域中，传统数字图像处理技术及深度学习技术的结合使得图像增强、图像分割、模式识别等技术已经具有了优异的效果，并逐渐在各个领域得到成熟的广泛使用，这为软件界面视觉理解的实现打下了良好的基础。

在当前背景下，软件图形用户界面中所具有的设计主观性强且变动性大、界面逻辑难以进行描述和量化的特点是软件界面元素间关联关系识别的难点所在。设计主观性强、变动性大的主要原因在于不同UI设计人员具有不同的界面布局设计风格，对软件功能体现的理解方式也不尽相同。在界面逻辑难以进行描述和量化方面，由于在设计过程中需要考虑美观性及人机交互性，其界面的交互逻辑设计更趋向于简洁、易操作、降低界面中辅助理解界面功能的元素占比，通过合理布局和组件间关联减少用户进行理解的时间和精力成本，这也就使得界面逻辑的抽象性更强，描述和量化更为困难，极大的加大了计算机通过图像特征提取及处理的方式对界面进行理解的难度。

发明内容

本发明的目的是提供一种基于机器视觉的软件界面元素关联关系识别方法及系统，针对通过软件界面图像信息进行界面组成元素及内部逻辑关系获取(即软件界面视觉理解)这一任务，在界面元素关联关系获取这一方面提供相应的技术支撑。

为实现上述目的，本发明提供了如下方案：

一种基于机器视觉的软件界面元素关联关系识别方法，包括：

对目标软件界面的图像进行特征提取，得到界面GUI组件信息，所述界面GUI组件信息包括界面GUI组件的位置和界面GUI组件的类别；

对目标软件界面的图像进行边缘轮廓提取得到多个轮廓，并确定各轮廓之间的包含关系；

基于所述目标软件界面的图像、所述界面GUI组件信息和各轮廓之间的包含关系，采用循环投影划分的方法确定界面元素间的关联关系；所述界面元素包括界面GUI组件。

本发明还公开了一种基于机器视觉的软件界面元素关联关系识别系统，包括：

界面GUI组件信息提取模块，用于对目标软件界面的图像进行特征提取，得到界面GUI组件信息，所述界面GUI组件信息包括界面GUI组件的位置和界面GUI组件的类别；

轮廓提取模块，用于对目标软件界面的图像进行边缘轮廓提取得到多个轮廓，并确定各轮廓之间的包含关系；

关联关系确定模块，用于基于所述目标软件界面的图像、所述界面GUI组件信息和各轮廓之间的包含关系，采用循环投影划分的方法确定界面元素间的关联关系；所述界面元素包括界面GUI组件。

根据本发明提供的具体实施例，本发明公开了以下技术效果：

本发明对目标软件界面的图像进行特征提取，得到界面GUI组件信息，对目标软件界面的图像进行边缘轮廓提取得到多个轮廓，并确定各轮廓之间的包含关系；基于目标软件界面的图像、界面GUI组件信息和各轮廓之间的包含关系，采用循环投影划分的方法确定界面元素间的关联关系，为软件界面视觉理解任务提供技术支撑。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种基于机器视觉的软件界面元素关联关系识别方法流程示意图；

图2为本发明实施例提供的界面轮廓层级划分示例图像；

图3为本发明实施例提供的界面轮廓层级划分效果展示示意图；

图4为本发明实施例提供的界面元素间关联关系示意图；

图5为本发明实施例提供的软件界面元素关联关系识别流程示意图；

图6为本发明实施例提供的OCR流程示意图；

图7为本发明实施例提供的界面GUI组件提取示例图像；

图8为本发明实施例提供的YOLOv7目标检测效果示意图；

图9为本发明实施例提供的OCR识别效果示意图；

图10为本发明实施例提供的界面GUI控件提取效果示意图；

图11为本发明实施例提供的界面布局特征提取流程示意图；

图12为本发明实施例提供的边缘特征增强流程示意图；

图13为本发明实施例提供的界面布局特征提取示例图像；

图14为本发明实施例提供的Laplacian算子处理效果示意图；

图15为常见3×3卷积核；

图16为本发明实施例所使用卷积核示意图；

图17为本发明实施例提供的组件区域信息修正/图像掩膜示意图；

图18为本发明实施例提供的组件区域信息剔除示意图；

图19为本发明实施例提供的形态学骨架提取示例图像；

图20为本发明实施例提供的形态学骨架提取效果展示示意图；

图21为本发明实施例提供的形态学图像膨胀示意图；

图22为本发明实施例提供的形态学骨架提取示意图；

图23为本发明实施例提供的连通性区域检测示意图；

图24为本发明实施例提供的边缘特征闭合性修正示意图；

图25为本发明实施例提供的循环投影划分流程示意图；

图26为本发明实施例提供的拟划分点生成流程示意图；

图27为本发明实施例提供的循环投影划分示例图像；

图28为本发明实施例提供的图27示例图像的GUI区域信息示意图；

图29为本发明实施例提供的水平投影累计示意图；

图30为本发明实施例提供的竖直投影累计示意图；

图31为本发明实施例提供的拟划分点生成示意图；

图32为本发明实施例提供的循环投影划分过程示意图；

图33为本发明实施例提供的关联关系构建示意图；

图34为本发明实施例提供的关联关系展示示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明针对于软件工程全领域智能化自动化实现过程中计算机对软件用户界面进行理解的这一关键任务，充分考虑现有软件用户界面存在设计主观性强且变动性大、界面逻辑难以进行描述和量化的特点，提出一种基于计算机视觉领域相关技术，根据软件界面的图像信息进行软件界面元素间关联关系识别的方法，为软件界面视觉理解任务提供技术支撑。

实施例1

针对于软件界面元素关联关系识别这一任务，本发明首先对软件界面的元素信息进行了定义。如表1所示，本发明中将软件界面的元素(界面元素)信息划分为待构建组件信息(界面GUI组件)及界面布局特征(边缘特征信息)两大类。

表1软件界面信息分类及定义

其中，待构建组件信息指在软件界面中的GUI元素信息，是软件功能的载体，通常情况下会以特定图标及文字的形式存在，是构建界面元素间关联关系的对象。根据其存在形式可以进一步分为非文本类GUI元素以及文本类GUI元素。同时从组件本身在软件界面中所起作用来考虑，以是否可以进行交互作为依据，待构建组件又可以分为解释式组件及交互式组件两大类，解释式组件指界面中人类无法对其进行点击、拖动等交互操作的组件，交互式组件则指人类可以进行交互操作的界面组件。

其中，界面布局特征是指如灰度梯度、边缘轮廓线段、大面积空白间隙一类的信息，这一类信息并不具备文本含义指代，其不会影响到软件功能的实现，却直接影响到界面的美观程度和理解难度。界面布局特征根据特征信息是否可视可以分为显性布局特征及隐性布局特征，显性布局特征具有可视性、像素性的特点，由轮廓线段、背景灰度梯度等边缘特征信息而组成；隐性布局信息具有不可视性、非像素性的特点，是由于界面组件间的位置关系而形成的信息，是人类根据界面图像整体元素的布局情况而形成的下意识的区域划分，反映在界面中体现为元素间无意义的空白等信息。

在完成软件界面元素信息的定义后，将对界面元素关联关系表现形式进行定义。

本发明提出界面轮廓层级的形式对界面元素关联关系进行表示。本发明所识别的关联关系为界面待构建组件(界面GUI组件)间在空间位置上，由于位置坐标的相似性而使得人类对对应组件产生其具有关联关系的看法。对于如图2所示图像，将在空间位置上具有关联关系的组件逐次划分为多个类别，可以得到如图3所示的划分效果，关联关系展示如图4所示，列表形式进行展示示例：

[[[[Text1,Text2,Text3]],[imge1,label1,label2]],[[imge2],[imge3,label3,label4]]]。在该划分效果之中，从底层组件开始依次向上进行归类划分，以矩形轮廓的方式表示每一次归类划分，最终获得的矩形轮廓的层级关系就可以反映组件间的关联关系。每一次归类划分就是一层元素间关联关系构建，用多层级轮廓的方式完成界面组件的划分，就完成了元素间关联关系的识别。以上过程被称为界面轮廓层级划分，这一划分过程在实际操作过程中依赖于界面布局特征。

如图1和图5所示，本实施例提供的一种基于机器视觉的软件界面元素关联关系识别方法具体包括如下步骤。

步骤101：对目标软件界面的图像进行特征提取，得到界面GUI组件信息，所述界面GUI组件信息包括界面GUI组件的位置和界面GUI组件的类别。

本发明对界面元素信息中待构建组件即GUI控件进行了获取，先后使用YOLOv7目标识别算法以及OCR识别算法分别对非文本类GUI元素以及文本类GUI元素进行识别，并进行相应的结果整合，以获取其类别信息、位置信息及交互状态。

步骤102：对目标软件界面的图像进行边缘轮廓提取得到多个轮廓，并确定各轮廓之间的包含关系。

步骤103：基于所述目标软件界面的图像、所述界面GUI组件信息和各轮廓之间的包含关系，采用循环投影划分的方法确定界面元素间的关联关系；所述界面元素包括界面GUI组件(非文本类GUI元素)。

其中，步骤101具体包括：

采用目标检测模型对目标软件界面的图像进行特征提取，得到界面GUI组件的位置和界面GUI组件的类别。

采用光学字符识别技术对目标软件界面的图像进行文字信息识别；所述界面元素包括文字信息(文本类GUI元素)。

所述目标检测模型为YOLOv7目标检测模型。YOLOv7目标检测模型为单阶段目标检测算法，采用卷积神经网络(CNN)对图像信息进行特征提取，使用CNN模型实现端到端的目标检测，将整张图片作为模型的输入，于输出层对边界框的位置及类别进行回归。在前期利用收集到的各类软件界面图像对YOLOv7目标检测模型进行训练之后，可以直接调用训练结果对待检测图像进行处理，提取界面非文本类GUI组件。

所述YOLOv7目标检测模型为采用训练集对YOLOv7进行训练得到的，所述训练集包括多个样本数据，各所述样本数据包括输入数据和标签数据，所述输入数据为样本软件界面图像，所述标签数据为对应输入数据中界面GUI组件的边界框的位置和类别。

光学字符识别(OCR)技术是利用图像处理和模式识别技术，对图像信息进行分析识别，处理图像特征，获取文字及版面信息的方法。如图6所示，光学字符识别技术往往包括文字区域定位、文字图像矫正、行列分割、分类器识别、后处理这几个流程。对于软件界面来说，由于其文字的规范性强，背景在多数情况下都是统一的，对文字区域的影响较小，因此OCR的识别效果也比较优异。

在YOLO目标检测及OCR识别中，对于特定GUI组件，可能同时包含非文本信息及文本信息，因此其同时具有非文本类GUI控件及文本类GUI控件的特性，需要将两者信息均保存下来，作为后续的输入。

对于如图7所示图像，YOLOv7目标检测结果如图8所示，OCR识别结果如图9所示，最终界面GUI组件提取结果如图10所示。

其中，步骤102是对界面布局特征(边缘特征信息)的提取，在步骤101识别结果的基础上，使用数字图像处理技术，采用图像增强和图像形态学处理算法对目标软件界面的图像进行边缘信息轮廓增强，得到轮廓增强后的图像。采用连通性区域检测算法提取轮廓增强后的图像中界面布局特征(边缘特征信息)以及各轮廓之间的包含关系。

采用图像增强和图像形态学处理算法对目标软件界面的图像进行边缘信息轮廓增强，得到轮廓增强后的图像，具体包括：

采用拉普拉斯(Laplacian)算子对目标软件界面的图像进行图像增强处理。

采用图像形态学膨胀卷积核对图像增强处理后图像进行处理，得到GUI组件位置信息修正结果。

将GUI组件位置信息修正结果的位置信息制作界面图像信息掩膜，通过界面图像信息掩膜控制图像增强处理后图像，将控制区域内所有像素信息剔除，置为黑色，得到初步轮廓。

最后使用图像形态学算法对初步轮廓进行边缘特征信息的修正，得到轮廓增强后的图像。

步骤102涉及的过程主要算法流程如图11所示。主要分为边缘特征增强及边缘特征检测及修正两个步骤，具体包括：

首先采用高斯滤波等方法进行图像噪点的滤除。随后为排除界面GUI信息对边缘特征信息提取的干扰，这一部分将会建立在步骤101提取结果的基础上，使用原始图像信息(目标软件界面的图像)中非文本和文本式的GUI元素信息来进行图像的相应处理。在此之后为增强边缘特征信息的质量，进一步的剔除无关的信息，先后使用图像增强、图像掩膜及图像形态学的相关技术，锐化边缘特征信息，剔除背景及无关GUI信息，弱化噪点信息，提高界面布局特征的质量。

边缘特征增强步骤主要流程如图12所示。

首先采用拉普拉斯(Laplacian)算子进行图像增强处理。Laplacian算子是图像二阶导数下的二维各向同性测度，其具有无方向性的特点，能够充分提取图像中灰度变化快速的区域。其四连通下计算方法如(1)所示，卷积运算下，当其绝对值超过指定阈值T时，如(2)所示，该点就是被检测出的孤立点。孤立点即图像中出现显著灰度跳变的点，在软件界面图像中边缘轮廓处存在显著的灰度跳变，通过拉普拉斯算子处理提取有明显灰度跳变的区域，即可锐化软件界面图像中的边缘轮廓特征信息，实现边缘特征信息增强。

其中，I为原始图像的灰度处理结果，R为在拉普拉斯算子卷积处理后的结果，以特定阈值T进行筛选，最终得到图像增强结果G，G(x,y)表示坐标(x,y)处图像增强后的灰度值。

对于如图13所示图像，其处理效果如图14所示。

随后进行组件区域信息修正及剔除。GUI组件位置信息来源于界面GUI组件提取的结果，在该提取过程中，由于目标检测算法和OCR识别结果精确度无法得到保证，会导致GUI组件的位置信息可能存在微小的偏移，在利用界面GUI组件提取结果对GUI组件区域信息进行剔除时，微小偏移会导致部分区域信息未被完全剔除，进而对后续步骤产生影响。本步骤采用图像形态学膨胀方法，对GUI组件位置信息进行修正。

图像形态学是指用特定形态结构元素来对图像进行处理，进而度量或提取图像特征。其以二值化图像为操作对象，通过图像形态学处理提取出的图像信息是对图像整体形态的最好描述。图像形态学中的基本操作是将图像信息与结构元素(卷积核)进行卷积处理，用结构元素(通常为3×3大小)对图像中各个像素点扫描，用卷积核中的各个像素与其覆盖的像素进行集合上的与操作，在图像膨胀操作中同为0则为0，否则为1，而图像腐蚀操作中同为1则为1，否则为0，常见卷积核如图15中(a)、(b)、(c)和(d)所示。

本步骤采用的图像形态学膨胀卷积核如图16所示。

对于如图13所示图像，其GUI组件位置信息修正结果如图17所示。

完成GUI组件位置信息的修正后，可以根据其位置信息制作界面图像信息掩膜，通过掩膜将界面图像中GUI组件区域信息进行剔除。图像掩膜是指用选定的图形区域对待处理图像的部分区域进行遮挡，被遮挡部分将不会参与该图像后续的处理，进而实现控制图像处理区域或处理过程的一种方法。

根据上一步骤中修正后的GUI组件位置信息，可以制作界面图像信息掩膜，如图17所示，白色区域为进行处理区域，黑色部分为不进行处理区域。对于如图13所示的图像，采用所示的图像信息掩膜控制其处理区域，将处理区域内所有的像素信息剔除，置为黑色，可以得到如图18所示的组件区域信息剔除效果。

最后使用图像形态学算法进行边缘特征信息的修正。

在图像形态学中，图像膨胀操作将图像信息与结构元素(卷积核)进行卷积操作，用一个结构元素(通常为3×3大小)扫描图像中每一个像素点，用结构元素中的每一个像素与其覆盖的像素做“与操作”，同为0则为0，否则为1，而图像腐蚀操作中同为1则为1，否则为0。在图像形态学骨架提取中，反复使用图像膨胀和图像腐蚀操作，在将图像的边界轮廓进行腐蚀收缩的同时，利用图像膨胀操作将像素的微小断点进行合并，实现将一个连通区域细化为一个像素的宽度，最终获得的信息是对图像形态上的一种描述，展示图像的基本脉络，因此又被称为图像的中央骨骼信息。对于如图19所示的图像，进行形态学骨架提取可以得到图20所示的图像基本形态效果。

对于如图18所示的GUI组件区域信息剔除后的图像，进行图像形态学膨胀操作可以得到如图21所示效果。

在完成图像形态学膨胀处理之后，进行图像形态学骨架提取处理，最终得到如图22所示的边缘特征信息修正效果，修正后的边缘特征信息其像素繁杂性得到的优化，信息质量得到了提高，可以用于后续边缘轮廓信息的检测。

边缘特征检测及修正部分通过连通性区域检测算法进行边缘特征信息的检测。连通性区域检测算法原理如所示。对如图22所示进行连通性区域检测，检测结果如图23所示。

完成连通性区域检测之后，进行边缘轮廓信息修正，修正目的是保证边缘轮廓的闭合性。修正部分首先需对边缘轮廓的类别进行检测，如公式(3)所示，通过对轮廓在X方向和Y方向上最大的坐标和最小的坐标进行获取。如公式(4)所示，若在某一方向上的最大和最小坐标间跨度低于某一阈值threshold

其中，x

判断完毕后，对于矩形轮廓，如公式(5)所示，以其极点坐标所在位置作为其闭合性矩形轮廓的位置信息。对于线段轮廓，连通性区域检测会将线段轮廓检测为具有宽高相差悬殊特点的连通矩形区域，需要通过如公式(6)所示的方法将矩形区域信息转换为线段轮廓信息(为线段的两个端点，两个端点位置信息在连通区域跨度较小的方向上一致)，跨度较小方向上将极点坐标作为该方向上位置信息；跨度较大方向上逐个像素不断减小或增大极点坐标，直至与界面图像中某一其他边缘轮廓信息重合为止(不断减小和不断增大各自均能得到一个极点坐标)，以修正后的极点坐标作为该方向上的位置信息。

其中，在矩形轮廓处理过程中，position

对于如图23所示边缘轮廓检测结果，进行轮廓合法性及闭合性修正，其修正结果如图24所示。

至此完成了边缘轮廓特征信息的提取，并通过连通域区域检测算法得到了各轮廓之间的包含关系，各个轮廓区域信息将会作为后续步骤的输入。

其中，步骤103具体包括：

对于每个轮廓：以轮廓对应的图像区域和轮廓对应的界面GUI组件信息作为输入，采用循环投影划分的方法确定轮廓中界面元素间的关联关系，完成界面轮廓层级划分，实现界面元素间关联关系的识别。

循环投影划分中，单次投影划分以被划分区域的图像信息以及该区域内界面GUI组件信息作为原始输入，根据区域内GUI组件的具体位置信息(即GUI组件的中心点坐标及其宽高)获取其水平方向和竖直方向上的累计投影信息，获取累计投影信息后根据特定规则进行拟划分点生成，随后进行界面轮廓层级划分。而循环投影划分会不断重复这一过程，直至区域图像无法继续划分，由此完成了界面轮廓层级划分，即关联关系的生成。

如图25所示，单次投影划分中以被划分区域的图像信息以及该区域内界面GUI组件信息作为原始输入，根据区域内GUI组件的位置信息以及形状信息分别获取其水平方向和竖直方向上的累计投影信息。在累计投影过程中，界面GUI组件在空间位置上的差异性和相似性被转换为了各累计投影的累计值以及各累计投影的间隙跨度，累计投影间隙跨度是指相邻两累计投影间的间隔。完成累计投影生成后，对界面轮廓层级划分的拟划分点进行生成。在拟划分点生成过程中，首先对累计投影中各投影间隙进行获取并统计各跨度投影间隙数量，依据各跨度投影间隙数量进行升序排序，其中同跨度投影间隙数量越少，排序越靠前，最后选取最靠前的该跨度下的投影间隙作为拟划分点。拟划分点生成方法如图26所示。

对于图27所示图像，将其GUI组件位置信息进行展示如图28，累计投影对图28所示图像进行处理，分别从水平方向上和竖直方向上统计水平各点和竖直各点上白色像素点数量，得到其水平方向累计投影如图29所示，竖直方向累计投影如图30所示。最后生成的拟划分点如图31中(a)和(b)所示。根据拟划分点，可以对区域图像进行界面轮廓层级划分。

进行单次投影划分之后，区域图像信息会被分为若干个区域，这若干个区域有可能可以继续进行单次投影划分。循环投影划分会对区域图像信息不断重复进行多次单次投影划分，直至区域图像无法进行单次投影划分，循环投影划分结束时即完成了界面轮廓层级划分，实现了界面元素间关联关系识别，最终如图4所示，将结果以多层嵌套列表的形式进行表示。

该步骤的处理效果如图32所示。

其中，步骤103之后，还包括：

步骤104：采用组件交互性匹配的方法对界面元素间的关联关系进行修正和补充，得到优化后的界面元素间的关联关系。

在交互性角度，界面GUI组件分为解释式组件和交互式组件；交互式组件包括自匹配模式的交互式组件和外匹配模式的交互式组件。

其中，步骤104组件交互性匹配方法分为组件底层匹配和组件顶层匹配两个步骤。组件底层匹配方法遍历软件界面中各个交互式组件，根据其具有的特性，通过特定的规则将其与相对应的解释式组件进行匹配，以实现对错误关联关系的修正以及关联关系补充。

组件顶层匹配在底层匹配的基础上，遍历底层匹配结果中未被匹配的各个解释式组件(区域功能代表组件)，根据其所在轮廓层级中各个组件的空间位置信息，按照特定规则对其关联关系进行补充。

完成组件交互式匹配之后，对列表形式下关联关系中的各组件所在层级进行调整，将底层匹配中的匹配到的解释式组件放置于其对应交互式组件所在层级，将顶层匹配中的匹配到的解释式组件放置在其对应交互式组件更高一级的层级中，调整结束后，即完成关联关系识别任务。

步骤104具体包括：

遍历所述界面GUI组件信息中所有交互式组件：

对于自匹配模式的交互式组件，根据特征规则，为各自匹配模式的交互式组件匹配解释性组件；所述特征规则包括各交互式组件与对应的解释性组件的位置关系。

对于外匹配模式的交互式组件，将当前交互式组件指定方向上欧氏距离最小的解释式组件作为当前交互式组件的关联组件。

对于没有匹配上交互式组件的解释式组件，若存在在水平方向上和竖直方向上中心点位置均大于当前解释式组件的中心点位置的界面GUI组件，则从水平方向上和竖直方向上中心点位置均大于当前解释式组件的中心点位置的界面GUI组件中，选择欧式距离最小的界面GUI组件作为当前解释式组件的关联组件。

作为具体实施方式，特定规则如表2所示，界面元素中解释式组件有Text和Label两大类，这些组件是交互式组件的解释文本所在。交互式组件包括有Button、EditText、MenuBar等多种组件，对于各个交互式组件，其组件对应的解释式组件的位置情况存在四种可能：交互式组件内部、交互式组件左侧、交互式组件上方、交互式组件右侧。其中解释式组件位于交互式组件内部时，将该情况下解释式组件同交互式组件的匹配称为自匹配，其他情况下的匹配模式称为外匹配。对于内匹配模式，将交互式组件与其内部的解释式组件进行匹配，标记为相关联组件，对于外匹配模式，根据组件类别的不同，将交互式组件与其指定方向上中心点间欧氏距离最小的解释式组件进行匹配，标记为相关联组件。完成底层匹配之后，将标记为相关联组件中的交互式组件和解释式组件放置于同一层级之中。

底层匹配之后，SeckBar、ScrollBar等无法寻找到其解释式组件的交互式组件未进行匹配，同时部分Text和Label类别的解释式组件也不会被匹配到，对于这些组件，将通过顶层匹配进行处理。

表2组件底层匹配方式

组件顶层匹配在底层匹配基础上，对于底层匹配中未被匹配的组件进行处理。对于其中的交互式组件，可以将其视为界面中不存在与之相对应的解释式组件，不进行关联关系修正和补充。对于解释式组件，根据其所在轮廓层级中各个组件的空间位置信息，找出所有在水平方向和竖直方向上中心点所在位置均大于该解释式组件的组件，将这些组件与该解释式组件匹配，该过程如(7)；对某一解释式组件，若不存在能够与之匹配的组件，则计算该轮廓层级中各个组件中心点与该解释式组件中心点位置的欧式距离，计算方法如(8)，选取欧式距离最小的组件，将该解释式组件与之匹配。

完成顶层匹配之后，将顶层匹配中的匹配到的解释式组件放置在其对应交互式组件更高一级的层级中，调整结束后，即完成关联关系识别任务。

对于如图33所示的界面轮廓层级划分结果，其关联关系如图34所示，列表形式表示为：

[[[攻击武器挂点0][挂点1挂点2]][[导弹设置][解锁]][[挂点3挂点4挂点5][挂点6航炮]][[投放方式单投][发射数量1][…]]]。

进行关联关系修正后生成列表形式关联关系表示为：

[[[攻击武器导弹][挂点0挂点1挂点2挂点3挂点4挂点5挂点6航炮]][[设置][解锁]][[投放方式单投][发射数量1][…]]]。

至此完成了软件界面元素关联关系识别。

本发明提出的基于机器视觉的软件界面元素关联关系识别方法，结合目标检测、图像增强、图像掩膜、图像形态学处理等计算机视觉领域常用思想，以软件界面的图像信息为基本输入，先后完成软件界面信息的提取及软件界面元素关联关系识别。本发明提出的方法具有前期处理成本低、运行效率及实时性高、适用性广的特点，在保证一定的软件界面视觉理解的效果下，尽可能的降低了人力和时间成本。

实施例2

本实施例提供的一种基于机器视觉的软件界面元素关联关系识别系统，包括：

界面GUI组件信息提取模块，用于对目标软件界面的图像进行特征提取，得到界面GUI组件信息，所述界面GUI组件信息包括界面GUI组件的位置和界面GUI组件的类别。

轮廓提取模块，用于对目标软件界面的图像进行边缘轮廓提取得到多个轮廓，并确定各轮廓之间的包含关系。

关联关系确定模块，用于基于所述目标软件界面的图像、所述界面GUI组件信息和各轮廓之间的包含关系，采用循环投影划分的方法确定界面元素间的关联关系；所述界面元素包括界面GUI组件。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的系统而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。