CN109901902B - 界面显示方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本发明涉及界面显示方法、装置、计算机设备和存储介质，应用于终端设备。所述方法包括：显示界面的可视区，所述界面的可视区中包括用于容纳元素的页面容器；接收所述页面容器中的元素操作指令；响应所述操作指令，确定目标元素；当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。本发明实施例解决了编辑页面效率低的问题，并且简化了用户操作。

Description

界面显示方法、装置、计算机设备和存储介质

技术领域

本发明涉及图形用户界面技术领域，特别是涉及界面显示方法、界面显示装置、计算机设备和存储介质。

背景技术

常见的用于页面编辑的图形用户界面(也称作“页面编辑界面”)中包括的处于编辑状态的页面，该页面也称作页面容器，用户可以向该页面容器中添加文字、图片、多媒体文件等元素，例如PPT编辑界面；在保存之后，可以将该页面容器以及添加到该页面容器中的全部元素作为一个整体图像进行显示。

在实现本发明的过程中，发明人发现现有技术中存在如下问题：在页面编辑界面中，用户向页面容器中添加文本等元素或者移动光标元素时，如果添加的元素或者移动后的光标超出界面的可视区，用户将无法看到自己最新添加的元素或者移动后的光标；针对这种情况，目前解决办法是，用户通过操作界面中的滚动条移动页面容器，以将最新添加的元素或者移动后的光标显示到界面的可视区内，然而该方法存在页面容器编辑效率低的问题。

发明内容

基于此，有必要针对上述页面编辑界面存在的问题，提供一种界面显示方法、界面显示装置、计算机设备和存储介质。

一方面，本发明实施例提供一种界面显示方法，包括：

显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；

接收所述页面容器中的元素操作指令；

响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；

当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。

在一个实施例中，还包括：在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。

在一个实施例中，所述移动所述页面容器的步骤之后，还包括：

当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器以及所述第一目标控件。

在一个实施例中，所述第一目标控件包括水平滚动条和/或竖直滚动条；

所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动；所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。

在一个实施例中，所述移动所述页面容器的步骤，包括：

在所述水平方向上，若所述目标元素超出所述界面的可视区，水平移动所述页面容器，并水平移动所述水平控件；

在所述竖直方向上，若所述目标元素超出所述界面的可视区，竖直移动所述页面容器，并竖直移动所述竖直控件。

在一个实施例中，水平/竖直移动所述页面容器的步骤，包括：

将所述目标元素所在区域，确定为元素热区；获取所述元素热区与所述界面的可视区在所述水平方向/竖直方向上的距离；

水平/竖直移动所述页面容器；所述页面容器被水平/竖直移动的位移与所述距离相应。

在一个实施例中，所述界面的可视区、所述页面容器、所述元素热区均为矩形。

在一个实施例中，还包括：根据所述元素热区与所述界面的可视区的相对位置，判断是否满足水平移动条件/竖直移动条件；若满足所述水平移动条件，水平移动所述页面容器；若满足所述竖直移动条件，竖直移动所述页面容器。

在一个实施例中，所述水平移动条件为，在所述水平方向上，所述元素热区的左侧或者右侧超出所述界面的可视区；所述竖直移动条件为，在所述竖直方向上，所述元素热区的上侧或者下侧超出所述界面的可视区。

在一个实施例中，还包括：在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；

判断所述下层容器是否为底层画布；

若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。

在一个实施例中，还包括：在所述下层容器移动过程中，移动第二目标控件；所述第二目标控件为用于控制所述下层容器移动的控件。

在一个实施例中，还包括：当所述目标元素完全显示在所述界面的可视区中时，或者所述第二目标控件移动到边界处时，停止移动所述下层容器以及所述第二目标控件。

在一个实施例中，还包括：当所述目标元素完全显示在所述界面的可视区中之后，获取所述界面中最底层的页面容器，作为底层容器；

确定界面热区；所述界面热区为包含所述底层容器以及已添加到所述底层容器中的全部元素的最小外包矩形区域；

若所述界面热区超出所述界面的可视区，移动所述底层容器，移动方向为使得所述界面热区向着所述界面的可视区的中心靠近的方向。

在一个实施例中，在移动所述底层容器之后，还包括：在所述界面的可视区中，将所述界面热区以居中方式显示。

在一个实施例中，所述页面容器中的元素操作指令包括：向所述页面容器中新增元素的操作指令、编辑所述页面容器中已有元素的操作中的至少一种。

在一个实施例中，所述页面容器的显示颜色不同于所述界面的可视区的显示颜色。

在一个实施例中，所述目标元素包括：光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。

另一方面，本发明实施例提供一种界面显示装置，包括：

