CN114202603A - 界面图形调整方法、电子设备、存储介质及显示系统 - Google Patents

Abstract

本公开提供了一种界面图形调整方法、电子设备、存储介质及显示系统，涉及数据处理技术领域。其中，该方法包括：确定界面图形的外接矩形选框；确定界面图形的第一操作区和第二操作区；外接矩形选框中相邻的第一、第二选框边均部分位于第一操作区，相邻的第三、第四选框边均部分位于第二操作区，第一、第二操作区在外接矩形选框内存在交叠；接收用户操作；确定用户操作轨迹中的预设点位置；根据该位置与第一、第二操作区之间的位置关系，确定针对界面图形的调整操作并执行。本公开实施例中，界面图形仅对应有两个操作区，通过判断用户操作轨迹中的预设点位置与两个操作区之间的位置关系，即可实现相应的调整操作，运算量较小，复杂度较低。

Description

界面图形调整方法、电子设备、存储介质及显示系统

技术领域

本公开涉及数据处理技术领域，特别是涉及一种界面图形调整方法、电子设备、存储介质及显示系统。

背景技术

软件界面中通常可以插入或创建一些界面图形，例如文本框、图片等，并且可以对这些界面图形进行缩放和平移，从而实现对界面图形的尺寸调整和位置调整。

目前，可以在界面图形的边界及内部设置5个检测区或9个检测区，通常，5个检测区分别是上边界中心附近区域、下边界中心附近区域、左边界中心附近区域、右边界中心附近区域和图形中心区域，9个检测区则是在上述5个检测区的基础上，还包括左上边界交点附近区域、左下边界交点附近区域、右上边界交点附近区域和右下边界交点附近区域。

当需要调整图形时，需要在众多的检测区中均进行用户操作的检测，在边界附近或边界交点附近检测到用户操作，则在边界对应方向上实现图形的缩放。当在中心检测区检测到用户操作时，则实现图形的整体平移。

在上述技术中，需要检测的区域较多，运算量较大，复杂度较高。

发明内容

本公开提供一种界面图形调整方法、电子设备、存储介质及显示系统，以解决现有技术中调整界面图形时，需要检测的区域较多，检测量较大的问题。

为了解决上述问题，本公开公开了一种界面图形调整方法，包括：

对于界面中待调整的界面图形，确定所述界面图形的外接矩形选框；

根据所述外接矩形选框，确定针对所述界面图形的第一操作区和第二操作区；所述外接矩形选框中相邻的第一选框边和第二选框边均部分位于所述第一操作区，相邻的第三选框边和第四选框边均部分位于所述第二操作区，所述第一操作区与所述第二操作区在所述外接矩形选框内存在交叠；

接收针对所述外接矩形选框的用户操作；

确定所述用户操作的操作轨迹中的预设点在所述界面中的位置；

根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作。

可选地，所述根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作，包括：

当所述位置位于所述第一操作区中，且位于所述第二操作区外时，确定针对所述界面图形的调整操作为第一调整操作；

在使所述第三选框边与所述第四选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第一调整操作。

可选地，所述根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作，包括：

当所述位置位于所述第二操作区中，且位于所述第一操作区外时，确定针对所述界面图形的调整操作为第二调整操作；

在使所述第一选框边与所述第二选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第二调整操作。

可选地，所述根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作，包括：

当所述位置位于所述第一操作区中，且位于所述第二操作区中时，确定针对所述界面图形的调整操作为第三调整操作；

沿所述操作轨迹所指示的方向对所述界面图形进行平移，以实现所述第三调整操作。

可选地，所述第一选框边与所述第三选框边相对，所述第二选框边与所述第四选框边相对，所述第三选框边垂直指向所述第一选框边的方向为第一方向，所述第四选框边垂直指向所述第二选框边的方向为第二方向，所述第一选框边垂直指向所述第三选框边的方向为第三方向，所述第二选框边垂直指向所述第四选框边的方向为第四方向；

所述当所述位置位于所述第一操作区中，且位于所述第二操作区外时，确定针对所述界面图形的调整操作为第一调整操作之后，以及所述当所述位置位于所述第二操作区中，且位于所述第一操作区外时，确定针对所述界面图形的调整操作为第二调整操作之后，还包括：

确定所述操作轨迹分别在所述第一方向上的第一位移分量、在所述第二方向上的第二位移分量、在所述第三方向上的第三位移分量，以及在所述第四方向上的第四位移分量。

可选地，所述在使所述第三选框边与所述第四选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第一调整操作，包括：

当所述第一位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第一位移分量为拉伸量，沿所述第一方向对所述界面图形进行拉伸；

当所述第二位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第二位移分量为拉伸量，沿所述第二方向对所述界面图形进行拉伸；

