CN109597563B - 一种界面编辑方法、装置、电子设备和存储介质 - Google Patents

Abstract

本发明实施例提供了一种界面编辑方法、装置、电子设备和存储介质，通过在终端的处理器上执行软件应用，并在所述终端的触控显示器上渲染得到图形用户界面，所述图形用户界面包括多个初始控件，所述方法包括：响应作用于图形界面的第一触控操作，确定与第一触控操作匹配的目标控件；响应作用于目标控件的第二触控操作，将目标控件移动至与第二触控操作对应的第一位置；判断处于第一位置的目标控件是否满足预设吸附规则；若是，则将目标控件移动至与吸附规则匹配的第二位置；若否，则将目标控件固定在第一位置。本发明实施例可以实现用户可以通过移动控件，对图形界面进行编辑，实现图形界面的半自动化编辑。

Description

一种界面编辑方法、装置、电子设备和存储介质

技术领域

本发明涉及应用程序技术领域，特别是涉及一种界面编辑方法、装置、电子设备和存储介质。

背景技术

随着互联网技术和电子技术的迅速发展，计算机和智能终端等设备原来越渗透进人们的日常生活中。

在计算机和终能终端上，往往安装有不尽相同的应用程序，每一个应用程序一般会设置有对应的界面。在应用程序的界面中，一般都会提供一些控件给用户进行相应操作。针对界面中控件的布局，一种现有技术是，应用程序的界面被划分成多个网格，用户只能将控件放置在网格中，这种方案中，控件的布局较为呆板。又一种现有技术是，界面设置有数个允许放置控件的为预设点位，用户将控件放置在这些预设点位中，这种方案中，需要对界面进行负责设计，成本较高。另一种现有技术是，应用程序对控件的放置没有设置任何规则，控件可以随意放置，这种方案中，容易出现控件重叠情况，影响用户对控件的操作。

发明内容

鉴于上述问题，提出了本发明实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种界面编辑方法、装置、电子设备和存储介质。

为了解决上述问题，本发明实施例公开了一种界面编辑方法，通过在终端的处理器上执行软件应用，并在所述终端的触控显示器上渲染得到图形用户界面，所述图形用户界面包括多个初始控件，所述方法包括：

响应作用于所述图形界面的第一触控操作，确定与所述第一触控操作匹配的目标控件；

响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置；

判断处于所述第一位置的目标控件是否满足预设吸附规则；

若处于所述第一位置的目标控件满足预设吸附规则，则将所述目标控件移动至与所述吸附规则匹配的第二位置；

若处于所述第一位置的目标控件不满足预设吸附规则，则将所述目标控件固定在所述第一位置。

优选地，所述判断处于所述第一位置的目标控件是否满足预设吸附规则的步骤，包括：

获取所述图形用户界面中的初始控件的初始位置；

判断所述第一位置与所述初始位置之间的关系是否满足所述预设吸附规则。

优选地，所述响应作用于所述图形界面的第一触控操作，确定与所述第一触控操作匹配的目标控件，包括：

响应作用于所述图形界面中初始控件的所述第一触控操作，在所述初始控件中确定与所述第一触控操作匹配的所述目标控件。

优选地，所述响应作用于所述图形界面的第一触控操作，确定与所述第一触控操作匹配的目标控件的步骤，包括：

响应作用于所述图形界面中待选控件的所述第一触控操作，在所述待选控件中确定与所述第一触控操作匹配的所述目标控件。

优选地，所述初始控件设置有包裹其自身的正多边形的判断边界，所述正多边形的中心至任一边的端点的距离为第一长度，所述正多边形的中心至任一边的距离为第二长度；所述判断所述第一位置与所述初始位置之间的关系是否满足所述预设吸附规则步骤，包括：

判断所述第一位置的中心与所述初始位置的中心之间的距离是否满足预设范围；所述预设范围为不小于第二长度的两倍且不大于第一长度的两倍；

若所述第一位置的中心与所述初始位置的中心之间的距离满足预设范围，则确定所述第一位置与所述初始位置之间的关系满足所述预设吸附规则。

优选地，所述将所述目标控件移动至与所述吸附规则匹配的第二位置的步骤，包括：

确定其中心与第一位置的中心之间的距离满足所述预设范围的初始位置对应的初始控件为待筛选吸附控件；

在所述待筛选吸附控件中确定吸附目标；

采用所述目标控件和所述吸附目标，确定所述第二位置；

将所述目标控件移动至所述第二位置。

优选地，所述采用所述目标控件和所述吸附目标，确定第二位置的步骤，包括：

确定在所述目标控件中靠近所述吸附目标的一条边为第一重叠边；

确定在所述吸附目标中靠近所述目标控件的一条边为第二重叠边；

移动所述第一目标目标控件，将所述第一重叠边与所述第二重叠边重合，且距离所述吸附目标中间两倍第二长度的位置为所述第二位置。

优选地，所述在所述待筛选吸附目标中确定吸附目标的步骤，包括：