显示模块，用于显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；

指令接收模块，用于接收元素操作指令；

元素确定模块，用于响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；

容器移动模块，用于当所述目标元素超出所述界面的可视区时，移动页面容器，使得所述目标元素向所述界面的可视区中心靠近；所述页面容器为所述目标元素所在的页面容器，在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。

在一个实施例中，还包括：控件移动模块，用于在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。

在一个实施例中，还包括：移动控制模块，用于当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器。

在一个实施例中，还包括：

下层容器获取模块，用于在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；

下层容器判断模块，用于判断所述下层容器是否为底层画布；

下层容器移动模块，用于若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。

再一方面，本发明实施例提供一种计算机设备，包括显示器、存储器和处理器，其特征在于，所述显示器用于显示页面编辑界面；所述存储器存储有计算机程序；所述处理器执行所述程序时实现上述任一实施例的界面显示方法的步骤。

再一方面，本发明实施例提供一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述界面显示方法。

上述技术方案中的一个技术方案具有如下优点或有益效果：用户在编辑页面容器时，操作页面容器中的元素，如果被操作的元素区域超出界面的可视区，可自动移动元素所在的页面容器，通过自动移动页面容器，将用户当前操作的元素移动到界面的可视区中显示，无需用户操作滚动条，有利于提高页面容器编辑效率。

附图说明

图1A为一个实施例中页面编辑界面的示意图；

图1B为另一个实施例中页面编辑界面的示意图；

图1C为另一个实施例中页面编辑界面的示意图；

图1D为在页面容器中添加古诗词学科工具并保存后的显示效果示意图；

图1E为图1A的页面编辑界面中页面容器保存后的显示效果示意图；

图2为一实施例的界面显示方法的示意性流程图；

图3A为一个实施例中页面编辑界面对页面容器文本操作之前的示意图；

图3B为对图3A中的页面容器文本操作之后的示意图；

图3C为对图3B中界面移动页面容器之后的示意图；

图4A为一个实施例中页面编辑界面对页面容器图形操作之前的示意图；

图4B为对图4A中的页面容器图形操作之后的示意图；

图4C为对图4B中界面移动页面容器之后的示意图；

图5A为一个实施例中页面编辑界面对页面容器窗口操作之前的示意图；

图5B为对图5A中的页面容器窗口操作之后的示意图；

图5C为对图5B中界面移动页面容器之后的示意图；

图6A为一个实施例中元素热区相对于可视区在X方向的位置示意图；

图6B为另一个实施例中元素热区相对于可视区在X方向的位置示意图；

图6C为另一个实施例中元素热区相对于可视区在X方向的位置示意图；

图6D为另一个实施例中元素热区相对于可视区在X方向的位置示意图；

图7A为一个实施例中元素热区相对于可视区在Y方向的位置示意图；

图7B为另一个实施例中元素热区相对于可视区在Y方向的位置示意图；

图7C为另一个实施例中元素热区相对于可视区在Y方向的位置示意图；

图7D为另一个实施例中元素热区相对于可视区在Y方向的位置示意图；

图8A为一个实施例中页面容器中添加有上层容器的示意图；

图8B为图8A中的上层容器被操作之后的示意图；

图8C为图8B中的界面中页面容器移动后的示意图；

图9A为一个实施例中界面热区的示意图；

图9B为图9A中的界面热区移动后的示意图；

图9C为图9B中的界面热区居中显示后的示意图；

图10为一实施例的界面显示装置的示意性结构图；

图11为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

本申请提供的界面显示方法，可以应用于如图1A所示的页面编辑界面100中，界面的可视区200如图1A所示，可视区200中显示有处于编辑状态的页面容器300；页面容器300的形状固定，例如页面容器300可以为一个矩形；此外，页面容器300相对于可视区200可移动，例如图1B所示，页面容器300可以相对于可视区200向左移动；或者，如图1C所示，页面容器300可以相对于可视区200向上移动。

在实施例中，参考图1A所示，页面编辑界面100中还包括可选元素的类型201，可选元素的类型201可以包括文本、形状、多媒体、表格、思维导图以及其他工具。其中，其他工具可以根据具体应用场景设定。

用户选中任意一个类型的可选元素之后，便可以在页面容器300中添加相应类型的元素，例如，用户选中文本类型的可选元素，然后可以在页面容器300中添加文本；用户选中多媒体类型的可选元素，然后基于弹出的文件选择窗口选择添加多媒体文件，由此可以在页面容器300中添加多媒体文件；用户选中其他工具，然后基于弹出的学科工具选项，可以选择需要添加的学科工具，例如用户选择添加古诗词，可以在页面容器300中添加一个上层容器(即古诗词)，在该上层容器中，用户可以输入古诗词内容。在页面容器300编辑完成之后，古诗词容器内的内容显示，与页面容器300中的其他元素的显示相互独立，例如图1D所示。