当所述第三位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第三位移分量为压缩量，沿所述第三方向对所述界面图形进行压缩；

当所述第四位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第四位移分量为压缩量，沿所述第四方向对所述界面图形进行压缩。

可选地，所述在使所述第一选框边与所述第二选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第二调整操作，包括：

当所述第一位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第一位移分量为压缩量，沿所述第一方向对所述界面图形进行压缩；

当所述第二位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第二位移分量为压缩量，沿所述第二方向对所述界面图形进行压缩；

当所述第三位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第三位移分量为拉伸量，沿所述第三方向对所述界面图形进行拉伸；

当所述第四位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第四位移分量为拉伸量，沿所述第四方向对所述界面图形进行拉伸。

可选地，所述沿所述操作轨迹所指示的方向对所述界面图形进行平移，以实现所述第三调整操作，包括：

以所述操作轨迹在所述界面中的位移量为平移量，沿所述操作轨迹所指示的方向对所述界面图形进行平移。

可选地，所述根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作之后，还包括：

将包括调整后的界面图形的界面所对应的显示数据发送至目标显示装置，以使所述目标显示装置显示所述包括调整后的界面图形的界面。

可选地，所述第一操作区和所述第二操作区均与所述外接矩形选框形状相同，所述第一操作区和所述第二操作区均与所述外接矩形选框尺寸相同。

可选地，所述第一操作区的几何中心与所述外接矩形选框的几何中心之间的距离为像素级，所述第二操作区的几何中心与所述外接矩形选框的几何中心之间的距离为像素级。

可选地，所述用户操作包括鼠标划动操作和触屏划动操作中的至少一种，所述预设点为所述用户操作的操作轨迹中的起点。

为了解决上述问题，本公开还公开了一种电子设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序，所述程序被所述处理器执行时实现如上所述的界面图形调整方法的步骤

为了解决上述问题，本公开还公开了一种计算机非瞬态可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如上所述的界面图形调整方法。

为了解决上述问题，本公开还公开了一种显示系统，包括如上所述的电子设备，以及至少一个显示装置，所述显示装置与所述电子设备通信连接，所述电子设备还配置为将包括调整后的所述界面图形的界面所对应的显示数据发送至各个所述显示装置，所述显示装置配置为接收所述包括调整后的所述界面图形的界面，并进行显示。

与现有技术相比，本公开包括以下优点：

在本公开实施例中，对于界面中待调整的界面图形，可以根据该界面图形的外接矩形选框，确定针对该界面图形的第一操作区和第二操作区，然后在接收到针对外接矩形选框的用户操作时，确定用户操作轨迹中的预设点在界面中的位置，进而通过判断该预设点的位置与两个操作区之间的位置关系，即可确定需要对界面图形进行何种类型的调整操作，并对界面图形执行相应的调整操作。在本公开实施例中，界面图形仅对应有两个操作区，通过判断用户操作轨迹中的预设点位置与两个操作区之间的位置关系，即可实现相应的调整操作，运算量较小，复杂度较低。

附图说明

图1示出了本公开实施例的一种界面图形调整方法的步骤流程图；

图2示出了本公开实施例的一种界面图形及其外接矩形选框的示意图；

图3示出了本公开实施例的一种第一操作区和第二操作区的示意图；

图4示出了本公开实施例的另一种第一操作区和第二操作区的示意图；

图5示出了本公开实施例的一种界面图形调整方法的子步骤流程图；

图6示出了本公开实施例的一种界面图形调整方法的子步骤流程图；

图7示出了本公开实施例的一种界面图形调整装置的结构框图；

图8示出了本公开实施例的一种显示系统的结构框图。

具体实施方式

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

本公开的实施方式部分使用的术语仅用于对本公开的实施例进行解释，而非旨在限定本公开。除非另作定义，本公开的实施方式使用的技术术语或者科学术语应当为本公开所属领域内具有一般技能的人士所理解的通常意义。本公开专利申请说明书以及权利要求书中使用的“第一”、“第二”、“第三”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。同样，“一个”或者“一”等类似词语也不表示数量限制，而是表示存在至少一个。“包括”或者“包含”等类似的词语意指出现在“包括”或者“包含”前面的元件或者物件涵盖出现在“包括”或者“包含”后面列举的元件或者物件及其等同，并不排除其他元件或者物件。“上”、“下”、“左”、“右”等仅用于表示相对位置关系，当被描述对象的绝对位置改变后，则所述相对位置关系也可能相应地改变。在本公开实施例中提及的“和/或”，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

参照图1，示出了本公开实施例的一种界面图形调整方法的步骤流程图，该方法包括以下步骤：

步骤101：对于界面中待调整的界面图形，确定界面图形的外接矩形选框。