计算目标控件与所述待筛选吸附控件的距离值；所述距离值为目标控件的中心与所述待筛选吸附控件的中心的直线距离；

采用所述距离值中的最小值对应的待筛选吸附控件为所述吸附目标。

优选地，所述图形用户界面设置有可编辑区域；所述将所述目标控件移动至与所述吸附规则匹配的第二位置的步骤，还包括：

当所述目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件退回至所述第一位置。

优选地，所述将所述目标控件移动至与所述吸附规则匹配的第二位置的步骤，还包括：

确定所述吸附目标为非待筛选吸附控件；

在所述待筛选吸附控件中确定新的吸附目标；

采用所述目标控件和所述新的吸附目标，确定新的第二位置；

将所述目标控件移动至所述新的第二位置。

优选地，所述图形用户界面设置有可编辑区域；所述检测所述图形界面的移动触控操作，将所述目标控件移动至与所述移动触控操作对应的第一位置的步骤，包括：

确定所述目标控件移动前的位置为原始位置；

确定与所述移动触控操作对位置为的第一位置；

当处于所述第一位置的目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件退回至所述原始位置；

当处于所述第一位置的目标控件完全位于所述可编辑区域内，且所述目标控件与除所述目标控件以外的初始控件不发生重叠时，将所述目标控件移动至所述第一位置。

本发明实施例还提供了一种界面编辑装置，通过在终端的处理器上执行软件应用，并在所述终端的触控显示器上渲染得到图形用户界面，所述图形用户界面包括多个初始控件，所述装置包括：

选择模块，用于响应作用于所述图形界面的第一触控操作，确定与所述第一触控操作匹配的目标控件；

移动模块，用于响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置；

判断模块，用于判断处于所述第一位置的目标控件是否满足预设吸附规则；

吸附模块，用于若处于所述第一位置的目标控件满足预设吸附规则，则将所述目标控件移动至与所述吸附规则匹配的第二位置；

固定模块，用于若处于所述第一位置的目标控件不满足预设吸附规则，则将所述目标控件固定在所述第一位置。

优选地，所述判定模块包括：

初始位置获取子模块，用于获取所述图形用户界面中的初始控件的初始位置；

初始位置判断子模块，用于判断所述第一位置与所述初始位置之间的关系是否满足所述预设吸附规则。

优选地，所述选择模块包括：

第一匹配子模块，用于响应作用于所述图形界面中初始控件的所述第一触控操作，在所述初始控件中确定与所述第一触控操作匹配的所述目标控件。

优选地，所述选择模块包括：

第二匹配子模块，用于响应作用于所述图形界面中待选控件的所述第一触控操作，在所述待选控件中确定与所述第一触控操作匹配的所述目标控件。

优选地，所述初始控件设置有包裹其自身的正多边形的判断边界，所述正多边形的中心至任一边的端点的距离为第一长度，所述正多边形的中心至任一边的距离为第二长度；初始位置判断子模块可以包括：

吸附判断单元，用于判断所述第一位置的中心与所述初始位置的中心之间的距离是否满足预设范围；所述预设范围为不小于第二长度的两倍且不大于第一长度的两倍；

吸附确定单元，用于若所述第一位置的中心与所述初始位置的中心之间的距离满足预设范围，则确定所述第一位置与所述初始位置之间的关系满足所述预设吸附规则。

优选地，所述吸附模块包括：

待筛选吸附子模块，用于确定其中心与第一位置的中心之间的距离满足所述预设范围的初始位置对应的初始控件为待筛选吸附控件；

吸附目标子模块，用于在所述待筛选吸附控件中确定吸附目标；

第二位置确定子模块，用于采用所述目标控件和所述吸附目标，确定所述第二位置；

第二位置移动子模块，用于将所述目标控件移动至所述第二位置。

优选地，所述第二位置确定子模块包括：

第一重叠边单元，用于确定在所述目标控件中靠近所述吸附目标的一条边为第一重叠边；

第二重叠边单元，用于确定在所述吸附目标中靠近所述目标控件的一条边为第二重叠边；

移动单元，用于移动所述第一目标目标控件，将所述第一重叠边与所述第二重叠边重合，且距离所述吸附目标中间两倍第二长度的位置为所述第二位置。

优选地，所述吸附目标子模块包括：

距离计算子模块，用于计算目标控件与所述待筛选吸附控件的距离值；所述距离值为目标控件的中心与所述待筛选吸附控件的中心的直线距离；

距离最小值子模块，用于采用所述距离值中的最小值对应的待筛选吸附控件为所述吸附目标。

优选地，所述图形用户界面设置有可编辑区域；所述吸附模块还包括：

第一位置退回子模块，用于当所述目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件退回至所述第一位置。

优选地，所述吸附模块还包括：

目标删除子模块，用于确定所述吸附目标为非待筛选吸附控件；

新目标子模块，用于在所述待筛选吸附控件中确定新的吸附目标；