需要说明的是，参见图1A所示，在页面编辑界面100中，添加到页面容器300中的元素，既包括显示在页面容器300的有效区的元素301，还包括显示在页面容器300的有效区之外的元素302，还包括部分显示在页面容器300的有效区内、部分显示在页面容器300的有效区之外的元素303；对计算机而言，元素301、元素302、元素303均为已经添加到页面容器300的元素。在保存页面容器300之后，页面容器300的显示效果如图1E所示，其中，在页面容器300的有效区内的元素部分将和页面容器有效区域一同显示出来，而在页面容器300的有效区内之外的元素部分无法显示出来。

本发明实施例中，在处于编辑状态的页面容器300中，用户操作的元素包括但不限于光标、文本、表格、图形、多媒体文件、思维导图、上层容器。其中，文本既可以是文字，还可以是符号；图形既可以是流程图、几何图形，又可以是普通的图片。

进一步地，在页面编辑界面100中，还包括新建页面容器(即图1A中的“新建页面”)和“开始播放”等控件；当用户点击“新建页面”的控件时，可以在界面的可视区200中显示一个空白的页面容器；当用户点击“开始播放”的控件时，自动保存当前编辑的页面容器300，并将页面容器300及元素作为一个整体显示出来。

在一个实施例中，基于上述的页面编辑界面，如图2所示，提供了一种界面显示方法，包括以下步骤：

S100，显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定。

其中，界面的可视区、页面容器可参见上述实施例所述。

S110，接收页面容器中的元素操作指令。

本发明实施例中，页面容器中的元素操作指令，可以是向所述页面容器中添加元素的操作指令，也可以是编辑所述页面容器中已有元素的操作指令。其中，向页面容器中添加元素的操作指令，可以是向页面容器中输入文本、键入光标、插入图形、插入多媒体文件、添加表格、添加上层容器等操作指令。其中，编辑页面容器中已有元素的操作指令，可以是对已经添加到页面容器中的文本、光标、表格、图形、多媒体文件、上层容器进行编辑的操作指令，例如：对已经添加到页面容器中的文本的格式进行调整的操作指令，对已经添加到页面容器中的思维导图进行展开显示的操作指令，或者对已经添加到页面容器中的上层容器进行位置移动的操作指令。

S120，响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素。

本发明实施例中，目标元素指的是被所述操作指令操作之后的元素，例如：当用户对页面容器中的文本的格式进行调整时，对应的目标元素则为调整后的文本；当用户对页面容器中的思维导图进行展开操作时，对应的目标元素则为展开后的思维导图；当用户对页面容器中的古诗词窗口进行移动时，对应的目标元素则为移动后的古诗词窗口。

其中，目标元素可以包括光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。

S130，当所述目标元素超出所述界面的可视区时，移动所述页面容器(即用于容纳所述目标元素的页面容器)，移动方向为所述目标元素向所述界面的可视区的中心靠近的方向；所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。

在本发明实施例中，当所述目标元素超出所述界面的可视区时，自动移动目标元素所在的页面容器，其情形例如：当用户在页面容器300中对文本“目标元素123123看不见”的格式进行调整时，调整前的界面显示如图3A所示；调整之后的界面显示如图3B所示，可见“目标元素123123看不见”超出了界面的可视区200；此时向左移动页面容器300，以使“目标元素123123看不见”能够完全显示到界面的可视区200中，效果如图3C所示。

在另一个场景中，当用户页面容器300中的思维导图“中心主题”进行展开操作时，思维导图“中心主题”展开前的界面显示如图4A所示；展开后的思维导图“中心主题”超出界面的可视区200，如图4B所示；此时自动向左移动页面容器300，以使展开后的思维导图“中心主题”能够完全显示在界面的可视区200，移动后的效果如图4C所示。

在另一个场景中，当用户对页面容器300中的上层容器400进行放大操作时，放大前的界面显示如图5A所示；放大后的上层容器401超出界面的可视区200，如图5B所示；此时自动向上移动页面容器300，以使放大后的上层容器400能够完全显示到界面的可视区200，移动后的效果如图5C所示。

传统的页面编辑界面中，用户进行输出或者移动光标的时候，如果界面的可视区没有显示出光标、用户最新输入的内容，用户除非自己移动滚动条，否则用户无法看到自己输入的光标或者最新输入的内容。通过上述实施例的界面显示方法，在页面编辑界面中，用户进行元素操作时，如果被操作的元素超出界面的可视区，可自动移动相应的页面容器，通过移动页面容器，将被操作的元素移动到界面的可视区中，无需用户操作滚动条，有利于提高页面容器编辑效率。