在本公开实施例中，可以对软件界面中所插入或创建的任意一个界面图形，例如文本框、图片等，进行尺寸和/或位置的调整。在实际应用中，在一种可选的实施方式中，可以将用户点击的界面图形确定为当前待调整的界面图形，在另一种可选的实施方式中，还可以将界面中最新插入或创建的界面图形确定为当前待调整的界面图形。在具体应用时，可以以用户的选择为优先，也即当用户选择的界面图形不是最新插入或创建的界面图形时，优先将用户所选择的界面图形确定为当前待调整的界面图形。

对于待调整的界面图形，可以确定该界面图形的外接矩形选框，如图2所示，该界面图形a包含在对应的外接矩形选框A之中，如此，可以通过对外接矩形选框的位置、形状及尺寸的控制，调整外接矩形选框中的界面图形的位置、形状及尺寸。

在实际应用时，外接矩形选框可以显示给用户，便于用户明确外接矩形选框的各选框边，从而方便用户对外接矩形选框进行操作。

步骤102：根据外接矩形选框，确定针对该界面图形的第一操作区和第二操作区；外接矩形选框中相邻的第一选框边和第二选框边均部分位于第一操作区，相邻的第三选框边和第四选框边均部分位于第二操作区，第一操作区与第二操作区在外接矩形选框内存在交叠。

在本步骤中，可以根据外接矩形选框的各选框边的位置和尺寸，建立针对该界面图形的第一操作区和第二操作区，第一操作区位于外接矩形选框中的第一选框边和第二选框边的附近，第二操作区位于外接矩形选框中的第三选框边和第四选框边的附近，符合用户调整图形时靠近边界操作的习惯。其中，第一操作区与第二操作区存在交叠，且交叠部分至少部分位于外接矩形选框内。

可选地，第一操作区和第二操作区可以均与外接矩形选框形状相同，第一操作区和第二操作区均与外接矩形选框尺寸相同，也即第一操作区和第二操作区均可以是与外接矩形选框尺寸相同的矩形区域。

首先，矩形的操作区可以通过较少的坐标点(4个顶角的坐标)定义出所涵盖的操作区范围，在确定某个位置是否位于该操作区时，通过较少的计算量即可确定出。

其次，矩形的操作区还可以与界面图形的外接矩形选框尺寸相同，如此，确定操作区的4个顶点坐标时，可在外接矩形选框的4个顶点坐标的基础上，直接加/减一定的数值即可，方便快捷。

还可选地，第一操作区的几何中心与外接矩形选框的几何中心之间的距离为像素级，第二操作区的几何中心与外接矩形选框的几何中心之间的距离为像素级。

在本公开实施例中，第一操作区的几何中心与外接矩形选框的几何中心之间的距离为几到十几个像素，第二操作区的几何中心与外接矩形选框的几何中心之间的距离为几到十几个像素，也即第一操作区和第二操作区超出外接矩形选框的部分很少。在一些实施例中，第一操作区的几何中心与外接矩形选框的几何中心之间的距离可以为5个像素，第二操作区的几何中心与外接矩形选框的几何中心之间的距离可以为5个像素。

当存在其他界面图形b(图示中未示出)比较靠近界面图形a的外接矩形选框A时，若第一操作区和第二操作区超出外接矩形选框的部分很多，则用户在界面图形a的第一操作区和/或第二操作区中进行操作时，就容易出现误操作而选中较近的界面图形b。而在本公开实施例中，第一操作区和第二操作区超出外接矩形选框的部分很少，因此，用户在界面图形a的第一操作区和/或第二操作区中进行操作时，就不易出现误操作。

参照图3和图4，界面图形a的外接矩形选框A包括第一选框边L1、第二选框边L2、第三选框边L3和第四选框边L4。

参照图3，当相邻的第一选框边L1和第二选框边L2分别为外接矩形选框A的左边框和上边框(或者上边框和左边框)、第三选框边L3和第四选框边L4分别为外接矩形选框A的右边框和下边框(或者下边框和右边框)时，第一操作区H1则位于外接矩形选框A靠左上方的区域，第二操作区H2则位于外接矩形选框A靠右下方的区域。

参照图4，当相邻的第一选框边L1和第二选框边L2分别为外接矩形选框A的右边框和上边框(或者上边框和右边框)、第三选框边L3和第四选框边L4分别为外接矩形选框A的左边框和下边框(或者下边框和左边框)时，第一操作区H1则位于外接矩形选框A靠右上方的区域，第二操作区H2则位于外接矩形选框A靠左下方的区域。