新位置确定子模块，用于采用所述目标控件和所述新的吸附目标，确定新的第二位置；

新位置移动子模块，用于将所述目标控件移动至所述新的第二位置。

优选地，所述图形用户界面设置有可编辑区域；所述移动模块包括：

原始位置子模块，用于确定所述目标控件移动前的位置为原始位置；

第一位置子模块，用于确定与所述第二触控操作对位置为的第一位置；

原始位置回退子模块，用于当处于所述第一位置的目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件退回至所述原始位置；

第一位置固定子模块，用于当处于所述第一位置的目标控件完全位于所述可编辑区域内，且所述目标控件与除所述目标控件以外的初始控件不发生重叠时，将所述目标控件移动至所述第一位置。

本发明实施例还提供了一种电子设备，包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上所述的界面编辑方法的步骤。

本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上所述的界面编辑方法的步骤。

本发明实施例包括以下优点：通过检测所述图形界面的第一触控操作，确定与所述第一触控操作匹配的目标控件；响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置；当处于所述第一位置的目标控件满足预设吸附规则时，则将所述目标控件移动至与所述吸附规则匹配的第二位置。从而实现用户可以通过移动控件，对图形界面进行编辑，同时，控件能够按照预设的吸附规则，自动移动至满足吸附规则的第二位置，实现图形界面的半自动化编辑，提高图形界面的可编辑度，提升用户体验。

附图说明

图1是本发明一实施例提供的一种界面编辑方法步骤流程；

图2是本发明一实施例提供的图形用户界面的示意图；

图3是本发明一实施例提供的图形用户界面局部示意图；

图4是本发明一实施例的一种示例的示意图一；

图5是本发明一实施例的一种示例的示意图二；

图6是本发明一实施例的另一种示例的示意图三；

图7是本发明一实施例的另一种示例的示意图四

图8是本发明一实施例的另一种示例的示意图五

图9是本发明实施例提供的一种界面编辑装置实施例的结构框图。

具体实施方式

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

参照图1，示出了本发明一实施例提供的一种界面编辑方法步骤流程。参照图2，示出了本发明一实施例提供的图形用户界面的示意图。通过在终端201的处理器上执行软件应用，并在所述终端的触控显示器上渲染得到图形用户界面202，所述图形用户界面包括多个初始控件203。

本发明实施例具体可以包括如下步骤：

步骤101，响应作用于所述图形用户界面的第一触控操作，确定与所述第一触控操作匹配的目标控件；

图形界面与触控显示器对应，可以根据检测用户在所述触控显示器上进行触控操作，采集用户对应于图形界面的第一触控操作，通过用户的第一触控操作，确定目标控件。

在一种示例中，步骤101可以包括：响应作用于所述图形界面中初始控件的所述第一触控操作，在所述初始控件中确定与所述第一触控操作匹配的所述目标控件。

可以采用用户在图形用户界面中的点击操作为所述第一触控操作，当点击操作与图形界面中的其中一个初始控件对应时，则将与该滑动起始点对应的初始控件确定为目标控件。

在另在一种示例中，步骤101可以包括：响应作用于所述图形界面中待选控件的所述第一触控生成触控操作，在所述待选控件中确定与所述第一触控操作匹配的所述目标控件。

图形用户界面设置有可编辑区域，初始控件位于可编辑区域中。在图形用户界面中除可编辑区域以外的区域(例如：菜单栏)中可以设置有至少待选控件。可以采用用户在图形用户界面中的点击操作为所述第一触控操作，当点击操作与图形界面中的其中一个待选控件对应时，则将与该滑动起始点对应的初始控件确定为目标控件。

可以理解的是，用户可以将至少待选控件放置在可编辑区域后，将待选控件更新为初始控件，并在当前所有的初始控件中选择目标控件。

步骤102，响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置；

可以采集用户作用于目标控件的触控操作为第二触控操作，通过用户的第二触控操作，确定第一位置。

例如，第二触控操作可以是滑动操作，采用用户在滑动过程中，停留超过一定时间的位置对应于图形界面的位置为第一位置，或者，是采用用户在滑动操作中的滑动结束点对应于图形界面的位置为第一位置。

在本发明的一种优选实施例中，所述图形用户界面设置有可编辑区域，步骤102可以包括：

子步骤S11，确定所述目标控件移动前的位置为原始位置；

记录目标控件在响应于第二触控操作进行移动之前，所处的位置为目标控件的原始位置。

子步骤S12，确定与所述第二触控操作对位置为的第一位置；

确定所述第二触控操作对应于图形界面的位置为第一位置。

例如：第一位置可以是用户在滑动操作过程中停留位置对应于图形界面的位置，或者，是用户在滑动操作中的滑动结束点对应于图形界面的位置。

子步骤S13，当处于所述第一位置的目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件回退至所述原始位置；

子步骤S14，当处于所述第一位置的目标控件完全位于所述可编辑区域内，且所述目标控件与除所述目标控件以外的初始控件不发生重叠时，将所述目标控件移动至所述第一位置。