根据本发明的一个实施例，在移动页面容器的过程中，还同步移动界面中的第一目标控件；第一目标控件是用于控制页面容器移动的控件。在页面编辑界面中，还提供有用于控制所述页面容器移动的控件，例如图1A～1C中的水平滚动条102和竖直滚动条101，在移动页面容器300的过程中，还会同步移动界面中的水平滚动条102和/或竖直滚动条101。传统方式下用户移动水平滚动条102和/或竖直滚动条101，以使页面容器300做相应的移动，本发明实施例中，无需用户操作水平滚动条102和/或竖直滚动条101，便能自动移动页面容器300，并且保证页面容器300的移动与滚动条的移动相适应，例如，当页面容器300向下移动时，竖直滚动条101向上移动；当页面容器300向左移动时，水平滚动条102向右移动。其中，水平滚动条102用于控制页面容器300在所述界面的可视区200的水平方向上移动；竖直滚动条101用于控制页面容器300在所述界面的可视区200的竖直方向上移动。例如上述图3A～3C的场景，用户在元素操作过程中，页面容器300自动移动，同时自适应地移动界面中的水平滚动条102，让用户在可视区200看到完整的元素内容。

进一步地，当目标元素完全显示在界面的可视区200中，或者第一目标控件移动到边界处时，则停止移动目标元素所在的页面容器，以及页面容器对应的第一目标控件。即是，在页面容器移动过程中，当用户关注的元素已经完全显示到界面的可视区200中时，或者页面容器所对应的滚动条已移动到滚动区的边界处时，则暂停移动页面容器以及相应的滚动条；通过两个停止条件，既能将用户关注的元素完全显示到界面的可视区200，又能防止页面容器过多移动。

根据本发明的一个实施例，移动页面容器的情形包括：在界面的水平方向上移动页面容器，在界面的竖直方向上移动页面容器，或者在界面的水平方向以及竖直方向上均移动页面容器三种情形。具体为：在界面的水平方向上，若目标元素的对应区域有超出界面的可视区200，则水平移动页面容器，并同步水平移动水平控件(例如水平滚动条)；在界面的竖直方向上，若目标元素有超出界面的可视区200，则竖直移动页面容器，并同步竖直移动竖直控件(例如竖直滚动条)；在界面的水平和竖直方向上，若目标元素均有超出界面的可视区200，则既水平移动页面容器，又竖直移动页面容器，并同步移动水平控件/竖直控件。

当既需要水平移动页面容器，又需要竖直移动页面容器的情况下，可根据页面容器水平移动的距离和竖直移动的距离，计算页面容器的整体移动方向和该方向上的整体移动距离，然后移动页面容器，无需分两步移动页面容器，提高页面容器调整的效率。

进一步地，为了方便移动页面容器，将用户当前关注的元素(即目标元素)所在区域定义为元素热区，通过计算元素热区与界面的可视区200在水平方向/竖直方向上的距离，根据该距离水平/竖直移动页面容器。用户当前关注的元素包括用户输入的内容、移动的光标、或者是对一个元素进行变形操作得到的元素。

下面将界面的可视区200、页面容器、元素热区均假设为矩形，对移动页面容器的具体实现方式进行说明。

根据本发明一个实施例，以界面的可视区200的左上角顶点为原点，建立右手坐标系。基于该坐标系，用户进行元素操作之后，得到元素热区301，元素热区301的情况可能是：元素热区301在X轴方向上未完全显示在界面的可视区200(如图6A～图6C所示)，元素热区301在Y轴方向上未完全显示在界面的可视区200(如图7A～图7C所示)。

当元素热区301在X轴方向上未完全显示在界面的可视区200时，分别计算元素热区301的左右边与界面的可视区200的左右边的距离，距离计算使用元素热区301的左右边所在的横坐标，减去界面的可视区200的左右边的横坐标。例如：如图6A所示，用页面容器300中的元素热区301的左侧边的横坐标，减去界面的可视区200的左侧边的横坐标，得到元素热区301与界面的可视区200的左侧的距离；如图6B所示，用页面容器300中的元素热区301的右侧边的横坐标，减去界面的可视区200的右侧边的横坐标，得到元素热区301与界面的可视区200的右侧的距离。

进一步地，当左侧的距离小于零时，可设置页面容器300在X轴方向向右侧移动的距离等于所述左侧的距离的绝对值；当计算得到的右侧的距离大于零时，设置页面容器300在X轴方向向左移动的距离等于右侧的距离。只有左侧的距离小于零、右侧的距离大于零两个条件中只存在一个条件成立时，才进行页面容器300在X轴方向的移动。