可以理解的是，各选框边仅通过第一、第二等词区分为不同的选框边，第一、第二等词并不限定各选框边的具体位置，同样地，各操作区也通过第一、第二等词区分为不同的操作区，随着各选框边具体位置的不同，各操作区的位置也会有所不同。但总的来说，在本公开实施例中，两个操作区(不区分第一操作区和第二操作区)只会存在两种位置关系，一种是如图3所示，两个操作区大致沿外接矩形选框的左上方到右下方的对角线排布，另一种是如图4所示，两个操作区大致沿外接矩形选框的右上方到左下方的对角线排布。因此，后续为了方便说明，在下文中，将位置靠上的操作区称为第一操作区，将位置靠下的操作区称为第二操作区。

步骤103：接收针对外接矩形选框的用户操作。

在本步骤中，用户可以对想要调整的界面图形对应的外接矩形选框进行操作，电子设备可以从该用户操作中获得对该界面图形的调整参数，如拉伸/压缩的方向、拉伸/压缩量等。

步骤104：确定用户操作的操作轨迹中的预设点在界面中的位置。

在本公开实施例中，用户操作可以形成一个操作轨迹，电子设备可以确定该操作轨迹中的预设点在界面中的位置，也即确定该预设点在界面中的坐标。

可选地，用户操作可以包括鼠标划动操作和触屏划动操作中的至少一种，预设点为用户操作的操作轨迹中的起点。

其中，触屏划动操作可以通过手指、电子笔等可被触控屏幕检测到划动操作的物体实现。

步骤105：根据该位置与第一操作区和第二操作区之间的位置关系，确定针对该界面图形的调整操作，并对该界面图形执行调整操作。

在本步骤中，可以根据用户操作轨迹中的预设点位置与第一操作区和第二操作区之间的位置关系，确定针对界面图形需要进行哪种类型的调整操作，进而对该界面图形执行相应类型的调整操作即可。

在本公开实施例中，界面图形仅对应有两个操作区，通过判断用户操作轨迹中的预设点位置与两个操作区之间的位置关系，即可实现相应的调整操作，相较于现有技术中需检测5个检测区或9个检测区的方式，减小了运算量，降低了复杂度。

可选地，调整操作可以包括对界面图形的形状和/或尺寸的调整操作，以及对界面图形的位置的调整操作。具体地，对界面图形的形状和/或尺寸的调整，可以通过对该界面图形沿至少一个方向进行拉伸或压缩实现；对界面图形的位置的调整，可以通过对该界面图形的平移实现。

其中，调整界面图形的形状和/或尺寸时，可以选择界面图形中的某个点作为定点，在调整形状和/或尺寸时，该定点的位置可以固定不变。

在本公开实施例中，根据所选择的定点的不同，可以分为第一调整操作和第二调整操作。其中，第一调整操作以第三选框边与第四选框边的交点为定点，第二调整操作以第一选框边与第二选框边的交点为定点。

对于第一调整操作，步骤105具体可以包括以下子步骤：

S1：当该位置位于第一操作区中，且位于第二操作区外时，确定针对界面图形的调整操作为第一调整操作；

S2：在使第三选框边与第四选框边的交点位置不变的情况下，沿操作轨迹所指示的方向对界面图形进行形状调整和尺寸调整中至少一种，以实现第一调整操作。

其中，参照图3和图4，斜线图案区P也即第一操作区H1中与第二操作区H2不存在交叠的区域，当用户操作轨迹中的预设点位置位于第一操作区H1中，且位于第二操作区H2外时，也即该预设点位置位于图示中的斜线图案区P中时，可以确定需要对界面图形执行第一调整操作，第一调整操作也即以第三选框边与第四选框边的交点为定点，在使第三选框边与第四选框边的交点位置不变的情况下，沿用户操作轨迹所指示的方向调整界面图形的形状和/或尺寸。

对于第二调整操作，步骤105具体可以包括以下子步骤：

S3：当该位置位于第二操作区中，且位于第一操作区外时，确定针对界面图形的调整操作为第二调整操作；

S4：在使第一选框边与第二选框边的交点位置不变的情况下，沿操作轨迹所指示的方向对界面图形进行形状调整和尺寸调整中至少一种，以实现第二调整操作。

其中，参照图3和图4，点状图案区Q也即第二操作区H2中与第一操作区H1不存在交叠的区域，当用户操作轨迹中的预设点位置位于第二操作区H2中，且位于第一操作区H1外时，也即该预设点位置位于图示中的点状图案区Q中时，可以确定需要对界面图形执行第二调整操作，第二调整操作也即以第一选框边与第二选框边的交点为定点，在使第一选框边与第二选框边的交点位置不变的情况下，沿用户操作轨迹所指示的方向调整界面图形的形状和/或尺寸。

可选地，参照图3和图4，第一选框边L1与第三选框边L3相对，第二选框边L2与第四选框边L4相对，第三选框边L3垂直指向第一选框边L1的方向为第一方向D1，第四选框L4边垂直指向第二选框边L2的方向为第二方向D2，第一选框边L1垂直指向第三选框边L3的方向为第三方向D3，第二选框边L2垂直指向第四选框边L4的方向为第四方向D4。