每一个控件设置有的判断边界，判断边界为包裹对应控件的最小正多边形。当目标控件处于第一位置时，如果目标控件对应的判断边界超出了可编辑区域，或者目标控件对应的判断边界与除所述目标控件以外的初始控件对应的判断边界发送重叠时，确定第一位置为非法位置，不能放置控件，则将目标控件移动至所述原始位置。

在本优选实施例中，通过在记录目标控件在移动至第一位置之前的位置为原始位置，当处于所述第一位置的目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件回退至所述原始位置，从而防止目标控件处于第一位置时，超出图形界面的可编辑区域，或者与其他初始控件发生重叠，影响用户对控件的操作，导致用户体验下降。

在本发明的另一种实施例中，仅当处于所述第一位置的目标控件不完全位于所述可编辑区域内时，将所述目标控件退回至所述原始位置；当处于所述第一位置的目标控件完全位于所述可编辑区域内时，不管所述目标控件与除所述目标控件以外的初始控件是否发生重叠，均将所述目标控件移动至所述第一位置。

步骤103，判断处于所述第一位置的目标控件是否满足预设吸附规则；

在本发明的一种优选实施例中，步骤103可以包括：

子步骤S21，获取所述图形用户界面中的初始控件的初始位置；

子步骤S22，判断所述第一位置与所述初始位置之间的关系是否满足所述预设吸附规则。

在目标控件移动至第一位置后，获取当前图形用户界面中，除目标控件以外的初始控件的初始位置，然后根据第一位置和初始位置之间的关系确定处于第一位置的目标控件是否满足吸附规则。

参照图3，示出了本发明一实施例提供的图形用户界面局部示意图。

在本发明的一种优选实施例中，所述初始控件设置有包裹其自身的正多边形的判断边界，所述正多边形的中心至任一边的端点的距离301为第一长度，所述正多边形的中心至任一边的距离为第二长度302；子步骤22可以包括：

子步骤S221，判断所述第一位置的中心与所述初始位置的中心之间的距离是否满足预设范围；所述预设范围为不小于第二长度的两倍且不大于第一长度的两倍；

子步骤S222，若所述第一位置的中心与所述初始位置的中心之间的距离满足预设范围，则确定所述第一位置与所述初始位置之间的关系满足所述预设吸附规则。

可以以第一位置和初始位置的中心为圆心，且以第一长度作为半径，可以确定出相对于该位置的一个圆形界线。当第一位置和初始位置的圆形界线出现相交时，则确定第一位置的中心与初始位置的中心之间的距离距离不大于两倍第一长度；当初始位置的中心至第一位置对应的多边形任一边之间的距离均大于第二长度时，此时第一位置对应的多边形与初始位置对应的多边形出现相离时，则确定第一位置的中心与初始位置的中心之间的距离不小于第二长度的两倍。

当第一位置的中心与所述初始位置的中心之间的距离不小于第二长度的两倍且不大于第一长度的两倍，则确定第一位置与所述初始位置之间的关系满足预设吸附规则，即处于第一位置的目标控件满足吸附规则。

可以理解的是，若所述第一位置的中心与所述初始位置的中心之间的距离不满足预设范围，则确定所述第一位置与所述初始位置之间的关系不满足所述预设吸附规则。

例如：如图3所示，控件对应的正多边形为正六边形。目标控件A的中心与初始控件B的中心、初始控件C的中心之间的距离均不小于第二长度的两倍且不大于第一长度的两倍，则处于第一位置的目标控件满足吸附规则。

可以理解的是，控件对应的判断边界为正六边形只是本发明实施例的一种示例，控件对应的判断边界还可以是具有其他数量边长的正多边形，本发明对正多边形的边的数量不作限定。

在一种示例中，判断边界可以是不可视的。在另一种示例中，判断边界仅在控件移动时可视。本发明实施例对控件的判断边界的可视性，以及可视条件不作限定。

在本优选实施例中，采用不小于第二长度的两倍且不大于第一长度的两倍作为预设范围，并且当第一位置的中心与初始位置的中心之间的距离满足预设范围时，确定处于第一位置的目标控件满足吸附规则，从而实现自动判断当目标控件移动至某一位置时，是否满足吸附规则，进而判断是否将目标控件吸附至其他初始控件。

步骤104，若处于所述第一位置的目标控件满足预设吸附规则，则将所述目标控件移动至与所述吸附规则匹配的第二位置。

在一种优选实施例中，步骤104可以包括：

子步骤S31，确定其中心与第一位置的中心之间的距离满足所述预设范围的初始位置对应的初始控件为待筛选吸附控件；

确定其中心与第一位置的中心之间的距离不小于第二长度的两倍且不大于第一长度的两倍的初始位置对应的初始控件为待筛选吸附控件。

子步骤S32，在所述待筛选吸附控件中确定吸附目标；