若两个条件都满足的情况，即图6C所示的情况，由于在页面容器300中，元素热区301在X轴方向的宽度大于界面的可视区200在X轴方向的宽度，设置页面容器300在X轴方向的移动距离为0，即无需在X轴方向移动页面容器300。

若两个条件都不满足的情况，即图6D所示的情况，由于在页面容器300中元素热区301在界面的可视区200内，因此也无需移动页面容器300。

基于上述实施例，若满足水平移动条件，则水平移动目标元素所在的页面容器，即在X轴方向上，若元素热区301的左侧或者右侧超出界面的可视区，则在X轴方向移动目标元素所在的页面容器300。

当在页面容器300中，元素热区301在Y轴方向上未完全显示在界面的可视区时，分别计算元素热区301的上下边与界面的可视区200的上下边的距离，距离计算使用元素热区301的上下边的纵坐标，减去界面的可视区200的上下边的纵坐标，例如：图7A中，用页面容器300中的元素热区301的下侧边的纵坐标，减去界面的可视区200的下侧边的纵坐标，得到元素热区301与界面的可视区200的下侧的距离；图7B中，用元素热区301的上侧边的纵坐标，减去界面的可视区200的上侧边的纵坐标，得到元素热区301与界面的可视区200的上侧的距离。

进一步地，当计算得到的上侧的距离小于零时，可设置页面容器300竖直向下移动的距离等于上侧的距离的绝对值；当计算得到的下侧的距离大于零时，设置页面容器300竖直向上移动的距离等于下侧的距离。只有在上侧的距离小于零、下侧的距离大于零两个条件中只存在一个条件成立时，才进行页面容器300的竖直移动。

若两个条件都满足的情况，即图7C所示的情况，由于元素热区301在Y轴方向的宽度大于界面的可视区200在Y轴方向的宽度，设置页面容器300在Y轴方向的移动距离为0，即无需在Y轴方向移动页面容器300。

若两个条件都不满足的情况，即图7D所示的情况，元素热区301在界面的可视区200内，因此无需移动页面容器300。

上述实施例，若满足竖直移动条件，则竖直移动目标元素所在的页面容器300，即在Y轴方向上，元素热区301的上侧或者下侧超出界面的可视区200，则在Y轴方向移动目标元素所在的页面容器300。

根据本发明一个实施例，当用户操作的元素所在的页面容器并非底层容器时，必要时，还可以对界面中的多个页面容器进行移动。例如，图8A所示，页面编辑界面100的底层画布之上包含多层容器，具体包含被编辑的页面容器300以及添加到页面中的古诗词容器400。页面容器300是古诗词容器400的下层容器，古诗词容器400是页面容器300的上层容器；下层容器对应的目标控件为控件101以及控件102；上层容器对应的目标控件为控件401。若用户操作古诗词容器400中的元素，得到元素热区402，且元素热区402超出界面的可视区200，则首先移动古诗词容器400(在图8A的场景下，移动方向为竖直向上移动)，并同步移动控件401。

当控件401移动到边界时，界面效果如图8B所示。由于此时元素热区402仍然超出界面的可视区200中，则获取古诗词容器400的下层容器，即页面容器300，由于页面容器300并非底层画布，因此可以进一步移动页面容器300，移动方向为使得元素热区402向界面的可视区200中心靠近的方向(在图8B的场景下，移动方向为竖直向上移动)。页面容器300移动过程中，古诗词容器400与页面容器300的相对位置保持不变。在页面容器300移动过程中，还可以同步移动控件101以及控件102。当元素热区402完全显示在界面的可视区200中，或者控件101以及控件102均移动到边界处时，停止移动页面容器300，并停止移动控件101以及控件102；移动后的效果如图8C所示。

通过上述实施例，必要时可以对界面中的多层容器进行联动，进一步保证用户关注的页面元素显示到页面的可视区中。可以理解的是，在多层容器进行联动过程中，上层容器的控件移动到边界时，即触发下层容器移动，对于用户而言，该过程可以时流畅的，没有明显的卡顿；当然，也可以是上层容器的控件移动到边界时，暂停设定时长，再触发下层容器移动，便于用户观察到不同页面容器的移动效果。

根据本发明一实施例中，在元素热区完全显示在界面的可视区200之后，还包括步骤：重新计算一次压缩空间，压缩空间指的是对底层容器与界面的可视区200之间的空白空间进行压缩，让底层容器尽可能在界面的可视区200中显示。例如，在元素热区完全显示在界面的可视区200之后，获取所述界面中最底层的页面容器，作为底层容器，获取已添加到底层容器中的全部元素；确定界面热区，首先确定包含添加到底层容器的所有元素的矩形，得到一个大的矩形，将该大的矩形与底层容器本身对应的矩形叠加，确定一个矩形区域，将其记为界面热区。