参照图5和图6，S1之后，以及S3之后，还包括以下步骤：

S5：确定操作轨迹分别在第一方向D1上的第一位移分量、在第二方向D2上的第二位移分量、在第三方向D3上的第三位移分量，以及在第四方向D4上的第四位移分量。

其中，可以将操作轨迹的位移量分解为沿上、下、左、右四个方向的位移分量，进而可以根据每个方向的位移分量，确定需要对界面图形在某个方向上进行拉伸还是压缩以及拉伸或压缩的量是多少。

相应地，S2具体包括：

当第一位移分量大于0时，在使第三选框边与第四选框边的交点位置不变的情况下，以第一位移分量为拉伸量，沿第一方向对界面图形进行拉伸；

当第二位移分量大于0时，在使第三选框边与第四选框边的交点位置不变的情况下，以第二位移分量为拉伸量，沿第二方向对界面图形进行拉伸；

当第三位移分量大于0(也即第一位移分量小于0)时，在使第三选框边与第四选框边的交点位置不变的情况下，以第三位移分量为压缩量，沿第三方向对界面图形进行压缩；

当第四位移分量大于0(也即第二位移分量小于0)时，在使第三选框边与第四选框边的交点位置不变的情况下，以第四位移分量为压缩量，沿第四方向对界面图形进行压缩。

相应地，S4具体包括：

当第一位移分量大于0(也即第三位移分量小于0)时，在使第一选框边与第二选框边的交点位置不变的情况下，以第一位移分量为压缩量，沿第一方向对界面图形进行压缩；

当第二位移分量大于0(也即第四位移分量小于0)时，在使第一选框边与第二选框边的交点位置不变的情况下，以第二位移分量为压缩量，沿第二方向对界面图形进行压缩；

当第三位移分量大于0时，在使第一选框边与第二选框边的交点位置不变的情况下，以第三位移分量为拉伸量，沿第三方向对界面图形进行拉伸；

当第四位移分量大于0时，在使第一选框边与第二选框边的交点位置不变的情况下，以第四位移分量为拉伸量，沿第四方向对界面图形进行拉伸。

其中，由于第一方向与第三方向相反，因此第一位移分量与第三位移分量不会同时大于0。当操作轨迹在第一方向上的第一位移分量大于0时，该操作轨迹沿第三方向上的第三位移分量小于0；当操作轨迹在第三方向上的第三位移分量大于0时，该操作轨迹沿第一方向上的第一位移分量小于0。

同样地，由于第二方向与第四方向相反，因此，第二位移分量与第四位移分量不会同时大于0。当操作轨迹在第二方向上的第二位移分量大于0时，该操作轨迹沿第四方向上的第四位移分量小于0；当操作轨迹在第四方向上的第四位移分量大于0时，该操作轨迹沿第二方向上的第二位移分量小于0。

在具体应用中，当在两个相互垂直的方向上对界面图形均进行了拉伸或压缩之后，若外接矩形选框拉伸/压缩后的长宽比与拉伸/压缩前的长宽比相等，则界面图形的尺寸被调整，而界面图形的形状无变化，若外接矩形选框拉伸/压缩后的长宽比与拉伸/压缩前的长宽比不相等，则界面图形的尺寸和形状均被调整。

对于用于调整界面图形位置的第三调整操作，步骤105具体可以包括以下子步骤：

S6：当该位置位于第一操作区中，且位于第二操作区中时，确定针对界面图形的调整操作为第三调整操作；

S7：沿操作轨迹所指示的方向对界面图形进行平移，以实现第三调整操作。

其中，参照图3和图4，当用户操作轨迹中的预设点位置位于第一操作区H1和第二操作区H2的交叠区中时，可以确定需要对界面图形执行第三调整操作，第三调整操作也即沿用户操作轨迹所指示的方向对界面图形进行平移，以调整界面图形的位置。

S7具体可以包括：以操作轨迹在界面中的位移量为平移量，沿操作轨迹所指示的方向对界面图形进行平移。

其中，操作轨迹在界面中的位移量也即操作轨迹的终点到起点之间的位移量，电子设备以该位移量为平移量，沿操作轨迹所指示的方向对界面图形进行平移，以调整界面图形的位置，而不改变界面图形的形状和尺寸。

此外，当该位置不位于第一操作区中，且不位于第二操作区中时，则可以对界面图形不进行任何操作。

可选地，实现该界面图形调整方法的电子设备还可以与其他显示装置通信连接，需要说明的是，该显示装置并非电子设备本身包含的显示屏。在实际应用中，该电子设备可以主设备，其他至少一个显示装置可以作为从设备，在该电子设备上绘制好的界面可以通过各个显示装置进行显示，作为从设备的显示装置例如可以是电子标签、电子胸牌等。

