显示界面处理方法、装置、电子设备和存储介质与流程

1.本技术涉及计算机技术领域，具体涉及一种显示界面处理方法、装置、电子设备和存储介质。


背景技术：

2.在应用程序(application，app)开发过程中，主要包括两个阶段，一是设计阶段，包括app的ui(user interface，用户界面)设计，二是开发阶段，包括app的ui视觉还原。其中，视觉还原指的是将设计人员设计的ui落实到app的过程。
3.为了使同一设计稿开发的界面在不同设备上都能达到统一的视觉效果，因此，在界面开发过程中，需要将开发人员实现的界面与设计人员设计的界面进行比较，比如，可以通过图层叠加的方式进行视觉还原准确性检测。但现有的视觉还原方案，在检测过程中均为手动操作，人工消耗较大，耗时较长，而且视觉还原时容易因人眼不准带来的还原偏差，准确性差。


技术实现要素：

4.本技术实施例提供一种显示界面处理方法、装置、电子设备和存储介质，可以有效地提高显示界面处理的准确性。
5.本技术实施例提供一种显示界面处理方法，包括：
6.显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；
7.响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；
8.基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
9.相应的，本技术实施例还提供一种显示界面处理装置，包括：
10.显示单元，用于显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；
11.叠加单元，用于响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；
12.检测单元，用于基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
13.可选的，在一些实施例中，所述显示界面的属性信息包括所述显示界面的屏幕分
辨率，所述叠加单元可以包括获取子单元、调整子单元和叠加子单元，如下：
14.所述获取子单元，用于响应于针对所述操作控件的第一操作，获取所述显示界面的屏幕分辨率；
15.所述调整子单元，用于基于所述显示界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到参考图像；
16.所述叠加子单元，用于在所述显示界面上叠加显示所述参考图像。
17.可选的，在一些实施例中，所述调整子单元，具体可以用于基于所述显示界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到调整后设计图；若所述调整后设计图与所述显示界面的边界未完全对齐，则响应于针对所述调整后设计图的拉伸操作，生成拉伸后设计图；当所述拉伸后设计图与所述显示界面的边界完全对齐时，将所述拉伸后设计图作为参考图像；若所述调整后设计图与所述显示界面的边界完全对齐，则将所述调整后设计图作为参考图像。
18.可选的，在一些实施例中，所述拉伸操作包括触控操作和移动操作，所述调整子单元，具体可以用于响应于针对所述调整后设计图的触控操作，获取所述触控操作对应的触控点在所述显示界面的第一坐标值；响应于针对所述调整后设计图的移动操作，获取所述移动操作停止时移动操作对应的移动点在所述显示界面的第二坐标值；基于所述第一坐标值和所述第二坐标值对所述调整后设计图进行拉伸，得到拉伸后设计图。
19.可选的，在一些实施例中，所述检测单元可以包括生成子单元、确定子单元、计算子单元和标记子单元，如下：
20.所述生成子单元，用于根据所述显示界面生成显示图像；
21.所述确定子单元，用于分别确定所述显示元素在所述显示图像和参考图像上的位置，得到所述显示元素的第一位置信息和第二位置信息；
22.所述计算子单元，用于计算所述显示元素的第一位置信息和第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息；
23.所述标记子单元，用于在所述显示界面上对所述位置差异信息进行标记。
24.可选的，在一些实施例中，所述确定子单元，具体可以用于分别识别所述显示元素在所述显示图像中对应的边缘直线组、以及所述显示元素在所述参考图像中对应的边缘直线组，得到第一边缘直线组和第二边缘直线组；分别确定所述第一边缘直线组在所述显示图像中的位置信息、以及述第二边缘直线组在所述参考图像中的位置信息，得到所述第一边缘直线组的第一位置信息和第二边缘直线组的第二位置信息
25.可选的，所述计算子单元，具体可以用于计算所述第一边缘直线组的第一位置信息和所述第二边缘直线组的第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
26.可选的，在一些实施例中，所述确定子单元，具体可以用于分别对所述显示图像和所述参考图像进行边缘检测，得到所述显示图像对应的第一边缘信息、以及所述参考图像对应的第二边缘信息；对所述第一边缘信息进行直线检测，得到至少一个第一边缘直线；基于显示元素预设的边缘直线条件，将每个显示元素对应的第一边缘直线，组成第一边缘直线组，其中，每个第一边缘直线组包括至少一个第一边缘直线；对所述第二边缘信息进行直线检测，得到至少一个第二边缘直线；基于显示元素预设的边缘直线条件，获取所述显示元
素对应的第二边缘直线，组成第二边缘直线组，其中，每个第二边缘直线组包括至少一个第二边缘直线。
27.可选的，在一些实施例中，所述确定子单元，具体可以用于对所述显示图像进行高斯滤波处理，去除所述显示图像的噪声，得到去噪后显示图像；计算所述去噪后显示图像的梯度幅值和梯度方向；基于所述梯度方向对所述梯度幅值进行非极大值抑制，确定所述去噪后显示图像的初始边缘点集；利用双阈值算法对所述初始边缘点集进行检测，根据检测结果确定所述去噪后显示图像的目标边缘点集；基于所述目标边缘点集对所述去噪后显示界面进行边缘连接，确定所述去噪后显示图像对应的第一边缘信息；对所述参考图像进行边缘检测，得到所述参考图像对应的第二边缘信息；对所述第二边缘信息进行直线检测，得到至少一个第二边缘直线；基于显示元素预设的边缘直线条件，获取所述显示元素对应的第二边缘直线，组成第二边缘直线组，并确定所述第二边缘直线组的第二位置信息，其中，每个第二边缘直线组包括至少一个第二边缘直线。
28.可选的，在一些实施例中，所述确定子单元，具体可以用于对所述参考图像进行高斯滤波处理，去除所述参考图像的噪声，得到去噪后参考图像；计算所述去噪后参考图像的梯度幅值和梯度方向；基于所述梯度方向对所述梯度幅值进行非极大值抑制，确定所述去噪后参考图像的初始边缘点集；利用双阈值算法对所述去噪后参考图像的初始边缘点集进行检测，根据检测结果确定所述去噪后参考图像的目标边缘点集；基于所述目标边缘点集对所述去噪后参考图像进行边缘连接，确定所述去噪后参考图像对应的第二边缘信息。
29.可选的，在一些实施例中，所述计算子单元，具体可以用于将所述第一边缘直线组的第一位置信息与对应的第二边缘直线组的第二位置信息进行对比；根据对比结果筛选出与所述第二边缘直线组的第二位置信息不同的第一边缘直线组，得到筛选后边缘直线组；计算所述筛选后边缘直线组的第一位置信息与对应的目标第二边缘直线组的第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
30.可选的，在一些实施例中，所述位置差异信息包括坐标差值，所述标记子单元，具体可以用于根据所述显示界面的屏幕分辨率将所述坐标差值转换为像素密度差值；在显示界面上标记所述筛选后边缘直线组和所述像素密度差值。
31.此外，本技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行本技术实施例提供的任一种显示界面处理方法中的步骤。
32.此外，本技术实施例还提供一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如本技术实施例提供的任一种显示界面处理方法中的步骤。
33.根据本技术的一个方面，提供了一种计算机程序产品或计算机程序，该计算机产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中，计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述背景更新方面的各种可选实现方式中提供的方法。
34.本实施例可以显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；然后，响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述
显示界面的属性信息对目标设计图进行调整后得到的图像；再基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。该方案可以有效地提高显示界面处理的准确性。该方案可应用的领域包括但不限于地图、交通、社交、游戏、新闻、医疗、教育、会议等领域。
附图说明
35.为了更清楚地说明本技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
36.图1a是本技术实施例提供的显示界面处理方法的场景示意图；
37.图1b是本技术实施例提供的显示界面处理方法的第一流程图；
38.图2a是本技术实施例提供的显示界面处理方法的第二流程图；
39.图2b是本技术实施例提供的开启悬浮窗权限的示意图；
40.图2c是本技术实施例提供的开发界面检测方法的整体架构图；
41.图2d是本技术实施例提供的功能操作控件的示意图；
42.图2e是本技术实施例提供的目标设计图的示意图；
43.图2f是本技术实施例提供的参考图像与开发界面叠加的示意图；
44.图2g是本技术实施例提供的显示界面处理方法的第三流程图；
45.图2h是本技术实施例提供的开发界面检测过程的示意图；
46.图3是本技术实施例提供的显示界面处理装置的结构示意图；
47.图4是本技术实施例提供的电子设备的结构示意图。
具体实施方式
48.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
49.本技术的原理是以实施在一适当的运算环境中来举例说明。在以下的说明中，本技术的具体实施例将参考由一部或多部计算机所执行的步骤及符号来说明，除非另有述明。因此，这些步骤及操作将有数次提到由计算机执行，本文所指的计算机执行包括了由代表了以一结构化型式中的数据的电子信号的计算机处理单元的操作。此操作转换该数据或将其维持在该计算机的内存系统中的位置处，其可重新配置或另外以本领域测试人员所熟知的方式来改变该计算机的运作。该数据所维持的数据结构为该内存的实体位置，其具有由该数据格式所定义的特定特性。但是，本技术原理以上述文字来说明，其并不代表为一种限制，本领域测试人员将可了解到以下该的多种步骤及操作亦可实施在硬件当中。
50.本文所使用的术语“单元”可看做为在该运算系统上执行的软件对象。本文该的不同组件、单元、引擎及服务可看做为在该运算系统上的实施对象。而本文该的装置及方法可
以以软件的方式进行实施，当然也可在硬件上进行实施，均在本技术保护范围之内。
51.本技术中的术语“第一”、“第二”和“第三”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是某些实施例还包括没有列出的步骤或单元，或某些实施例还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。
52.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本技术的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
53.本技术实施例提供一种显示界面处理方法、装置、电子设备和存储介质。其中，该显示界面处理装置可以集成在电子设备中，该电子设备可以是服务器，也可以是终端等设备。
54.例如，如图1a所示，首先，该集成了显示界面处理装置的电子设备可以显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；然后，响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；再基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。由于通过该方案对显示界面进行检测，并在所述显示界面上显示检测结果，使得开发人员可以随时在开发时进行高效的视觉还原效果检测，同时避免了视觉还原时因人眼不准带来的还原偏差问题，提高了显示界面处理的准确性，同时因为正常动态适配分辨率，无需开发人员在使用多种电子设备时进行分辨率适配，极大地提高了适配开发效率。
55.以下分别进行详细说明。需说明的是，以下实施例的描述顺序不作为对实施例优选顺序的限定。
56.本实施例将从显示界面处理装置的角度进行描述，该显示界面处理装置具体可以集成在电子设备中，该电子设备可以是服务器，也可以是终端等设备；其中，该终端可以包括手机、平板电脑、车载设备、笔记本电脑、以及个人计算机(personal computer，pc)等设备。
57.在一个或多个实施例中，提供一种显示界面处理方法，包括：显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；然后，响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；再基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。可应用的领域包括但不限于地图、交通、社交、游戏、新闻、医疗、教育、会议等领域。
58.如图1b所示，该显示界面处理方法的具体流程可以如下：
59.101、显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素。
60.其中，目标设计图可以指的是视觉设计师设计的设计图，显示界面可以指的是用于显示开发人员基于目标设计图开发的开发效果界面。显示元素可以指的是开发人员需要根据设计图开发的一系列元素并在显示界面上进行显示的元素，显示元素的表现形式可以有很多种，比如，在显示界面中可以为显示控件、状态栏、滚动条等等一系列元素，在显示图像中可以为显示控件、状态栏、滚动条等对应的一系列图像元素，在参考图像中可以包括显示控件、状态栏、滚动条等对应的一系列图像元素，等等。
61.其中，控件可以有很多种表现形式，比如，可以为图标、输入框、按钮、选择框等等，可以根据需要进行设定。操作控件的显示方式可以有很多种，比如，可以悬浮于所述显示界面上，也可以在电子设备的其他接口处，等等，具体表现形式在此不做限定，能够实现第一操作的控件即可。比如，可以在显示界面上设置的悬浮窗，该悬浮窗可以包括操作控件、隐藏控件等等。悬浮窗可以指的是在显示界面上的表面悬浮一可移动的窗口，以便打开不同应用。其中，操作控件可以用于添加设计图，以使得设计图可以悬浮于显示界面上，从而利于设计图中的显示元素与显示界面中的显示元素进行位置对比，进而查找出位置不要的显示元素，即为视觉还原存在偏差(不准确)的显示元素。
62.例如，具体可以为开发人员在电子设备上基于目标设计图进行显示，并在电子设备上显示显示界面、以及操作控件，所述操作控件可以悬浮于所述显示界面上，所述显示界面可以包括至少一个显示元素。
63.102、响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像。
64.其中，显示界面的属性信息可以指的是显示界面的特征，比如，所述显示界面的属性信息可以包括显示界面的屏幕分辨率、显示界面的尺寸等等。显示界面的屏幕分辨率可以指的是电子设备用于显示显示界面的显示屏幕的屏幕分辨率。显示界面的尺寸可以指的是当电子设备的显示屏幕全屏显示显示界面时，电子设备的显示屏幕的尺寸。
65.例如，具体可以响应于针对所述操作控件的第一操作，获取所述显示界面的屏幕分辨率；基于所述显示界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到参考图像；在所述显示界面上叠加显示所述参考图像。
66.其中，动态适配规则可以指的是根据不同的屏幕尺寸(如显示界面尺寸)进行等比例缩放，比如，对于不同的屏幕宽度，可以使用百分比布局。比如，电子设备响应于用户针对所述操作控件的第一操作，获取目标设计图，然后，根据显示界面的屏幕分辨率对所述目标设计图进行动态调整，使得目标设计图占满电子设备的整个显示屏幕，得到参考图像，并在所述显示界面上叠加显示所述参考图像。
67.可选的，可以在根据动态调整规则对目标设计图进行动态调整后，若调整后设计图与所述显示界面的边界未完全对齐，则可以对调整后设计图进行适应性调整，以使得参考图像与显示界面的边界完全对齐，满足不同屏幕尺寸的需求。例如，步骤“基于所述显示界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到参考图像”，具体可以：
68.基于所述显示界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得
到调整后设计图；若所述调整后设计图与所述显示界面的边界未完全对齐，则响应于针对所述调整后设计图的拉伸操作，生成拉伸后设计图；当所述拉伸后设计图与所述显示界面的边界完全对齐时，将所述拉伸后设计图作为参考图像；若所述调整后设计图与所述显示界面的边界完全对齐，则将所述调整后设计图作为参考图像。通过该方式可以有效地提高显示界面处理的灵活性，增加不同屏幕尺寸的适配性，提高显示界面处理方法的适应性。
69.其中，对所述调整后设计图实现拉伸操作的方式可以有很多种，比如，可以通过记录拉伸前后图像边界的横纵坐标值，并计算拉伸前后的差值，来改变图像的边界位置。例如，所述拉伸操作可以包括两个步骤：触控操作和移动操作，步骤“响应于针对所述调整后设计图的拉伸操作，生成拉伸后设计图”，具体可以：
70.响应于针对所述调整后设计图的触控操作，获取所述触控操作对应的触控点在所述显示界面的第一坐标值；响应于针对所述调整后设计图的移动操作，获取所述移动操作停止时移动操作对应的移动点在所述显示界面的第二坐标值；基于所述第一坐标值和所述第二坐标值对所述调整后设计图进行拉伸，得到拉伸后设计图。
71.比如，添加的目标设计图是以悬浮窗的形式悬浮并叠加在显示界面上时，可以先基于所述显示界面的屏幕分辨率，利用动态适配规则对目标设计图进行动态调整，得到调整后设计图，若所述调整后设计图与所述显示界面的边界未完全对齐，则可以对调整后设计图进行拉伸(即拖拽)。当对调整后设计图进行拉伸时，需要确保电子设备的显示屏幕不能获得按键输入焦点(比如，让显示界面上的显示控件不能获得输入焦点)，不能向悬浮窗发送按键或按钮事件，同时当悬浮窗的窗口可以获得焦点时，仍然将悬浮窗的窗口范围之外的触摸手势发送给后面的窗口处理。其中，获得按键输入焦点可以指的是，常规的键盘输入消息会默认地发送给该组件。对于按钮来说，最直接的就是，当其获得焦点后，按键盘的空格键或回车键就与用鼠标点击了该按钮是相同的效果。
72.例如，在基于windows的系统中，可以通过监听view(视图)的手势回调dispatchtouchevent函数，首先，当手指按下(响应于针对所述调整后设计图的触控操作)时，记录手指按下时在悬浮窗的view上的横坐标的值xinview或纵坐标的值yinview，在电子设备的显示屏幕上的横坐标值xdowninscreen或纵坐标值ydowninscreen，然后，当手指移动(即响应于针对所述调整后设计图的移动操作)时，记录当前手指位置在屏幕上的横坐标值xinscreen或纵坐标的值yinscreen，接着，计算窗口参数的横纵坐标值：
73.windowmanager.layoutparam.x＝xinscreen
‑
xinview；
74.windowmanager.layoutparam.y＝yinscreen
‑
yinview；
75.再然后，通过调用窗口的updateviewlayout方法，传入新的窗口参数windowmanager.layoutparam.x或windowmanager.layoutparam.y，改变窗口位置，以实现对调整后设计图实现拉伸操作。
76.在其他系统，如linux、ios等，采用类似的方式实现。
77.103、基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
78.例如，具体可以根据所述显示界面生成显示图像；分别确定所述显示元素在所述显示图像和参考图像上的位置，得到所述显示元素的第一位置信息和第二位置信息；计算
所述显示元素的第一位置信息和第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息；在所述显示界面上对所述位置差异信息进行标记。通过计算显示元素的第一位置信息和第二位置信息之间差异，并将位置差异信息标记在显示界面上，以使得开发人员可以快速获知存在差异的显示元素，以及具体的位置差异信息，可以使开发人员可以准确快速地知道显示元素的具体偏差值，并对存在偏差的显示元素进行快速修改，提高开发人员的开发效率。
79.比如，可以对显示界面进行截图，得到显示图像，然后分别对显示图像和参考图像进行控件识别，识别出显示图像和参考图像中的控件元素，以及控件元素在所述显示图像和参考图像上的位置，确定控件元素在所述显示图像的第一位置信息和在所述参考图像上的第二位置信息，然后，基于第一位置信息和第二位置信息，对显示图像中的控件元素和参考图像中对应的控件元素进行对比检测，并记录第一位置信息和第二位置信息不同的控件元素，再计算他们之间的差异，将位置差异信息绘制在显示图像上，并在显示界面上显示绘制结果。
80.可选的，可以对显示元素对应的边缘直线进行检测，利用直线计算位置差异值。比如，可以分别对所述显示图像和参考图像进行直线检测，得到第一边缘直线和第二边缘直线，并将满足显示元素预设的边缘直线条件的第一边缘直线添加到显示直线集合中，并确定显示直线集合中的第一边缘直线的第一位置信息，将满足显示元素预设的边缘直线条件的第二边缘直线添加到参考直线集合中，并确定参考直线集合中的第二边缘直线的第二位置信息，然后遍历显示直线集合和参考直线集合中的直线，将第一位置信息和第二位置信息不同的第一边缘直线进行标记，得到标记直线集合，并计算所述标记直线集合中的第一边缘直线与对应的参考直线集合中的第二边缘直线之间的差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息，并将所述位置差异信息标记在所述显示界面上。也可以对所述显示图像进行直线检测，确定所述显示元素在所述显示图像中对应的第一边缘直线组、以及所述第一边缘直线组的第一位置信息，对所述参考图像进行直线检测，确定所述显示元素在所述参考图像中对应的第二边缘直线组，以及所述第二边缘直线组的第二位置信息，然后再计算所述第一边缘直线组的第一位置信息和对应的所述第二边缘直线组的第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息，再将所述位置差异信息标记在所述显示界面上。等等。可以有效地提高显示界面处理的准确性。
81.其中，边缘直线条件的设定方式可以有很多种，比如，可以根据实际应用的需求灵活设置，也可以预先设置好存储在电子设备中。此外，预设条件可以内置于电子设备中，或者，也可以保存在存储器中并发送给电子设备，等等。比如，预设的边缘直线条件可以包括如下一个或多个：两条直线保持平行，两条直线之间有一定的间距(如特定的设定值)，两条直线同为水平或垂直方向，直线的长度不会超过图片宽度或高度的1/2，等等。
82.例如，步骤“分别确定所述显示元素在所述显示图像和参考图像上的位置，得到所述显示元素的第一位置信息和第二位置信息”，具体可以：
83.分别识别所述显示元素在所述显示图像中对应的边缘直线组、以及所述显示元素在所述参考图像中对应的边缘直线组，得到第一边缘直线组和第二边缘直线组；分别确定所述第一边缘直线组在所述显示图像中的位置信息、以及述第二边缘直线组在所述参考图
像中的位置信息，得到所述第一边缘直线组的第一位置信息和第二边缘直线组的第二位置信息；
84.比如，具体可以利用图像识别算法，分别识别所述显示元素在所述显示图像中对应的边缘直线组、以及所述显示元素在所述参考图像中对应的边缘直线组。
85.则步骤“计算所述显示元素的第一位置信息和第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息”，具体可以：计算所述第一边缘直线组的第一位置信息和所述第二边缘直线组的第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
86.可选的，可以先对图像进行边缘检测，再对检测出来的边缘信息进行直线检测，然后再确定每个显示元素对应的边缘直线组，再对边缘直线组进行对比检测。例如，步骤“分别识别所述显示元素在所述显示图像中对应的边缘直线组、以及所述显示元素在所述参考图像中对应的边缘直线组，得到第一边缘直线组和第二边缘直线组”，具体可以：
87.分别对所述显示图像和所述参考图像进行边缘检测，得到所述显示图像对应的第一边缘信息、以及所述参考图像对应的第二边缘信息；对所述第一边缘信息进行直线检测，得到至少一个第一边缘直线；基于显示元素预设的边缘直线条件，将每个显示元素对应的第一边缘直线，组成第一边缘直线组，其中，每个第一边缘直线组包括至少一个第一边缘直线；对所述第二边缘信息进行直线检测，得到至少一个第二边缘直线；基于显示元素预设的边缘直线条件，获取所述显示元素对应的第二边缘直线，组成第二边缘直线组，并确定所述第二边缘直线组的第二位置信息，其中，每个第二边缘直线组包括至少一个第二边缘直线。通过该方式，可以有效地提高显示界面处理的准确性。
88.其中，对图像进行边缘检测的方式可以有很多种，比如，可以先对图像进行滤波去噪，使用一阶有限差分计算梯度得到图像在x和y方向上偏导数的两个矩阵，对非极大值的数据进行抑制，再使用双阈值来对二值化图像进行筛选，通过选取合适的大阈值与小阈值可以得出最为接近图像真实边缘的边缘图像。例如，步骤“分别对所述显示图像和所述参考图像进行边缘检测，得到所述显示图像对应的第一边缘信息、以及所述参考图像对应的第二边缘信息”，具体可以：
89.对所述显示图像进行高斯滤波处理，去除所述显示图像的噪声，得到去噪后显示图像；计算所述去噪后显示图像的梯度幅值和梯度方向；基于所述梯度方向对所述梯度幅值进行非极大值抑制，确定所述去噪后显示图像的初始边缘点集；利用双阈值算法对所述初始边缘点集进行检测，根据检测结果确定所述去噪后显示图像的目标边缘点集；基于所述目标边缘点集对所述去噪后显示界面进行边缘连接，确定所述去噪后显示图像对应的第一边缘信息；
90.对所述参考图像进行高斯滤波处理，去除所述参考图像的噪声，得到去噪后参考图像；计算所述去噪后参考图像的梯度幅值和梯度方向；基于所述梯度方向对所述梯度幅值进行非极大值抑制，确定所述去噪后参考图像的初始边缘点集；利用双阈值算法对所述去噪后参考图像的初始边缘点集进行检测，根据检测结果确定所述去噪后参考图像的目标边缘点集；基于所述目标边缘点集对所述去噪后参考图像进行边缘连接，确定所述去噪后参考图像对应的第二边缘信息。
91.通过该方式，可以提高边缘检测的准确性，使得标识出尽可能多的实际边缘，同时
尽可能的减少噪声产生的误报，降低错误率，且使得标识出的边缘要与图像中的实际边缘尽可能接近，提高定位性，并且图像中的边缘只能标识一次，达到最小响应。
92.可选的，步骤“计算所述第一边缘直线组的第一位置信息和所述第二边缘直线组的第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息”，具体可以：
93.将所述第一边缘直线组的第一位置信息与对应的第二边缘直线组的第二位置信息进行对比；根据对比结果筛选出与所述第二边缘直线组的第二位置信息不同的第一边缘直线组，得到筛选后边缘直线组；计算所述筛选后边缘直线组的第一位置信息与对应的目标第二边缘直线组的第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息。通过该方式，有效地提高了显示界面处理的准确性。
94.其中，目标第二边缘直线组可以指的是与筛选后边缘直线组对应的第二边缘直线组。
95.可选的，可以将有差异的第一边缘直线绘制在显示图像上，并标注清楚差异值。例如，所述位置差异信息包括坐标差值，步骤“在所述显示界面上对所述位置差异信息进行标记”，具体可以：根据所述显示界面的屏幕分辨率将所述坐标差值转换为像素密度差值；在显示界面上标记所述筛选后边缘直线组和所述像素密度差值。通过该方式，可以使检测结果更直观清楚。
96.该方案可应用的领域包括但不限于地图、交通、社交、游戏、新闻、医疗、教育、会议等领域。
97.由上可知，本实施例可以显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；然后，响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；再基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。由于通过该方案对显示界面进行检测，并在所述显示界面上显示检测结果，使得开发人员可以随时在开发时进行高效的视觉还原效果检测，同时避免了视觉还原时因人眼不准带来的还原偏差问题，提高了显示界面处理的准确性，同时因为正常动态适配分辨率，无需开发人员在使用多种电子设备时进行分辨率适配，极大地提高了适配显示效率。
98.根据上一个实施例所描述的方法，以下将举例作进一步详细说明。
99.在本实施例中，将以该显示界面处理装置具体集成在电子设备，显示界面具体为开发界面，显示元素具体为开发元素，操作控件具体为添加控件，第一操作具体为添加操作，显示图像具体为开发图像，显示界面处理方法具体可以为开发界面检测方法，为例进行说明。
100.如图2a所示，一种开发界面检测方法，具体流程可以如下：
101.201、电子设备显示目标设计图对应的开发界面、以及添加控件，所述开发界面包括至少一个开发元素。
102.其中，开发界面可以指的是开发人员基于目标设计图开发的界面。开发元素可以指的是开发人员需要根据设计图开发的一系列元素，开发元素的表现形式可以有很多种，
比如，在开发界面中可以为开发控件、状态栏、滚动条等等一个或多个元素，在开发图像中可以为开发控件、状态栏、滚动条等对应的一个或多个图像元素，在参考图像中可以包括开发控件、状态栏、滚动条等对应的一个或多个图像元素，等等。
103.其中，添加控件的显示方式可以有很多种，比如，可以悬浮于所述开发界面上，也可以在电子设备的其他接口处，等等，具体表现形式在此不做限定，能够实现添加操作的控件即可。比如，可以在开发界面上设置的悬浮窗，该悬浮窗可以包括添加控件、隐藏控件等等。悬浮窗可以指的是在开发界面上的表面悬浮一可移动的窗口，以便打开不同应用。其中，添加控件可以用于添加设计图，以使得设计图可以悬浮于开发界面上，从而利于设计图中的开发元素与开发界面中的开发元素进行位置对比，进而查找出位置不要的开发元素，即为视觉还原存在偏差(不准确)的开发元素。
104.例如，电子设备具体可以安装用于进行开发界面检测的应用程序a，如“pixeye.apk”，启动应用程序a后，可以在电子设备中开启悬浮窗权限，如图2b所示。该应用程序a可以包括主页、悬浮窗权限管理器、只读存储器(read
‑
only memory，rom)读取工具类、授权页面跳转器、悬浮窗控件管理器、悬浮窗参数生成器、视觉设计稿控件、功能操作控件等等模块，比如，如图2c所示，各模块的功能可以如下：
105.(1)主页：app启动主页面；
106.(2)悬浮窗权限管理器：负责判断是否具有悬浮窗权限；
107.(3)rom读取工具类：通过读取电子设备系统的systemproperties属性，判断系统rom版本；
108.(4)授权页面跳转器：通过不同rom版本，跳转到手机悬浮窗权限管理页面；
109.(5)悬浮窗控件管理器：包含悬浮窗参数生成器，功能操作面板控件、视觉设计稿控件
110.(6)悬浮窗参数生成器：通过一系列的参数设置，使悬浮窗可以全屏展示，动态适配屏幕分辨率
111.(7)视觉设计稿控件：悬浮窗中显示的设计稿图片，比如，具体可以显示对目标设计图动态调整后的参考图像；
112.(8)功能操作控件：可以包括显示隐藏pixeye控件，添加设计稿控件(即添加控件)，显示隐藏设计稿控件，设计稿反色处理控件等等。比如，如图2d所示，这四个功能操作控件分别为01显示隐藏pixeye控件，02添加设计稿控件(即添加控件)，03显示隐藏设计稿控件，04设计稿反色处理控件。
113.接着，可以将原始视觉设计稿png或jpg图片(比如，目标设计图)，导入到电子设备指定存储路径下，比如，原始设计稿如图2e所示。
114.例如，具体可以为开发人员在电子设备上基于目标设计图进行开发，得到应用程序b，电子设备上具体可以显示应用程序b的开发界面、以及添加控件，所述添加控件可以悬浮于所述开发界面上，所述开发界面可以包括至少一个开发元素。电子设备可以通过应用悬浮窗特性，将目标设计图悬浮在应用程序b的开发界面上方，并动态适配悬浮窗分辨率，使悬浮窗与开发界面保持同比例，通过拖拽实现悬浮窗与开发界面完全覆盖，然后进行页面截图，生成开发图像和参考图像，再通过边缘检测和霍夫变换直线检测识别出两张图片中所有的控件元素的位置；区别(diff)出两张图像中不同位置的控件元素，绘制输出到原
始设计稿(即目标设计图)上，具体流程可以如图2g所示，具体实现过程可以详见以下步骤。
115.202、电子设备响应于针对所述添加控件的添加操作，在所述开发界面上叠加显示参考图像。
116.例如，电子设备具体可以响应于针对所述添加控件的添加操作，在所述开发界面上叠加显示参考图像使得所述参考图像与所述开发界面的边界对齐，所述参考图像为根据所述开发界面的属性信息对目标设计图进行调整后得到的图像。
117.例如，具体可以通过点击pixeye的添加控件选择导入的目标设计图，与应用程序b的开发界面进行对比。将目标设计图与应用程序b的开发界面进行叠加，进行视觉还原准确性检测结果，叠加结果可以如图2f所示。
118.例如，电子设备具体可以响应于针对所述添加控件的添加操作，获取所述开发界面的屏幕分辨率；基于所述开发界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到参考图像；在所述开发界面上叠加显示所述参考图像。比如，悬浮窗可以动态适配屏幕分辨率，确保悬浮窗占满整个电子设备的屏幕，隐藏所有的装饰边框，例如装饰条、状态栏等。当请求布局时，窗口可能出现在状态栏的上面或下面，从而造成遮挡。电子设备系统提供的窗口管理接口api(application programming interface，应用程序接口)(即操作窗口管理器)用以确保窗口内容不会被装饰条、状态栏盖住。
119.其中，动态适配规则可以指的是根据不同的屏幕尺寸(如开发界面尺寸)进行等比例缩放，比如，对于不同的屏幕宽度，可以使用百分比布局。比如，电子设备响应于用户针对所述添加控件的添加操作，获取目标设计图，然后，根据开发界面的屏幕分辨率对所述目标设计图进行动态调整，使得目标设计图占满电子设备的整个显示屏幕，得到参考图像，并在所述开发界面上叠加显示所述参考图像。
120.可选的，当对目标设计图进行动态调整后，若调整后设计图与所述开发界面的边界未完全对齐，则可以对调整后设计图进行适应性调整，比如，拖拽悬浮窗与开发界面完全压盖，以使得参考图像与开发界面的边界完全对齐，满足不同屏幕尺寸的需求。例如，步骤“基于所述开发界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到参考图像”，具体可以：
121.基于所述开发界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到调整后设计图；若所述调整后设计图与所述开发界面的边界未完全对齐，则响应于针对所述调整后设计图的触控操作，获取所述触控操作对应的触控点在所述开发界面的第一坐标值；响应于针对所述调整后设计图的移动操作，获取所述移动操作停止时移动操作对应的移动点在所述开发界面的第二坐标值；基于所述第一坐标值和所述第二坐标值对所述调整后设计图进行拉伸，得到拉伸后设计图；当所述拉伸后设计图与所述开发界面的边界完全对齐时，将所述拉伸后设计图作为参考图像；若所述调整后设计图与所述开发界面的边界完全对齐，则将所述调整后设计图作为参考图像。通过该方式，可以有效地提高开发界面检测的灵活性，增加不同屏幕尺寸的适配性，提高开发界面检测方法的适应性。
122.比如，添加的目标设计图是以悬浮窗的形式悬浮并叠加在开发界面上时，可以先基于所述开发界面的屏幕分辨率，利用动态适配规则对目标设计图进行动态调整，得到调整后设计图，若所述调整后设计图与所述开发界面的边界未完全对齐，则可以对调整后设计图进行拉伸(即拖拽)。当对调整后设计图进行拉伸时，需要确保电子设备的显示屏幕不
能获得按键输入焦点(比如，让开发界面上的开发控件不能获得输入焦点)，不能向悬浮窗发送按键或按钮事件，同时当悬浮窗的窗口可以获得焦点时，仍然将悬浮窗的窗口范围之外的触摸手势发送给后面的窗口处理。其中，获得按键输入焦点可以指的是，常规的键盘输入消息会默认地发送给该组件。对于按钮来说，最直接的就是，当其获得焦点后，按键盘的空格键或回车键就与用鼠标点击了该按钮是相同的效果。
123.例如，电子设备具体可以监听view(视图)的手势回调dispatchtouchevent函数，首先，当手指按下(响应于针对所述调整后设计图的触控操作)时，记录手指按下时在悬浮窗的view上的横坐标的值xinview或纵坐标的值yinview，在电子设备的显示屏幕上的横坐标值xdowninscreen或纵坐标值ydowninscreen，然后，当手指移动(即响应于针对所述调整后设计图的移动操作)时，记录当前手指位置在屏幕上的横坐标值xinscreen或纵坐标的值yinscreen，接着，计算窗口参数的横纵坐标值：
124.windowmanager.layoutparam.x＝xinscreen
‑
xinview；
125.windowmanager.layoutparam.y＝yinscreen
‑
yinview；
126.再然后，通过调用窗口的updateviewlayout方法，传入新的窗口参数windowmanager.layoutparam.x或windowmanager.layoutparam.y，改变窗口位置，以实现对调整后设计图实现拉伸操作。
127.203、电子设备根据所述开发界面生成开发图像。
128.其中，根据所述开发界面生成开发图像的方式可以有很多种，例如，电子设备具体可以获取开发界面的截图，以得到与开发界面对应的开发图像。
129.204、电子设备利用图像识别算法，识别所述开发元素在所述开发图像中对应的开发边缘直线组，以及所述开发边缘直线组的当前位置信息。
130.例如，电子设备具体可以对所述开发图像(比如图2h(1))进行边缘检测，得到所述开发图像的开发边缘信息，比如可以如图2h(2)所示；对所述开发边缘信息进行直线检测，得到至少一个开发边缘直线，比如可以如图2h(3)所示；基于开发元素预设的边缘直线条件，将每个开发元素对应的开发边缘直线，组成一个开发边缘直线组，并确定所述开发边缘直线组的当前位置信息，其中，每个开发边缘直线组包括至少一个开发边缘直线。
131.其中，边缘直线条件的设定方式可以有很多种，比如，可以根据实际应用的需求灵活设置，也可以预先设置好存储在电子设备中。此外，预设条件可以内置于电子设备中，或者，也可以保存在存储器中并发送给电子设备，等等。比如，预设的边缘直线条件可以包括如下一个或多个：两条直线为平行关系，两条直线之间有一定的间距(如特定的设定值)，两条直线同为水平或垂直方向，直线的长度不会超过图片宽度或高度的1/2，等等。
132.比如，可以先对图像进行滤波去噪，使用一阶有限差分计算梯度得到图像在x和y方向上偏导数的两个矩阵，对非极大值的数据进行抑制，再使用双阈值来对二值化图像进行筛选，通过选取合适的大阈值与小阈值可以得出最为接近图像真实边缘的边缘图像。例如，电子设备具体可以对所述开发图像进行高斯滤波处理，去除所述开发图像的噪声，得到去噪后开发图像；计算所述去噪后开发图像的梯度幅值和梯度方向；基于所述梯度方向对所述梯度幅值进行非极大值抑制，确定所述去噪后开发图像的初始边缘点集；利用双阈值算法对所述初始边缘点集进行检测，根据检测结果确定所述去噪后开发图像的目标边缘点集；基于所述目标边缘点集对所述去噪后开发界面进行边缘连接，确定所述去噪后开发图
像的开发边缘信息。通过该方式，可以有效地提高边缘检测的准确性，使得标识出尽可能多的实际边缘，同时尽可能的减少噪声产生的误报，降低错误率，且使得标识出的边缘要与图像中的实际边缘尽可能接近，提高定位性，并且图像中的边缘只能标识一次，达到最小响应。
133.由于边缘检查的算法主要是基于图像强度的一阶和二阶倒数，但倒数通常对噪声很敏感，因此，可以采用滤波器来改善与噪声有关的边缘检测器的性能，对图像进行高斯模糊处理。接着，使用canny算法进行边缘检测，其中，canny算法主要采用双阈值法减少假边缘数量，即如果某一像素位置的幅值超过高阈值，该像素被保留为边缘像素，如果某一像素位置的幅值小于低阈值，该像素被排除，如果某一像素位置的幅值在两个阈值之间，该像素仅仅在连接到一个高于高阈值的像素时被保留。在边缘检测中，当设置的阈值过高时，可能会漏掉重要信息，阈值过低，则会把枝节信息看得很重要，因此可以采用双阈值法。比如，在检测之前，通过导入地图应用程序所有页面，进行边缘检测准确度识别，最终确认低阈值设置为50，高阈值为200，可以尽可能多的识别出页面的控件元素。在边缘检测之后，可以使用霍夫变换进行直线检测。比如，通过分析地图app页面中所有控件元素的样式及尺寸，确认目标直线特征为两条直线一定平行，两条直线之间有一定的间距，两条直线一定为水平或垂直方向，和直线的长度不会图片宽或高的1/2，等等。因此，边缘直线条件可以设定为两条直线一定平行，两条直线之间有一定的间距，两条直线一定为水平或垂直方向，和直线的长度不会图片宽或高的1/2，等等。以下参考图像的具体识别方式可以与开发图像类似。
134.205、电子设备利用图像识别算法，识别所述开发元素在所述参考图像中对应的参考边缘直线组，以及所述参考边缘直线组的参考位置信息。
135.例如，电子设备具体可以对所述参考图像进行边缘检测，得到所述参考图像对应的参考边缘信息；对所述参考边缘信息进行直线检测，得到至少一个参考边缘直线；基于开发元素预设的边缘直线条件，获取所述开发元素对应的参考边缘直线，组成参考边缘直线组，并确定所述参考边缘直线组的参考位置信息，其中，每个参考边缘直线组包括至少一个参考边缘直线。
136.例如，电子设备对所述参考图像进行边缘检测，具体可以对所述参考图像进行高斯滤波处理，去除所述参考图像的噪声，得到去噪后参考图像；计算所述去噪后参考图像的梯度幅值和梯度方向；基于所述梯度方向对所述梯度幅值进行非极大值抑制，确定所述去噪后参考图像的初始边缘点集；利用双阈值算法对所述去噪后参考图像的初始边缘点集进行检测，根据检测结果确定所述去噪后参考图像的目标边缘点集；基于所述目标边缘点集对所述去噪后参考图像进行边缘连接，确定所述去噪后参考图像对应的参考边缘信息。
137.206、电子设备计算所述开发边缘直线组的当前位置信息和所述参考边缘直线组的参考位置信息之间差异，得到所述开发界面中的开发元素相对于所述参考图像的位置差异信息。
138.例如，电子设备具体可以将所述开发边缘直线组的当前位置信息与对应的参考边缘直线组的参考位置信息进行对比；根据对比结果筛选出与所述参考边缘直线组的参考位置信息不同的开发边缘直线组，得到筛选后边缘直线组；计算所述筛选后边缘直线的当前位置信息与对应的目标参考边缘直线的参考位置信息之间差异，得到所述开发界面中的开发元素相对于所述参考图像的位置差异信息。
139.207、电子设备在所述开发界面上对所述位置差异信息进行标记。
140.可选的，可以将有差异的开发边缘直线绘制在开发图像上，并标注清楚差异值。例如，电子设备具体可以根据所述开发界面的屏幕分辨率将所述坐标差值转换为像素密度差值；在开发界面上标记所述筛选后边缘直线组和所述像素密度差值。比如，在所述开发元素的开发边缘直线组和所述开发元素的参考边缘直线组后，可以将其中坐标值不同的边缘直线(lines)记录，生成difflines(差异直线集)，并将坐标值diff(差)值记录在数组diffsize(坐标差值数组)中，将difflines绘制在开发图像上。并通过屏幕密度分辨率将diffsize中的值转换成dp。为了更清晰明确地体现差异结果，可以当开发图像的控件元素在参考图像的控件元素左侧或者上方，记为符号 ，右侧或下方记为符号
‑
，进而完成标注，比如可以如图2h(4)所示的
‑
2dp、 3dp、 1dp等等，或者其他的标注方式，在此不做限定，可以根据开发人员的需要进行设置。通过该方式可以使检测结果更直观清楚。
141.比如，坐标差值对应的单位是分辨率，然后把坐标差值转换成像素密度，得到开发元素的开发边缘直线与参考边缘直线的像素密度差值，互相之间的具体转换方式的部分代码可以如下：
[0142][0143]
由上可知，本实施例可以显示目标设计图对应的开发界面、以及添加控件，所述开
发界面包括至少一个开发元素；然后，响应于针对所述添加控件的添加操作，在所述开发界面上叠加显示参考图像，使得所述参考图像与所述开发界面的边界对齐，所述参考图像为根据所述开发界面的属性信息对目标设计图进行调整后得到的图像；再基于所述参考图像对所述开发界面中的开发元素的位置进行检测，并在开发界面上显示检测结果，所述检测结果包括所述开发界面中的开发元素相对于所述参考图像的位置差异信息。由于该方案通过使用本方法所开发的pixeye软件，在进行应用程序的界面开发时，将视觉设计师设计的设计稿jpg/png导入到手机后，通过利用电子设备系统的悬浮窗特性，将设计稿图像悬浮在开发的应用程序的开发界面上方，通过悬浮窗动态适配屏幕、和悬浮窗拖拽技术，将设计稿图像分辨率自适应与开发界面保持完全一致，进行图片叠加，并通过图像识别技术，识别出设计稿与开发界面对应的两张图像中控件元素的位置。通过控件元素坐标对比，查找出位置不同的控件元素，即为视觉还原存在偏差(不准确)的控件元素。计算位置不同的控件元素之间的距离，将距离信息转换成屏幕像素信息，即为视觉还原偏差的像素，并用 、
‑
号将偏差像素标记在app页面图片上，从而完成视觉还原准确性检测。由于通过该方案，开发人员可以随时在开发时进行高效的视觉还原效果检测，同时避免了视觉还原时因人眼不准带来的还原偏差问题，提高了开发界面检测的准确性，同时因为正常动态适配分辨率，无需开发人员在使用多种电子设备时进行分辨率适配，极大地提高了适配开发效率。
[0144]
为了更好地实施以上方法，相应的，本技术实施例还提供一种显示界面处理装置，该显示界面处理装置具体可以集成在电子设备中，该电子设备可以是服务器，也可以是终端等设备。
[0145]
例如，如图3所示，该显示界面处理装置可以包括显示单元301、叠加单元302和检测单元303，如下：
[0146]
显示单元301，用于显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；
[0147]
叠加单元302，用于响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；
[0148]
检测单元303，用于基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
[0149]
可选的，在一些实施例中，所述显示界面的属性信息包括所述显示界面的屏幕分辨率，所述叠加单元302可以包括获取子单元、调整子单元和叠加子单元，如下：
[0150]
所述获取子单元，用于响应于针对所述操作控件的第一操作，获取所述显示界面的屏幕分辨率；
[0151]
所述调整子单元，用于基于所述显示界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到参考图像；
[0152]
所述叠加子单元，用于在所述显示界面上叠加显示所述参考图像。
[0153]
可选的，在一些实施例中，所述调整子单元，具体可以用于基于所述显示界面的屏幕分辨率，利用动态适配规则对目标设计图进行调整，得到调整后设计图；若所述调整后设计图与所述显示界面的边界未完全对齐，则响应于针对所述调整后设计图的拉伸操作，生
成拉伸后设计图；当所述拉伸后设计图与所述显示界面的边界完全对齐时，将所述拉伸后设计图作为参考图像；若所述调整后设计图与所述显示界面的边界完全对齐，则将所述调整后设计图作为参考图像。
[0154]
可选的，在一些实施例中，所述拉伸操作包括触控操作和移动操作，所述调整子单元，具体可以用于响应于针对所述调整后设计图的触控操作，获取所述触控操作对应的触控点在所述显示界面的第一坐标值；响应于针对所述调整后设计图的移动操作，获取所述移动操作停止时移动操作对应的移动点在所述显示界面的第二坐标值；基于所述第一坐标值和所述第二坐标值对所述调整后设计图进行拉伸，得到拉伸后设计图。
[0155]
可选的，在一些实施例中，所述检测单元303可以包括生成子单元、确定子单元、计算子单元和标记子单元，如下：
[0156]
所述生成子单元，用于根据所述显示界面生成显示图像；
[0157]
所述确定子单元，用于分别确定所述显示元素在所述显示图像和参考图像上的位置，得到所述显示元素的第一位置信息和第二位置信息；
[0158]
所述计算子单元，用于计算所述显示元素的第一位置信息和第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息；
[0159]
所述标记子单元，用于在所述显示界面上对所述位置差异信息进行标记。
[0160]
可选的，在一些实施例中，所述确定子单元，具体可以用于分别识别所述显示元素在所述显示图像中对应的边缘直线组、以及所述显示元素在所述参考图像中对应的边缘直线组，得到第一边缘直线组和第二边缘直线组；分别确定所述第一边缘直线组在所述显示图像中的位置信息、以及述第二边缘直线组在所述参考图像中的位置信息，得到所述第一边缘直线组的第一位置信息和第二边缘直线组的第二位置信息。
[0161]
可选的，所述计算子单元，具体可以用于计算所述第一边缘直线组的第一位置信息和所述第二边缘直线组的第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
[0162]
可选的，在一些实施例中，所述确定子单元，具体可以用于分别对所述显示图像和所述参考图像进行边缘检测，得到所述显示图像对应的第一边缘信息、以及所述参考图像对应的第二边缘信息；对所述第一边缘信息进行直线检测，得到至少一个第一边缘直线；基于显示元素预设的边缘直线条件，将每个显示元素对应的第一边缘直线，组成第一边缘直线组，其中，每个第一边缘直线组包括至少一个第一边缘直线；对所述第二边缘信息进行直线检测，得到至少一个第二边缘直线；基于显示元素预设的边缘直线条件，获取所述显示元素对应的第二边缘直线，组成第二边缘直线组，其中，每个第二边缘直线组包括至少一个第二边缘直线。
[0163]
可选的，在一些实施例中，所述确定子单元，具体可以用于对所述显示图像进行高斯滤波处理，去除所述显示图像的噪声，得到去噪后显示图像；计算所述去噪后显示图像的梯度幅值和梯度方向；基于所述梯度方向对所述梯度幅值进行非极大值抑制，确定所述去噪后显示图像的初始边缘点集；利用双阈值算法对所述初始边缘点集进行检测，根据检测结果确定所述去噪后显示图像的目标边缘点集；基于所述目标边缘点集对所述去噪后显示界面进行边缘连接，确定所述去噪后显示图像对应的第一边缘信息；对所述参考图像进行边缘检测，得到所述参考图像对应的第二边缘信息；对所述第二边缘信息进行直线检测，得
到至少一个第二边缘直线；基于显示元素预设的边缘直线条件，获取所述显示元素对应的第二边缘直线，组成第二边缘直线组，并确定所述第二边缘直线组的第二位置信息，其中，每个第二边缘直线组包括至少一个第二边缘直线。
[0164]
可选的，在一些实施例中，所述确定子单元，具体可以用于对所述参考图像进行高斯滤波处理，去除所述参考图像的噪声，得到去噪后参考图像；计算所述去噪后参考图像的梯度幅值和梯度方向；基于所述梯度方向对所述梯度幅值进行非极大值抑制，确定所述去噪后参考图像的初始边缘点集；利用双阈值算法对所述去噪后参考图像的初始边缘点集进行检测，根据检测结果确定所述去噪后参考图像的目标边缘点集；基于所述目标边缘点集对所述去噪后参考图像进行边缘连接，确定所述去噪后参考图像对应的第二边缘信息。
[0165]
可选的，在一些实施例中，所述计算子单元，具体可以用于将所述第一边缘直线组的第一位置信息与对应的第二边缘直线组的第二位置信息进行对比；根据对比结果筛选出与所述第二边缘直线组的第二位置信息不同的第一边缘直线组，得到筛选后边缘直线组；计算所述筛选后边缘直线组的第一位置信息与对应的目标第二边缘直线组的第二位置信息之间差异，得到所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
[0166]
可选的，在一些实施例中，所述位置差异信息包括坐标差值，所述标记子单元，具体可以用于根据所述显示界面的屏幕分辨率将所述坐标差值转换为像素密度差值；在显示界面上标记所述筛选后边缘直线组和所述像素密度差值。
[0167]
具体实施时，以上各个单元可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个单元的具体实施可参见前面的方法实施例，在此不再赘述。
[0168]
由上可知，本实施例可以由显示单元301显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；然后，由叠加单元302响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；再由检测单元303基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。由于通过该方案对显示界面进行检测，并在所述显示界面上显示检测结果，使得开发人员可以随时在开发时进行高效的视觉还原效果检测，同时避免了视觉还原时因人眼不准带来的还原偏差问题，提高了显示界面处理的准确性，同时因为正常动态适配分辨率，无需开发人员在使用多种电子设备时进行分辨率适配，极大地提高了适配开发效率。
[0169]
此外，本技术实施例还提供一种电子设备，如图4所示，其示出了本技术实施例所涉及的电子设备的结构示意图，具体来讲：
[0170]
该电子设备可以包括一个或者一个以上处理核心的处理器401、一个或一个以上计算机可读存储介质的存储器402、电源403和输入单元404等部件。本领域技术人员可以理解，图4中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：
[0171]
处理器401是该电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器402内的软件程序和/或模块，以及调用存储在存
储器402内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。可选的，处理器401可包括一个或多个处理核心；优选的，处理器401可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器401中。
[0172]
存储器402可用于存储软件程序以及模块，处理器401通过运行存储在存储器402的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器402可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器402可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器402还可以包括存储器控制器，以提供处理器401对存储器402的访问。
[0173]
电子设备还包括给各个部件供电的电源403，优选的，电源403可以通过电源管理系统与处理器401逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源403还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
[0174]
该电子设备还可包括输入单元404，该输入单元404可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。
[0175]
尽管未示出，电子设备还可以包括显示单元等，在此不再赘述。具体在本实施例中，电子设备中的处理器401会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器402中，并由处理器401来运行存储在存储器402中的应用程序，从而实现各种功能，如下：
[0176]
显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；然后，响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；再基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
[0177]
以上各个操作的具体实施可参见前面的实施例，在此不再赘述。
[0178]
由上可知，本实施例可以显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；然后，响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；再基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。由于通过该方案对显示界面进行检测，并在所述显示界面上显示检测结果，使得开发人员可以随时在开发时进行高效的视觉还原效果检测，同时避免了视觉还原时因人眼不准带来的还原偏差问题，提高了显示界面处理的准确性，同时因为正常动态适配分辨率，无需开发人员在使
用多种电子设备时进行分辨率适配，极大地提高了适配开发效率。
[0179]
本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。
[0180]
为此，本技术实施例还提供一种存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本技术实施例所提供的任一种显示界面处理方法中的步骤。例如，该指令可以执行如下步骤：
[0181]
显示目标设计图对应的显示界面、以及操作控件，所述显示界面包括至少一个显示元素；然后，响应于针对所述操作控件的第一操作，在所述显示界面上叠加显示参考图像，使得所述参考图像与所述显示界面的边界对齐，所述参考图像为根据所述显示界面的属性信息对目标设计图进行调整后得到的图像；再基于所述参考图像对所述显示界面中的显示元素的位置进行检测，并在所述显示界面上显示检测结果，所述检测结果包括所述显示界面中的显示元素相对于所述参考图像的位置差异信息。
[0182]
以上各个操作的具体实施可参见前面的实施例，在此不再赘述。
[0183]
其中，该存储介质可以包括：只读存储器(rom，read only memory)、随机存取记忆体(ram，random access memory)、磁盘或光盘等。
[0184]
由于该存储介质中所存储的指令，可以执行本技术实施例所提供的任一种显示界面处理方法中的步骤，因此，可以实现本技术实施例所提供的任一种显示界面处理方法所能实现的有益效果，详见前面的实施例，在此不再赘述。
[0185]
以上对本技术实施例所提供的一种显示界面处理方法、装置、电子设备和存储介质进行了详细介绍，本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想；同时，对于本领域的技术人员，依据本技术的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本技术的限制。