在一些场景下，确定界面热区时，可定义矩形用(P1，P2)表示，其中P1＝(x1，y1)、P2＝(x2，y2)分别是一个矩形的两个顶点，同时满足P1.x1＜P2.x2∪P1.y1＜P2.y2；因为坐标是以界面的可视区200的左上角为原点，界面的可视区的左上角是P1，界面的可视区的右下角是P2，依靠这两个点可以表示一个矩形。

假设已添加到底层容器中的所有元素的矩形的集合为r，通过下面的算法，得到所有元素对应的矩形R0为：

R0＝CP1，P2)＝((x1，y1)，(x2，y2))

＝((min(r.P1.x1)，min(r.P1.y1))，(max(r，P2.x2)，max(r.P2.y2)))

将底层容器对应的矩形R_s和所有元素对应的矩形R0合并，可得到界面热区的矩形R为：

R

＝((min(R0.x1，R_s.x1)，min(R0.y1，R_s.y1))，(max(R0.x2，R_s.x2)，max(R0.y2，R_s.y2)))

如图9A所示，界面中的底层容器300的元素热区301完全显示在可视区200中，此时可得到界面热区的矩形，可以看到，界面热区的矩形未完全显示在界面的可视区200中，参照上述对元素热区进行移动的条件判定，可以确定出界面热区的矩形需要水平向右移动，及需要水平向右移动底层容器300。如图9B所示，底层容器300水平向右移动之后，当界面热区已完全显示在界面的可视区200中，则停止移动底层容器300。

上述实施例，通过底层容器300移动，带动底层容器300上的元素的移动，实现界面热区移动的效果。

进一步地，根据本发明一个实施例，在移动底层容器300之后，还包括：在界面的可视区200中，将界面热区以居中方式显示。即图9B中，界面热区虽然能够完全显示在界面的可视区200，但是没有居中显示，针对该情况，进一步移动底层容器300，直到界面热区在界面的可视区200中居中显示，显示效果如图9C所示。

应该理解的是，对于前述的各方法实施例，虽然流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，方法实施例的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

基于与上述实施例中的界面显示方法相同的思想，本文还提供了界面显示装置的实施例；本发明实施例中，界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定。

在一个实施例中，如图10所示，界面显示装置包括：

显示模块501，用于显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定。

指令接收模块502，用于接收元素操作指令；

元素确定模块503，用于响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；

容器移动模块504，用于当所述目标元素超出所述界面的可视区时，移动页面容器，使得所述目标元素向所述界面的可视区中心靠近；所述页面容器为所述目标元素所在的页面容器，在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。

进一步地，在一个实施例中，所述界面显示装置还包括：控件移动模块，用于在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。

进一步地，在一个实施例中，所述界面显示装置还包括：移动控制模块，用于当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器以及所述第一目标控件。

在一个实施例中，所述第一目标控件包括水平滚动条和/或竖直滚动条；所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动；所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。

在一个实施例中，所述容器移动模块504具体包括：

第一移动单元，用于在所述水平方向上，若所述目标元素超出所述界面的可视区，水平移动所述页面容器；

第二移动单元，用于在所述竖直方向上，若所述目标元素超出所述界面的可视区，竖直移动所述页面容器。

在一个实施例中，所述第一移动单元，具体用于将所述目标元素所在区域，确定为元素热区；获取所述元素热区与所述界面的可视区在所述水平方向上的第一距离；水平移动所述页面容器；所述页面容器被水平移动的位移与所述第一距离相应。

在一个实施例中，所述第二移动单元，具体用于将所述目标元素所在区域，确定为元素热区；获取所述元素热区与所述界面的可视区在所述竖直方向上的第二距离；竖直移动所述页面容器；所述页面容器被竖直移动的位移与所述第二距离相应。

在一个实施例中，所述界面的可视区、所述页面容器、所述元素热区均为矩形。

进一步地，在一个实施例中，所述界面显示装置还包括：移动判断模块，用于根据所述元素热区与所述界面的可视区的相对位置，判断是否满足水平移动条件/竖直移动条件；若满足所述水平移动条件，通知第一移动单元，以水平移动所述页面容器；若满足所述竖直移动条件，通知第二移动单元，以竖直移动所述页面容器。

在一个实施例中，所述水平移动条件为，在所述水平方向上，所述元素热区的左侧或者右侧超出所述界面的可视区；所述竖直移动条件为，在所述竖直方向上，所述元素热区的上侧或者下侧超出所述界面的可视区。