相应地，在步骤105之后，该方法还可以包括以下步骤：

将包括调整后的界面图形的界面所对应的显示数据发送至目标显示装置，以使目标显示装置显示包括调整后的界面图形的界面。

其中，目标显示装置也即该电子设备连接的任意一个从设备，作为主设备的电子设备可以将包括调整后的界面图形的界面所对应的显示数据发送至目标显示装置，目标显示装置进而可以对该界面进行显示。

在本公开实施例中，对于界面中待调整的界面图形，可以根据该界面图形的外接矩形选框，确定针对该界面图形的第一操作区和第二操作区，然后在接收到针对外接矩形选框的用户操作时，确定用户操作轨迹中的预设点在界面中的位置，进而通过判断该预设点的位置与两个操作区之间的位置关系，即可确定需要对界面图形进行何种类型的调整操作，并对界面图形执行相应的调整操作。在本公开实施例中，界面图形仅对应有两个操作区，通过判断用户操作轨迹中的预设点位置与两个操作区之间的位置关系，即可实现相应的调整操作，运算量较小，复杂度较低。

参照图7，示出了本公开实施例的一种界面图形调整装置的结构框图，该装置700包括：

第一确定模块701，用于对于界面中待调整的界面图形，确定所述界面图形的外接矩形选框；

第二确定模块702，用于根据所述外接矩形选框，确定针对所述界面图形的第一操作区和第二操作区；所述外接矩形选框中相邻的第一选框边和第二选框边均部分位于所述第一操作区，相邻的第三选框边和第四选框边均部分位于所述第二操作区，所述第一操作区与所述第二操作区在所述外接矩形选框内存在交叠；

接收模块703，用于接收针对所述外接矩形选框的用户操作；

第三确定模块704，用于确定所述用户操作的操作轨迹中的预设点在所述界面中的位置；

调整模块705，用于根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作。

可选地，所述调整模块705包括：

第一确定子模块，用于当所述位置位于所述第一操作区中，且位于所述第二操作区外时，确定针对所述界面图形的调整操作为第一调整操作；

第一调整子模块，用于在使所述第三选框边与所述第四选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第一调整操作。

可选地，所述调整模块705包括：

第二确定子模块，用于当所述位置位于所述第二操作区中，且位于所述第一操作区外时，确定针对所述界面图形的调整操作为第二调整操作；

第二调整子模块，用于在使所述第一选框边与所述第二选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第二调整操作。

可选地，所述调整模块705包括：

第三确定子模块，用于当所述位置位于所述第一操作区中，且位于所述第二操作区中时，确定针对所述界面图形的调整操作为第三调整操作；

第三调整子模块，用于沿所述操作轨迹所指示的方向对所述界面图形进行平移，以实现所述第三调整操作。

可选地，所述第一选框边与所述第三选框边相对，所述第二选框边与所述第四选框边相对，所述第三选框边垂直指向所述第一选框边的方向为第一方向，所述第四选框边垂直指向所述第二选框边的方向为第二方向，所述第一选框边垂直指向所述第三选框边的方向为第三方向，所述第二选框边垂直指向所述第四选框边的方向为第四方向；

所述调整模块705还包括：

第四确定子模块，用于确定所述操作轨迹分别在所述第一方向上的第一位移分量、在所述第二方向上的第二位移分量、在所述第三方向上的第三位移分量，以及在所述第四方向上的第四位移分量。

可选地，所述第一调整子模块具体用于：

当所述第一位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第一位移分量为拉伸量，沿所述第一方向对所述界面图形进行拉伸；

当所述第二位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第二位移分量为拉伸量，沿所述第二方向对所述界面图形进行拉伸；

当所述第三位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第三位移分量为拉伸量，沿所述第三方向对所述界面图形进行压缩；

当所述第四位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第四位移分量为拉伸量，沿所述第四方向对所述界面图形进行压缩。

可选地，所述第二调整子模块具体用于：

当所述第一位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第一位移分量为拉伸量，沿所述第一方向对所述界面图形进行压缩；

当所述第二位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第二位移分量为拉伸量，沿所述第二方向对所述界面图形进行压缩；

当所述第三位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第三位移分量为拉伸量，沿所述第三方向对所述界面图形进行拉伸；

当所述第四位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第四位移分量为拉伸量，沿所述第四方向对所述界面图形进行拉伸。

可选地，所述第三调整子模块具体用于：

以所述操作轨迹在所述界面中的位移量为平移量，沿所述操作轨迹所指示的方向对所述界面图形进行平移。

可选地，所述装置700还包括：