在待筛选吸附控件确定吸附目标，进而采用吸附目标确定第二位置。

在本优选施例中，通过确定其中心与第一位置的中心之间的距离不小于第二长度的两倍且不大于第一长度的两倍的初始位置对应的初始控件为待筛选吸附控件，从而实现在确定吸附目标时，无需针对图形界面中的所有控件进行筛选，减少确定吸附目标所需的资源，提高确定吸附目标的效率。

在本发明的一种优选实施例中，子步骤S32可以包括：

子步骤S321，计算目标控件与所述待筛选吸附控件的距离值；所述距离值为目标控件的中心与所述待筛选吸附控件的中心的直线距离；

计算目标控件的中心与每一个待筛选吸附控件的直线距离，生成与每一个待筛选吸附控件对应的距离值。

子步骤S322，采用所述距离值中的最小值对应的待筛选吸附控件为所述吸附目标。

确定在子步骤S321中计算得到的距离值中的最小值，确定距离值中最小值对应的待筛选吸附目标为吸附目标。

子步骤S33，采用所述目标控件和所述吸附目标，确定所述第二位置；

通过目标控件和吸附目标之间的位置关系，确定第二位置。

在本优选实施例的一种示例中，当目标控件的中心与所述待筛选吸附控件的中心的直线距离均相等时，则随机确定待筛选吸附控件中一个为吸附目标。

在本发明实施例中，通过采用目标控件与待筛选吸附控件的中心距离，确定吸附目标，进而通过目标控件和吸附目标确定第二位置，从而实现将目标控件吸附至距离其自身最近的控件。

在本发明的一种优选实施例中，子步骤S33可以包括：

子步骤S331，确定在所述目标控件中靠近所述吸附目标的一条边为第一重叠边；

子步骤S332，确定在所述吸附目标中靠近所述目标控件的一条边为第二重叠边；

子步骤S333，移动所述第一目标目标控件，确定将所述第一重叠边与所述第二重叠边重合，且距离所述吸附目标中间两倍第二长度的位置为所述第二位置。

子步骤S34，将所述目标控件移动至所述第二位置。

通过将目标控件移动至第二位置，使得目标控件处于第二位置时，目标控件靠近吸附目标的一边与吸附目标靠近目标控件的一边进行重合，目标控件中心与吸附目标中心的距离为两倍第二长度。

例如：如图4所示，控件A为目标控件，控件B为吸附目标，且控件A处于第一位置。图5所示，控件B的位置保持不变，将控件A吸附至控件B，使得控件A靠近控件B的一边与控件B靠近控件A中的一边进行重合，控件A的中心与控件B中心的距离为两倍第二长度，此时，控件A所处位置为第二位置。

在本优选实施例中，通过将在目标控件中靠近吸附目标的一边，与在吸附目标中靠近的一边进行重合，将目标控件吸附至吸附目标，从而将目标控件移动至第二位置，实现控件能够在用户进行移动操作后，控件能够进行自动吸附预设范围内的其他控件，增加控件排版的美观程度。

在实际应用中，可以在目标控件移动至第二位置后，建立目标控件与吸附目标之间唯一匹配的关联关系。

在本发明的一种优选实施例中，步骤104还包括：

子步骤S35，当所述目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件回退至所述第一位置。

当处于所述第二位置的目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件回退至所述第一位置，从而防止目标控件处于第二位置时，超出图形界面的可编辑区域，或者与其他初始控件发生重叠，影响用户对控件的操作，导致用户体验下降。

在本发明的一种优选实施例中，步骤104还包括：

子步骤S36，确定所述吸附目标为非待筛选吸附控件；

在目标控件回退至第一位置后，将当前的吸附目标确定为非待筛选吸附控件。

子步骤S37，在所述待筛选吸附控件中确定新的吸附目标；

重新在待筛选吸附控件中确定新的吸附目标。

具体的，在待筛选吸附目标中剔除当前吸附目标后，确定距离值中最小值对应的待筛选吸附目标为新的吸附目标。

子步骤S38，采用所述目标控件和所述新的吸附目标，确定新的第二位置；

子步骤S39，将所述目标控件移动至所述新的第二位置。

采用新的吸附目标代替前一个吸附目标，执行如子步骤S331-S333的步骤，从而确定新的第二位置。

在本优选实施例中，可以不断从待筛选吸附控件中确定新的吸附目标，进而确定新的第二位置，直至目标控件处于新的第二位置时，目标控件完全位于所述可编辑区域内，并且所述目标控件与除所述目标控件以外的初始控件没有发生重叠。

步骤105，若处于所述第一位置的目标控件不满足预设吸附规则，则将所述目标控件固定在所述第一位置。

在步骤104或者105之后，将目标控件更新为初始控件。

当将目标控件移动至第二位置或者将目标控件固定在第一位置时，将目标控件更新为初始控件，以使用户在下一次对图形用户界面进行编辑时，能够确定同一个控件为目标控件。