进一步地，在一个实施例中，所述界面显示装置还包括：

下层容器获取模块，用于在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；

下层容器判断模块，用于判断所述下层容器是否为底层画布；

下层容器移动模块，用于若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。

关于智能终端跟踪拍摄的装置的具体限定可以参见上文中对于智能终端跟踪拍摄的方法的限定，在此不再赘述。上述智能终端跟踪拍摄的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

此外，上述示例的智能终端跟踪拍摄的装置的实施方式中，各程序模块的逻辑划分仅是举例说明，实际应用中可以根据需要，例如出于相应硬件的配置要求或者软件的实现的便利考虑，将上述功能分配由不同的程序模块完成，即将所述智能终端跟踪拍摄的装置的内部结构划分成不同的程序模块，以完成以上描述的全部或者部分功能。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图11所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种智能终端跟踪拍摄的方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图11中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括显示器、存储器和处理器，显示器用于显示页面编辑编辑；所述存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：控制显示器显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；接收所述页面容器中的元素操作指令；响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：移动所述页面容器之后，当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器以及所述第一目标控件。

在一个实施例中，所述第一目标控件包括水平滚动条和/或竖直滚动条；所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动；所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述水平方向上，若所述目标元素超出所述界面的可视区，水平移动所述页面容器，并水平移动所述水平控件；在所述竖直方向上，若所述目标元素超出所述界面的可视区，竖直移动所述页面容器，并竖直移动所述竖直控件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：将所述目标元素所在区域，确定为元素热区；获取所述元素热区与所述界面的可视区在所述水平方向/竖直方向上的距离；水平/竖直移动所述页面容器；所述页面容器被水平/竖直移动的位移与所述距离相应。

在一个实施例中，所述界面的可视区、所述页面容器、所述元素热区均为矩形。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：根据所述元素热区与所述界面的可视区的相对位置，判断是否满足水平移动条件/竖直移动条件；若满足所述水平移动条件，水平移动所述页面容器；若满足所述竖直移动条件，竖直移动所述页面容器。

在一个实施例中，所述水平移动条件为，在所述水平方向上，所述元素热区的左侧或者右侧超出所述界面的可视区；所述竖直移动条件为，在所述竖直方向上，所述元素热区的上侧或者下侧超出所述界面的可视区。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；判断所述下层容器是否为底层画布；若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述下层容器移动过程中，移动第二目标控件；所述第二目标控件为用于控制所述下层容器移动的控件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：当所述目标元素完全显示在所述界面的可视区中时，或者所述第二目标控件移动到边界处时，停止移动所述下层容器以及所述第二目标控件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：当所述目标元素完全显示在所述界面的可视区中之后，获取所述界面中最底层的页面容器，作为底层容器；确定界面热区；所述界面热区为包含所述底层容器以及已添加到所述底层容器中的全部元素的最小外包矩形区域；若所述界面热区超出所述界面的可视区，移动所述底层容器，移动方向为使得所述界面热区向着所述界面的可视区的中心靠近的方向。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述界面的可视区中，将所述界面热区以居中方式显示。

在一个实施例中，所述页面容器中的元素操作指令包括：向所述页面容器中新增元素的操作指令、编辑所述页面容器中已有元素的操作中的至少一种。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：使得所述页面容器的显示颜色不同于所述界面的可视区的显示颜色。

在一个实施例中，所述目标元素包括：光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；接收页面容器中的元素操作指令；响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。其中，所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定。

在一个实施例中，计算机程序被处理器执行时还实现以下上述界面显示方法的其他实施例中的相关步骤。

在一个实施例中，所述页面容器中的元素操作指令包括：向所述页面容器中新增元素的操作指令、编辑所述页面容器中已有元素的操作中的至少一种。

在一个实施例中，计算机程序被处理器执行时还能实现，使得所述页面容器的显示颜色不同于所述界面的可视区的显示颜色。

在一个实施例中，所述目标元素包括：光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。

本文实施例的术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或(模块)单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本文中提及的“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。文本“/”一般表示前后关联对象是一种“或”的关系。

在本文中提及的“第一\第二”仅仅是是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二”在允许的情况下可以互换特定的顺序或先后次序。应该理解“第一\第二”区分的对象在适当情况下可以互换，以使这里描述的实施例能够以除了在这里图示或描述的那些以外的顺序实施。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (23)

1.一种界面显示方法，其特征在于，包括：

显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；所述页面容器相对于所述可视区可移动；

接收所述页面容器中的元素操作指令；

响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；

当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。

2.根据权利要求1所述的方法，其特征在于，还包括：

在所述页面容器移动过程中，移动第一目标控件；