发送模块，用于将包括调整后的界面图形的界面所对应的显示数据发送至目标显示装置，以使所述目标显示装置显示所述包括调整后的界面图形的界面。

可选地，所述第一操作区和所述第二操作区均与所述外接矩形选框形状相同，所述第一操作区和所述第二操作区均与所述外接矩形选框尺寸相同。

可选地，所述第一操作区的几何中心与所述外接矩形选框的几何中心之间的距离为像素级，所述第二操作区的几何中心与所述外接矩形选框的几何中心之间的距离为像素级。

可选地，所述用户操作包括鼠标划动操作和触屏划动操作中的至少一种，所述预设点为所述用户操作的操作轨迹中的起点。

在本公开实施例中，对于界面中待调整的界面图形，可以根据该界面图形的外接矩形选框，确定针对该界面图形的第一操作区和第二操作区，然后在接收到针对外接矩形选框的用户操作时，确定用户操作轨迹中的预设点在界面中的位置，进而通过判断该预设点的位置与两个操作区之间的位置关系，即可确定需要对界面图形进行何种类型的调整操作，并对界面图形执行相应的调整操作。在本公开实施例中，界面图形仅对应有两个操作区，通过判断用户操作轨迹中的预设点位置与两个操作区之间的位置关系，即可实现相应的调整操作，运算量较小，复杂度较低。

对于上述装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开实施例还公开了一种电子设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序，所述程序被所述处理器执行时实现如上所述的界面图形调整方法的步骤。

本公开实施例还公开了一种计算机非瞬态可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如上所述的界面图形调整方法。

参照图8，本公开实施例还公开了一种显示系统1000，包括如上所述的电子设备100，以及至少一个显示装置200，所述显示装置200与所述电子设备通信连接，所述电子设备100还配置为将包括调整后的所述界面图形的界面所对应的显示数据发送至各个所述显示装置200，所述显示装置200配置为接收所述包括调整后的所述界面图形的界面，并进行显示。

以下针对上述系统1000，示例性地介绍一些具体应用场景，可以理解的是，该方法和系统的应用场景包括但不限于以下应用场景。

场景1：显示装置200具体为电子胸牌，例如参加奥运会的运动员、教练员、志愿者等人员的电子胸牌。例如，当电子胸牌上的奥运会标志需要调整尺寸和位置时，可以通过上述界面图形调整方法，对胸牌界面上的奥运会标志图片进行尺寸和位置的调整，然后将调整后的界面所对应的显示数据同步至各个电子胸牌，每个电子胸牌即可显示奥运会标志调整后的界面。

场景2：显示装置200具体为电子货架上的显示屏，用于显示一些优惠信息、产品宣传图片等。例如，当电子货架显示屏上的产品宣传图片需要突出产地时，可以通过上述界面图形调整方法，对产品宣传界面上的产地文本框进行尺寸放大，然后将调整后的界面所对应的显示数据同步至各个电子货架显示屏，每个电子货架显示屏即可显示产地信息放大后的界面。

场景3：显示装置200具体为货物的电子标签，用于显示货物的编号、条形码、价格等。例如，当电子标签上的条形码需要调整位置时，可以通过上述界面图形调整方法，对标签界面上的条形码图片进行位置的调整，然后将调整后的界面所对应的显示数据同步至各个电子标签，每个电子标签即可显示条形码位置调整后的界面。

对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本公开并不受所描述的动作顺序的限制，因为依据本公开，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本公开所必须的。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上对本公开所提供的一种界面图形调整方法、电子设备、存储介质及显示系统，进行了详细介绍，本文中应用了具体个例对本公开的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本公开的方法及其核心思想；同时，对于本领域的一般技术人员，依据本公开的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本公开的限制。

Claims (15)

1.一种界面图形调整方法，其特征在于，所述方法包括：

对于界面中待调整的界面图形，确定所述界面图形的外接矩形选框；

根据所述外接矩形选框，确定针对所述界面图形的第一操作区和第二操作区；所述外接矩形选框中相邻的第一选框边和第二选框边均部分位于所述第一操作区，相邻的第三选框边和第四选框边均部分位于所述第二操作区，所述第一操作区与所述第二操作区在所述外接矩形选框内存在交叠；

接收针对所述外接矩形选框的用户操作；

确定所述用户操作的操作轨迹中的预设点在所述界面中的位置；

根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作。

2.根据权利要求1所述的方法，其特征在于，所述根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作，包括：

当所述位置位于所述第一操作区中，且位于所述第二操作区外时，确定针对所述界面图形的调整操作为第一调整操作；

在使所述第三选框边与所述第四选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第一调整操作。

3.根据权利要求1所述的方法，其特征在于，所述根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作，包括：

当所述位置位于所述第二操作区中，且位于所述第一操作区外时，确定针对所述界面图形的调整操作为第二调整操作；