以下引用一个示例对本优选实施例作进一步说明：

如图6所示，目标控件A当前位置为第一位置，且目标控件A、初始控件B、初始控件C和初始控件D均位于可编辑区域内。计算目标控件A的中心，与初始控件B、初始控件C和初始控件D的中心的距离值，确定目标控件A的中心与初始控件B、初始控件C的中心的距离值均不大于两倍第一长度且不小于两倍第二长度，则确定处于第一位置目标控件A满足吸附规则，并且由于初始控件B中心和初始控件C中心距离目标控件A的中心满足预设范围，则初始控件B和初始控件C均为待筛选吸附控件。计算初始控件B中心与目标控件A中心的距离，得到第一距离值；计算初始控件C中心与目标控件A中心的距离，得到第二距离值。由于第一距离值小于第二距离值，将初始控件B确定为吸附目标。如图7所示，将目标控件A吸附至初始控件B，使得在目标控件A中靠近初始控件B的一边，与初始控件B中靠近目标控件A的一边进行重合，且目标控件A的中心与初始控件B的中心之间距离为两倍于第二长度，目标控件A当前所处位置即第二位置。此时，目标控件A的中心与初始控件C的中心小于第二长度的两倍，则确定目标控件A当前的位置为非法位置，则将初始控件B确定为非待筛选吸附控件。此时，由于第二距离值小于第一距离值，则将待筛选吸附控件中的初始控件C确定为新的吸附目标。如图8所示，将目标控件A吸附至初始控件B，使得在目标控件A中靠近初始控件C的一边，与初始控件C中靠近目标控件A的一边进行重合，且目标控件A的中心与初始控件C的中心之间距离为两倍于第二长度，目标控件A当前所处位置即为新的第二位置。此时，目标控件A吸附至所述初始控件C，目标控件A与初始控件B没有发生重叠，且目标控件A、初始控件B、初始控件C和初始控件D均位于可编辑区域内，则无需对目标控件A回退至第一位置，目标控件A完成完成自动吸附，完成界面编辑。

在本发明实施例中，通过检测所述图形界面的第一触控操作，确定在所述初始控件中与所述第一触控操作匹配的目标控件；响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置；当处于所述第一位置的目标控件满足预设吸附规则时，则将所述目标控件移动至与所述吸附规则匹配的第二位置。从而实现用户可以通过移动控件，对图形界面进行编辑，同时，控件能够按照预设的吸附规则，自动移动至满足吸附规则的第二位置，实现图形界面的半自动化编辑，提高图形界面的可编辑度，提升用户体验。

进一步的，在用户将目标控件移动至第一位置时，获取初始控件的位置为初始位置，若第一位置的中心与所述初始位置的中心之间的距离满足预设范围，则确定满足预设范围的初始位置对应的初始控件为待筛选吸附控件，通过计算各个待筛选吸附控件与目标控件的距离，将与目标控件的距离指最小的待筛选吸附控件确定为吸附目标，根据吸附目标和目标控件确定第二位置，并将目标控件移动至所述第二位置。当处于所述第二位置的目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件回退至所述第一位置，将当前的吸附目标确定为非待筛选吸附控件。再次在待筛选吸附控件中，确定与目标控件之间的距离值最小的待筛选吸附控件为新的吸附目标，根据目标控件以及新的吸附目标确定新的第二位置，将目标控件移动至新的第二位置。通过在待筛选吸附控件中，不断筛选出新的吸附目标，直至目标控件处于新的第二位置时，目标控件完全位于所述可编辑区域内，且目标控件与除目标控件以外的初始控件不发生重叠，即完成目标控件的自动吸附。从而可以可以在对目标控件进行半自动编辑的同时，防止目标控件处于可编辑区域以外或者与其他控件发生重叠，在提高界面编辑半自动化的同时，保证了界面美观性的同时，也有效防止控件位置变化后可能影响用户操作的情况。

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

参照图9，示出了本发明的一种界面编辑装置实施例的结构框图，通过在终端的处理器上执行软件应用，并在所述终端的触控显示器上渲染得到图形用户界面，所述图形用户界面包括多个初始控件，所述装置具体可以包括：

选择模块401，用于响应作用于所述图形界面的第一触控操作，确定与所述第一触控操作匹配的目标控件；

移动模块402，用于响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置；

判断模块403，用于判断处于所述第一位置的目标控件是否满足预设吸附规则；

吸附模块404，用于若处于所述第一位置的目标控件满足预设吸附规则，则将所述目标控件移动至与所述吸附规则匹配的第二位置。

固定模块405，用于若处于所述第一位置的目标控件不满足预设吸附规则，则将所述目标控件固定在所述第一位置。

在本法的一种优选实施例中，所述判定模块403可以包括：

初始位置获取子模块，用于获取所述图形用户界面中的初始控件的初始位置；

初始位置判断子模块，用于判断所述第一位置与所述初始位置之间的关系是否满足所述预设吸附规则。