所述第一目标控件为用于控制所述页面容器移动的控件。

3.根据权利要求2所述的方法，其特征在于，所述移动所述页面容器的步骤之后，还包括：

当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器。

4.根据权利要求2所述的方法，其特征在于，所述第一目标控件包括水平滚动条和/或竖直滚动条；

所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动；

所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。

5.根据权利要求4所述的方法，其特征在于，所述移动所述页面容器的步骤，包括：

在所述水平方向上，若所述目标元素超出所述界面的可视区，水平移动所述页面容器，并水平移动所述水平滚动条；

在所述竖直方向上，若所述目标元素超出所述界面的可视区，竖直移动所述页面容器，并竖直移动所述竖直滚动条。

6.根据权利要求5所述的方法，其特征在于，所述水平/竖直移动所述页面容器的步骤，包括：

将所述目标元素所在区域，确定为元素热区；

获取所述元素热区与所述界面的可视区在所述水平方向/竖直方向上的距离；

水平/竖直移动所述页面容器；所述页面容器被水平/竖直移动的位移与所述距离相应。

7.根据权利要求6所述的方法，其特征在于，所述界面的可视区、所述页面容器、所述元素热区均为矩形。

8.根据权利要求7所述的方法，其特征在于，还包括：

根据所述元素热区的矩形与所述界面的可视区的矩形相对位置，判断是否满足水平移动条件/竖直移动条件；

若满足所述水平移动条件，水平移动所述页面容器；

若满足所述竖直移动条件，竖直移动所述页面容器。

9.根据权利要求8所述的方法，其特征在于，

所述水平移动条件为，在所述水平方向上，所述元素热区的左侧或者右侧超出所述界面的可视区；

所述竖直移动条件为，在所述竖直方向上，所述元素热区的上侧或者下侧超出所述界面的可视区。

10.根据权利要求3所述的方法，其特征在于，还包括：

在所述第一目标控件移动到边界之后，若所述目标元素仍超出所述界面的可视区，获取所述页面容器的下层容器；

判断所述下层容器是否为底层画布；

若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。

11.根据权利要求10所述的方法，其特征在于，还包括：

在所述下层容器移动过程中，移动第二目标控件；

所述第二目标控件为用于控制所述下层容器移动的控件。

12.根据权利要求11所述的方法，其特征在于，还包括：

当所述目标元素完全显示在所述界面的可视区中时，或者所述第二目标控件移动到边界处时，停止移动所述下层容器。

13.根据权利要求1至12任一所述的方法，其特征在于，还包括：

当所述目标元素完全显示在所述界面的可视区中之后，获取所述界面中最底层的页面容器，作为底层容器；

确定界面热区；所述界面热区为包含所述底层容器以及已添加到所述底层容器中的全部元素的最小外包矩形区域；

若所述界面热区超出所述界面的可视区，移动所述底层容器，移动方向为使得所述界面热区向着所述界面的可视区的中心靠近的方向。

14.根据权利要求13所述的方法，其特征在于，所述移动所述底层容器的步骤之后，还包括：

在所述界面的可视区中，将所述界面热区以居中方式显示。

15.根据权利要求1所述的方法，其特征在于，所述页面容器中的元素操作指令包括：

向所述页面容器中新增元素的操作指令、编辑所述页面容器中已有元素的操作中的至少一种。

16.根据权利要求1所述的方法，其特征在于，

所述页面容器的显示颜色不同于所述界面的可视区的显示颜色。

17.根据权利要求1所述的方法，其特征在于，所述目标元素包括：光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。

18.一种界面显示装置，其特征在于，包括：

显示模块，用于显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；所述页面容器相对于所述可视区可移动；

指令接收模块，用于接收元素操作指令；

元素确定模块，用于响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；

容器移动模块，用于当所述目标元素超出所述界面的可视区时，移动页面容器，使得所述目标元素向所述界面的可视区中心靠近；所述页面容器为所述目标元素所在的页面容器，在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。

19.根据权利要求18所述的装置，其特征在于，还包括：

控件移动模块，用于在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。

20.根据权利要求19所述的装置，其特征在于，还包括：

移动控制模块，用于当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器。

21.根据权利要求20所述的装置，其特征在于，还包括：

下层容器获取模块，用于在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；

下层容器判断模块，用于判断所述下层容器是否为底层画布；

下层容器移动模块，用于若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。

22.一种计算机设备，包括显示器、存储器和处理器，其特征在于，所述显示器用于显示页面编辑界面；所述存储器存储有计算机程序；所述处理器执行所述程序时实现权利要求1至17任一所述方法的步骤。

23.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1至17任一所述方法的步骤。

Images