在使所述第一选框边与所述第二选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第二调整操作。

4.根据权利要求1所述的方法，其特征在于，所述根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作，包括：

当所述位置位于所述第一操作区中，且位于所述第二操作区中时，确定针对所述界面图形的调整操作为第三调整操作；

沿所述操作轨迹所指示的方向对所述界面图形进行平移，以实现所述第三调整操作。

5.根据权利要求2或3所述的方法，其特征在于，所述第一选框边与所述第三选框边相对，所述第二选框边与所述第四选框边相对，所述第三选框边垂直指向所述第一选框边的方向为第一方向，所述第四选框边垂直指向所述第二选框边的方向为第二方向，所述第一选框边垂直指向所述第三选框边的方向为第三方向，所述第二选框边垂直指向所述第四选框边的方向为第四方向；

所述当所述位置位于所述第一操作区中，且位于所述第二操作区外时，确定针对所述界面图形的调整操作为第一调整操作之后，以及所述当所述位置位于所述第二操作区中，且位于所述第一操作区外时，确定针对所述界面图形的调整操作为第二调整操作之后，还包括：

确定所述操作轨迹分别在所述第一方向上的第一位移分量、在所述第二方向上的第二位移分量、在所述第三方向上的第三位移分量，以及在所述第四方向上的第四位移分量。

6.根据权利要求5所述的方法，其特征在于，所述在使所述第三选框边与所述第四选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第一调整操作，包括：

当所述第一位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第一位移分量为拉伸量，沿所述第一方向对所述界面图形进行拉伸；

当所述第二位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第二位移分量为拉伸量，沿所述第二方向对所述界面图形进行拉伸；

当所述第三位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第三位移分量为压缩量，沿所述第三方向对所述界面图形进行压缩；

当所述第四位移分量大于0时，在使所述第三选框边与所述第四选框边的交点位置不变的情况下，以所述第四位移分量为压缩量，沿所述第四方向对所述界面图形进行压缩。

7.根据权利要求5所述的方法，其特征在于，所述在使所述第一选框边与所述第二选框边的交点位置不变的情况下，沿所述操作轨迹所指示的方向对所述界面图形进行形状调整和尺寸调整中至少一种，以实现所述第二调整操作，包括：

当所述第一位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第一位移分量为压缩量，沿所述第一方向对所述界面图形进行压缩；

当所述第二位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第二位移分量为压缩量，沿所述第二方向对所述界面图形进行压缩；

当所述第三位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第三位移分量为拉伸量，沿所述第三方向对所述界面图形进行拉伸；

当所述第四位移分量大于0时，在使所述第一选框边与所述第二选框边的交点位置不变的情况下，以所述第四位移分量为拉伸量，沿所述第四方向对所述界面图形进行拉伸。

8.根据权利要求4所述的方法，其特征在于，所述沿所述操作轨迹所指示的方向对所述界面图形进行平移，以实现所述第三调整操作，包括：

以所述操作轨迹在所述界面中的位移量为平移量，沿所述操作轨迹所指示的方向对所述界面图形进行平移。

9.根据权利要求1-4任一项所述的方法，其特征在于，所述根据所述位置与所述第一操作区和所述第二操作区之间的位置关系，确定针对所述界面图形的调整操作，并对所述界面图形执行所述调整操作之后，还包括：

将包括调整后的界面图形的界面所对应的显示数据发送至目标显示装置，以使所述目标显示装置显示所述包括调整后的界面图形的界面。

10.根据权利要求1-4任一项所述的方法，其特征在于，所述第一操作区和所述第二操作区均与所述外接矩形选框形状相同，所述第一操作区和所述第二操作区均与所述外接矩形选框尺寸相同。

11.根据权利要求1-4任一项所述的方法，其特征在于，所述第一操作区的几何中心与所述外接矩形选框的几何中心之间的距离为像素级，所述第二操作区的几何中心与所述外接矩形选框的几何中心之间的距离为像素级。

12.根据权利要求1-4任一项所述的方法，其特征在于，所述用户操作包括鼠标划动操作和触屏划动操作中的至少一种，所述预设点为所述用户操作的操作轨迹中的起点。

13.一种电子设备，其特征在于，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序，所述程序被所述处理器执行时实现如权利要求1至12中任一项所述的界面图形调整方法的步骤。

14.一种计算机非瞬态可读存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如方法权利要求1至12中任一项所述的界面图形调整方法。

15.一种显示系统，其特征在于，包括如权利要求13所述的电子设备，以及至少一个显示装置，所述显示装置与所述电子设备通信连接，所述电子设备还配置为将包括调整后的所述界面图形的界面所对应的显示数据发送至各个所述显示装置，所述显示装置配置为接收所述包括调整后的所述界面图形的界面并进行显示。

Images