在本法的一种优选实施例中，所述选择模块401可以包括：

第一匹配子模块，用于响应作用于所述图形界面中初始控件的所述第一触控操作，在所述初始控件中确定与所述第一触控操作匹配的所述目标控件。

在本法的一种优选实施例中，所述选择模块401可以包括：

第二匹配子模块，用于响应作用于所述图形界面中待选控件的所述第一触控操作，在所述待选控件中确定与所述第一触控操作匹配的所述目标控件。

在本法的一种优选实施例中，所述初始控件设置有包裹其自身的正多边形的判断边界，所述正多边形的中心至任一边的端点的距离为第一长度，所述正多边形的中心至任一边的距离为第二长度；初始位置判断子模块可以包括：

吸附判断单元，用于判断所述第一位置的中心与所述初始位置的中心之间的距离是否满足预设范围；所述预设范围为不小于第二长度的两倍且不大于第一长度的两倍；

吸附确定单元，用于若所述第一位置的中心与所述初始位置的中心之间的距离满足预设范围，则确定所述第一位置与所述初始位置之间的关系满足所述预设吸附规则。

在本法的一种优选实施例中，所述吸附模块404包括：

待筛选吸附子模块，用于确定其中心与第一位置的中心之间的距离满足所述预设范围的初始位置对应的初始控件为待筛选吸附控件；

吸附目标子模块，用于在所述待筛选吸附控件中确定吸附目标；

第二位置确定子模块，用于采用所述目标控件和所述吸附目标，确定所述第二位置；

第二位置移动子模块，用于将所述目标控件移动至所述第二位置。

在本法的一种优选实施例中，所述第二位置确定子模块包括：

第一重叠边单元，用于确定在所述目标控件中靠近所述吸附目标的一条边为第一重叠边；

第二重叠边单元，用于确定在所述吸附目标中靠近所述目标控件的一条边为第二重叠边；

移动单元，用于移动所述第一目标目标控件，将所述第一重叠边与所述第二重叠边重合，且距离所述吸附目标中间两倍第二长度的位置为所述第二位置。

在本法的一种优选实施例中，所述吸附目标子模块包括：

距离计算子模块，用于计算目标控件与所述待筛选吸附控件的距离值；所述距离值为目标控件的中心与所述待筛选吸附控件的中心的直线距离；

距离最小值子模块，用于采用所述距离值中的最小值对应的待筛选吸附控件为所述吸附目标。

在本法的一种优选实施例中，所述图形用户界面设置有可编辑区域；所述吸附模块404还包括：

第一位置退回子模块，用于当所述目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件退回至所述第一位置。

在本法的一种优选实施例中，所述吸附模块404还包括：

目标删除子模块，用于确定所述吸附目标为非待筛选吸附控件；

新目标子模块，用于在所述待筛选吸附控件中确定新的吸附目标；

新位置确定子模块，用于采用所述目标控件和所述新的吸附目标，确定新的第二位置；

新位置移动子模块，用于将所述目标控件移动至所述新的第二位置。

在本法的一种优选实施例中，所述图形用户界面设置有可编辑区域；所述移动模块402包括：

原始位置子模块，用于确定所述目标控件移动前的位置为原始位置；

第一位置子模块，用于确定与所述第二触控操作对位置为的第一位置；

原始位置回退子模块，用于当处于所述第一位置的目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件退回至所述原始位置；

第一位置固定子模块，用于当处于所述第一位置的目标控件完全位于所述可编辑区域内，且所述目标控件与除所述目标控件以外的初始控件不发生重叠时，将所述目标控件移动至所述第一位置。

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

本发明一实施例还提供了一种电子设备，包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上所述的界面编辑方法的步骤。

发明一实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上所述的界面编辑方法的步骤。

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

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

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

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

Claims (12)

1.一种界面编辑方法，通过在终端的处理器上执行软件应用，并在所述终端的触控显示器上渲染得到图形用户界面，所述图形用户界面包括多个初始控件，所述初始控件设置有包裹其自身的正多边形的判断边界，所述正多边形的中心至任一边的端点的距离为第一长度，所述正多边形的中心至任一边的距离为第二长度，其特征在于，所述方法包括：

响应作用于所述图形用户界面的第一触控操作，确定与所述第一触控操作匹配的目标控件；

响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置；

判断处于所述第一位置的目标控件是否满足预设吸附规则；

若是，则将所述目标控件移动至与所述吸附规则匹配的第二位置；

若否，则将所述目标控件固定在所述第一位置；

所述判断处于所述第一位置的目标控件是否满足预设吸附规则的步骤，包括：

获取所述图形用户界面中的初始控件的初始位置；

判断所述第一位置的中心与所述初始位置的中心之间的距离是否满足预设范围；所述预设范围为不小于第二长度的两倍且不大于第一长度的两倍；

若是，则确定所述第一位置与所述初始位置之间的关系满足所述预设吸附规则。

2.根据权利要求1所述的方法，其特征在于，所述响应作用于所述图形用户界面的第一触控操作，确定与所述第一触控操作匹配的目标控件，包括：

响应作用于所述图形用户界面中初始控件的所述第一触控操作，在所述初始控件中确定与所述第一触控操作匹配的所述目标控件。

3.根据权利要求1所述的方法，其特征在于，所述响应作用于所述图形用户界面的第一触控操作，确定与所述第一触控操作匹配的目标控件的步骤，包括：

响应作用于所述图形用户界面中待选控件的所述第一触控操作，在所述待选控件中确定与所述第一触控操作匹配的所述目标控件。

4.根据权利要求1所述的方法，其特征在于，所述将所述目标控件移动至与所述吸附规则匹配的第二位置的步骤，包括：

确定其中心与第一位置的中心之间的距离满足所述预设范围的初始位置对应的初始控件为待筛选吸附控件；

在所述待筛选吸附控件中确定吸附目标；

采用所述目标控件和所述吸附目标，确定所述第二位置；

将所述目标控件移动至所述第二位置。

5.根据权利要求4所述的方法，其特征在于，所述采用所述目标控件和所述吸附目标，确定第二位置的步骤，包括：

确定在所述目标控件中靠近所述吸附目标的一条边为第一重叠边；

确定在所述吸附目标中靠近所述目标控件的一条边为第二重叠边；

移动所述目标控件，将所述第一重叠边与所述第二重叠边重合，且距离所述吸附目标中间两倍第二长度的位置为所述第二位置。

6.根据权利要求4所述的方法，其特征在于，所述在所述待筛选吸附控件中确定吸附目标的步骤，包括：

计算目标控件与所述待筛选吸附控件的距离值；所述距离值为目标控件的中心与所述待筛选吸附控件的中心的直线距离；

采用所述距离值中的最小值对应的待筛选吸附控件为所述吸附目标。

7.根据权利要求6所述的方法，其特征在于，所述图形用户界面设置有可编辑区域；所述将所述目标控件移动至与所述吸附规则匹配的第二位置的步骤，还包括：

当所述目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件退回至所述第一位置。

8.根据权利要求7所述的方法，其特征在于，所述将所述目标控件移动至与所述吸附规则匹配的第二位置的步骤，还包括：

确定所述吸附目标为非待筛选吸附控件；

在所述待筛选吸附控件中确定新的吸附目标；

采用所述目标控件和所述新的吸附目标，确定新的第二位置；

将所述目标控件移动至所述新的第二位置。

9.权利要求1所述的方法，其特征在于，所述图形用户界面设置有可编辑区域；响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置的步骤，包括：

确定所述目标控件移动前的位置为原始位置；

确定与所述第二触控操作对应位置为第一位置；

当处于所述第一位置的目标控件不完全位于所述可编辑区域内，或者所述目标控件与除所述目标控件以外的初始控件发生重叠时，将所述目标控件退回至所述原始位置；

当处于所述第一位置的目标控件完全位于所述可编辑区域内，且所述目标控件与除所述目标控件以外的初始控件不发生重叠时，将所述目标控件移动至所述第一位置。

10.一种界面编辑装置，通过在终端的处理器上执行软件应用，并在所述终端的触控显示器上渲染得到图形用户界面，所述图形用户界面包括多个初始控件，所述初始控件设置有包裹其自身的正多边形的判断边界，所述正多边形的中心至任一边的端点的距离为第一长度，所述正多边形的中心至任一边的距离为第二长度，其特征在于，所述装置包括：

选择模块，用于响应作用于所述图形用户界面的第一触控操作，确定与所述第一触控操作匹配的目标控件；

移动模块，用于响应作用于所述目标控件的第二触控操作，将所述目标控件移动至与所述第二触控操作对应的第一位置；

判断模块，用于判断处于所述第一位置的目标控件是否满足预设吸附规则；

吸附模块，用于若处于所述第一位置的目标控件满足预设吸附规则，则将所述目标控件移动至与所述吸附规则匹配的第二位置；

固定模块，用于若处于所述第一位置的目标控件不满足预设吸附规则，则将所述目标控件固定在所述第一位置；

所述判断模块包括：

初始位置获取子模块，用于获取所述图形用户界面中的初始控件的初始位置；

初始位置判断子模块，用于判断所述第一位置与所述初始位置之间的关系是否满足所述预设吸附规则；

所述初始位置判断子模块包括：

吸附判断单元，用于判断所述第一位置的中心与所述初始位置的中心之间的距离是否满足预设范围；所述预设范围为不小于第二长度的两倍且不大于第一长度的两倍；

吸附确定单元，用于若所述第一位置的中心与所述初始位置的中心之间的距离满足预设范围，则确定所述第一位置与所述初始位置之间的关系满足所述预设吸附规则。

11.一种电子设备，其特征在于，包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至9中任一项所述的界面编辑方法的步骤。

12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如权利要求1至9中任一项所述的界面编辑方法的步骤。

Images