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

《界面显示方法、装置、计算机设备和存储介质.pdf》由会员分享，可在线阅读，更多相关《界面显示方法、装置、计算机设备和存储介质.pdf（36页完成版）》请在专利查询网上搜索。

1、(19)中华人民共和国国家知识产权局 (12)发明专利申请 (10)申请公布号 (43)申请公布日 (21)申请号 201910121000.X (22)申请日 2019.02.19 (71)申请人 广州视源电子科技股份有限公司 地址 510530 广东省广州市黄埔区云埔四 路6号 申请人 广州视睿电子科技有限公司 (72)发明人 林德熙 (74)专利代理机构 广州华进联合专利商标代理 有限公司 44224 代理人 冯右明 (51)Int.Cl. G06F 9/451(2018.01) (54)发明名称 界面显示方法、 装置、 计算机设备和存储介 质 (57)摘要 本发明涉及界面显示方法、 装。

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

3、1.一种界面显示方法， 其特征在于， 包括： 显示界面的可视区； 所述界面的可视区中包括用于容纳元素的页面容器， 所述页面容 器的形状固定； 接收所述页面容器中的元素操作指令； 响应所述操作指令， 确定目标元素； 所述目标元素为被所述操作指令操作的元素； 当所述目标元素超出所述界面的可视区时， 移动所述页面容器， 移动方向为使得所述 目标元素向所述界面的可视区的中心靠近； 在所述页面容器移动过程中， 所述目标元素在 所述页面容器中的位置保持不变。 2.根据权利要求1所述的方法， 其特征在于， 还包括： 在所述页面容器移动过程中， 移动第一目标控件； 所述第一目标控件为用于控制所述页面容器移动的。

4、控件。 3.根据权利要求2所述的方法， 其特征在于， 所述移动所述页面容器的步骤之后， 还包 括： 当所述目标元素完全显示在所述界面的可视区中时， 或者所述第一目标控件移动到边 界处时， 停止移动所述页面容器。 4.根据权利要求2所述的方法， 其特征在于， 所述第一目标控件包括水平滚动条和/或 竖直滚动条； 所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动； 所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。 5.根据权利要求4所述的方法， 其特征在于， 所述移动所述页面容器的步骤， 包括： 在所述水平方向上， 若所述目标元素超出所述界面的可视区， 水平。

5、移动所述页面容器， 并水平移动所述水平控件； 在所述竖直方向上， 若所述目标元素超出所述界面的可视区， 竖直移动所述页面容器， 并竖直移动所述竖直控件。 6.根据权利要求5所述的方法， 其特征在于， 所述水平/竖直移动所述页面容器的步骤， 包括： 将所述目标元素所在区域， 确定为元素热区； 获取所述元素热区与所述界面的可视区在所述水平方向/竖直方向上的距离； 水平/竖直移动所述页面容器； 所述页面容器被水平/竖直移动的位移与所述距离相 应。 7.根据权利要求6所述的方法， 其特征在于， 所述界面的可视区、 所述页面容器、 所述元 素热区均为矩形。 8.根据权利要求7所述的方法， 其特征在于， 。

6、还包括： 根据所述元素热区的矩形与所述界面的可视区的矩形相对位置， 判断是否满足水平移 动条件/竖直移动条件； 若满足所述水平移动条件， 水平移动所述页面容器； 若满足所述竖直移动条件， 竖直移动所述页面容器。 9.根据权利要求8所述的方法， 其特征在于， 所述水平移动条件为， 在所述水平方向上， 所述元素热区的左侧或者右侧超出所述界 权利要求书 1/3 页 2 CN 109901902 A 2 面的可视区； 所述竖直移动条件为， 在所述竖直方向上， 所述元素热区的上侧或者下侧超出所述界 面的可视区。 10.根据权利要求3所述的方法， 其特征在于， 还包括： 在所述第一目标控件移动到边界之后，。

7、 若所述目标元素仍超出所述界面的可视区， 获 取所述页面容器的下层容器； 判断所述下层容器是否为底层画布； 若否， 移动所述下层容器， 移动方向为使得所述目标元素向所述界面的可视区中心靠 近； 所述下层容器移动过程中， 所述页面容器与所述下层容器的相对位置保持不变。 11.根据权利要求10所述的方法， 其特征在于， 还包括： 在所述下层容器移动过程中， 移动第二目标控件； 所述第二目标控件为用于控制所述下层容器移动的控件。 12.根据权利要求11所述的方法， 其特征在于， 还包括： 当所述目标元素完全显示在所述界面的可视区中时， 或者所述第二目标控件移动到边 界处时， 停止移动所述下层容器。 。

8、13.根据权利要求1至12任一所述的方法， 其特征在于， 还包括： 当所述目标元素完全显示在所述界面的可视区中之后， 获取所述界面中最底层的页面 容器， 作为底层容器； 确定界面热区； 所述界面热区为包含所述底层容器以及已添加到所述底层容器中的全 部元素的最小外包矩形区域； 若所述界面热区超出所述界面的可视区， 移动所述底层容器， 移动方向为使得所述界 面热区向着所述界面的可视区的中心靠近的方向。 14.根据权利要求13所述的方法， 其特征在于， 所述移动所述底层容器的步骤之后， 还 包括： 在所述界面的可视区中， 将所述界面热区以居中方式显示。 15.根据权利要求1所述的方法， 其特征在于，。

9、 所述页面容器中的元素操作指令包括： 向所述页面容器中新增元素的操作指令、 编辑所述页面容器中已有元素的操作中的至 少一种。 16.根据权利要求1所述的方法， 其特征在于， 所述页面容器的显示颜色不同于所述界面的可视区的显示颜色。 17.根据权利要求1所述的方法， 其特征在于， 所述目标元素包括： 光标、 文本、 表格、 图 形、 多媒体文件、 思维导图、 上层容器中的至少一种。 18.一种界面显示装置， 其特征在于， 包括： 显示模块， 用于显示界面的可视区； 所述界面的可视区中包括用于容纳元素的页面容 器， 所述页面容器的形状固定； 指令接收模块， 用于接收元素操作指令； 元素确定模块， 。

10、用于响应所述操作指令， 确定目标元素； 所述目标元素为被所述操作指 令操作的元素； 容器移动模块， 用于当所述目标元素超出所述界面的可视区时， 移动页面容器， 使得所 权利要求书 2/3 页 3 CN 109901902 A 3 述目标元素向所述界面的可视区中心靠近； 所述页面容器为所述目标元素所在的页面容 器， 在所述页面容器移动过程中， 所述目标元素在所述页面容器中的位置保持不变。 19.根据权利要求18所述的装置， 其特征在于， 还包括： 控件移动模块， 用于在所述页面容器移动过程中， 移动第一目标控件； 所述第一目标控 件为用于控制所述页面容器移动的控件。 20.根据权利要求19所述的。

11、装置， 其特征在于， 还包括： 移动控制模块， 用于当所述目标元素完全显示在所述界面的可视区中时， 或者所述第 一目标控件移动到边界处时， 停止移动所述页面容器。 21.根据权利要求20所述的装置， 其特征在于， 还包括： 下层容器获取模块， 用于在所述第一目标控件移动到边界之后， 若所述目标元素仍然 超出所述界面的可视区， 获取所述页面容器的下层容器； 下层容器判断模块， 用于判断所述下层容器是否为底层画布； 下层容器移动模块， 用于若否， 移动所述下层容器， 移动方向为使得所述目标元素向所 述界面的可视区中心靠近； 所述下层容器移动过程中， 所述页面容器与所述下层容器的相 对位置保持不变。。

12、 22.一种计算机设备， 包括显示器、 存储器和处理器， 其特征在于， 所述显示器用于显示 页面编辑界面； 所述存储器存储有计算机程序； 所述处理器执行所述程序时实现权利要求1 至17任一所述方法的步骤。 23.一种计算机可读存储介质， 其上存储有计算机程序， 其特征在于， 该程序被处理器 执行时实现权利要求1至17任一所述方法的步骤。 权利要求书 3/3 页 4 CN 109901902 A 4 界面显示方法、 装置、 计算机设备和存储介质 技术领域 0001 本发明涉及图形用户界面技术领域， 特别是涉及界面显示方法、 界面显示装置、 计 算机设备和存储介质。 背景技术 0002 常见的用于。

13、页面编辑的图形用户界面(也称作 “页面编辑界面” )中包括的处于编 辑状态的页面， 该页面也称作页面容器， 用户可以向该页面容器中添加文字、 图片、 多媒体 文件等元素， 例如PPT编辑界面； 在保存之后， 可以将该页面容器以及添加到该页面容器中 的全部元素作为一个整体图像进行显示。 0003 在实现本发明的过程中， 发明人发现现有技术中存在如下问题： 在页面编辑界面 中， 用户向页面容器中添加文本等元素或者移动光标元素时， 如果添加的元素或者移动后 的光标超出界面的可视区， 用户将无法看到自己最新添加的元素或者移动后的光标； 针对 这种情况， 目前解决办法是， 用户通过操作界面中的滚动条移动。

14、页面容器， 以将最新添加的 元素或者移动后的光标显示到界面的可视区内， 然而该方法存在页面容器编辑效率低的问 题。 发明内容 0004 基于此， 有必要针对上述页面编辑界面存在的问题， 提供一种界面显示方法、 界面 显示装置、 计算机设备和存储介质。 0005 一方面， 本发明实施例提供一种界面显示方法， 包括： 0006 显示界面的可视区； 所述界面的可视区中包括用于容纳元素的页面容器， 所述页 面容器的形状固定； 0007 接收所述页面容器中的元素操作指令； 0008 响应所述操作指令， 确定目标元素； 所述目标元素为被所述操作指令操作的元素； 0009 当所述目标元素超出所述界面的可视区。

15、时， 移动所述页面容器， 移动方向为使得 所述目标元素向所述界面的可视区的中心靠近； 在所述页面容器移动过程中， 所述目标元 素在所述页面容器中的位置保持不变。 0010 在一个实施例中， 还包括： 在所述页面容器移动过程中， 移动第一目标控件； 所述 第一目标控件为用于控制所述页面容器移动的控件。 0011 在一个实施例中， 所述移动所述页面容器的步骤之后， 还包括： 0012 当所述目标元素完全显示在所述界面的可视区中时， 或者所述第一目标控件移动 到边界处时， 停止移动所述页面容器以及所述第一目标控件。 0013 在一个实施例中， 所述第一目标控件包括水平滚动条和/或竖直滚动条； 001。

16、4 所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动； 所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。 0015 在一个实施例中， 所述移动所述页面容器的步骤， 包括： 说明书 1/14 页 5 CN 109901902 A 5 0016 在所述水平方向上， 若所述目标元素超出所述界面的可视区， 水平移动所述页面 容器， 并水平移动所述水平控件； 0017 在所述竖直方向上， 若所述目标元素超出所述界面的可视区， 竖直移动所述页面 容器， 并竖直移动所述竖直控件。 0018 在一个实施例中， 水平/竖直移动所述页面容器的步骤， 包括： 0019 将所。

17、述目标元素所在区域， 确定为元素热区； 获取所述元素热区与所述界面的可 视区在所述水平方向/竖直方向上的距离； 0020 水平/竖直移动所述页面容器； 所述页面容器被水平/竖直移动的位移与所述距离 相应。 0021 在一个实施例中， 所述界面的可视区、 所述页面容器、 所述元素热区均为矩形。 0022 在一个实施例中， 还包括： 根据所述元素热区与所述界面的可视区的相对位置， 判 断是否满足水平移动条件/竖直移动条件； 若满足所述水平移动条件， 水平移动所述页面容 器； 若满足所述竖直移动条件， 竖直移动所述页面容器。 0023 在一个实施例中， 所述水平移动条件为， 在所述水平方向上， 所述。

18、元素热区的左侧 或者右侧超出所述界面的可视区； 所述竖直移动条件为， 在所述竖直方向上， 所述元素热区 的上侧或者下侧超出所述界面的可视区。 0024 在一个实施例中， 还包括： 在所述第一目标控件移动到边界之后， 若所述目标元素 仍然超出所述界面的可视区， 获取所述页面容器的下层容器； 0025 判断所述下层容器是否为底层画布； 0026 若否， 移动所述下层容器， 移动方向为使得所述目标元素向所述界面的可视区中 心靠近； 所述下层容器移动过程中， 所述页面容器与所述下层容器的相对位置保持不变。 0027 在一个实施例中， 还包括： 在所述下层容器移动过程中， 移动第二目标控件； 所述 第二。

19、目标控件为用于控制所述下层容器移动的控件。 0028 在一个实施例中， 还包括： 当所述目标元素完全显示在所述界面的可视区中时， 或 者所述第二目标控件移动到边界处时， 停止移动所述下层容器以及所述第二目标控件。 0029 在一个实施例中， 还包括： 当所述目标元素完全显示在所述界面的可视区中之后， 获取所述界面中最底层的页面容器， 作为底层容器； 0030 确定界面热区； 所述界面热区为包含所述底层容器以及已添加到所述底层容器中 的全部元素的最小外包矩形区域； 0031 若所述界面热区超出所述界面的可视区， 移动所述底层容器， 移动方向为使得所 述界面热区向着所述界面的可视区的中心靠近的方向。

20、。 0032 在一个实施例中， 在移动所述底层容器之后， 还包括： 在所述界面的可视区中， 将 所述界面热区以居中方式显示。 0033 在一个实施例中， 所述页面容器中的元素操作指令包括： 向所述页面容器中新增 元素的操作指令、 编辑所述页面容器中已有元素的操作中的至少一种。 0034 在一个实施例中， 所述页面容器的显示颜色不同于所述界面的可视区的显示颜 色。 0035 在一个实施例中， 所述目标元素包括： 光标、 文本、 表格、 图形、 多媒体文件、 思维导 图、 上层容器中的至少一种。 说明书 2/14 页 6 CN 109901902 A 6 0036 另一方面， 本发明实施例提供一种。

21、界面显示装置， 包括： 0037 显示模块， 用于显示界面的可视区； 所述界面的可视区中包括用于容纳元素的页 面容器， 所述页面容器的形状固定； 0038 指令接收模块， 用于接收元素操作指令； 0039 元素确定模块， 用于响应所述操作指令， 确定目标元素； 所述目标元素为被所述操 作指令操作的元素； 0040 容器移动模块， 用于当所述目标元素超出所述界面的可视区时， 移动页面容器， 使 得所述目标元素向所述界面的可视区中心靠近； 所述页面容器为所述目标元素所在的页面 容器， 在所述页面容器移动过程中， 所述目标元素在所述页面容器中的位置保持不变。 0041 在一个实施例中， 还包括： 控。

22、件移动模块， 用于在所述页面容器移动过程中， 移动 第一目标控件； 所述第一目标控件为用于控制所述页面容器移动的控件。 0042 在一个实施例中， 还包括： 移动控制模块， 用于当所述目标元素完全显示在所述界 面的可视区中时， 或者所述第一目标控件移动到边界处时， 停止移动所述页面容器。 0043 在一个实施例中， 还包括： 0044 下层容器获取模块， 用于在所述第一目标控件移动到边界之后， 若所述目标元素 仍然超出所述界面的可视区， 获取所述页面容器的下层容器； 0045 下层容器判断模块， 用于判断所述下层容器是否为底层画布； 0046 下层容器移动模块， 用于若否， 移动所述下层容器，。

23、 移动方向为使得所述目标元素 向所述界面的可视区中心靠近； 所述下层容器移动过程中， 所述页面容器与所述下层容器 的相对位置保持不变。 0047 再一方面， 本发明实施例提供一种计算机设备， 包括显示器、 存储器和处理器， 其 特征在于， 所述显示器用于显示页面编辑界面； 所述存储器存储有计算机程序； 所述处理器 执行所述程序时实现上述任一实施例的界面显示方法的步骤。 0048 再一方面， 本发明实施例提供一种计算机存储介质， 其上存储有计算机程序， 该程 序被处理器执行时实现如上述界面显示方法。 0049 上述技术方案中的一个技术方案具有如下优点或有益效果： 用户在编辑页面容器 时， 操作页。

24、面容器中的元素， 如果被操作的元素区域超出界面的可视区， 可自动移动元素所 在的页面容器， 通过自动移动页面容器， 将用户当前操作的元素移动到界面的可视区中显 示， 无需用户操作滚动条， 有利于提高页面容器编辑效率。 附图说明 0050 图1A为一个实施例中页面编辑界面的示意图； 0051 图1B为另一个实施例中页面编辑界面的示意图； 0052 图1C为另一个实施例中页面编辑界面的示意图； 0053 图1D为在页面容器中添加古诗词学科工具并保存后的显示效果示意图； 0054 图1E为图1A的页面编辑界面中页面容器保存后的显示效果示意图； 0055 图2为一实施例的界面显示方法的示意性流程图； 。

25、0056 图3A为一个实施例中页面编辑界面对页面容器文本操作之前的示意图； 0057 图3B为对图3A中的页面容器文本操作之后的示意图； 说明书 3/14 页 7 CN 109901902 A 7 0058 图3C为对图3B中界面移动页面容器之后的示意图； 0059 图4A为一个实施例中页面编辑界面对页面容器图形操作之前的示意图； 0060 图4B为对图4A中的页面容器图形操作之后的示意图； 0061 图4C为对图4B中界面移动页面容器之后的示意图； 0062 图5A为一个实施例中页面编辑界面对页面容器窗口操作之前的示意图； 0063 图5B为对图5A中的页面容器窗口操作之后的示意图； 006。

26、4 图5C为对图5B中界面移动页面容器之后的示意图； 0065 图6A为一个实施例中元素热区相对于可视区在X方向的位置示意图； 0066 图6B为另一个实施例中元素热区相对于可视区在X方向的位置示意图； 0067 图6C为另一个实施例中元素热区相对于可视区在X方向的位置示意图； 0068 图6D为另一个实施例中元素热区相对于可视区在X方向的位置示意图； 0069 图7A为一个实施例中元素热区相对于可视区在Y方向的位置示意图； 0070 图7B为另一个实施例中元素热区相对于可视区在Y方向的位置示意图； 0071 图7C为另一个实施例中元素热区相对于可视区在Y方向的位置示意图； 0072 图7D为。

27、另一个实施例中元素热区相对于可视区在Y方向的位置示意图； 0073 图8A为一个实施例中页面容器中添加有上层容器的示意图； 0074 图8B为图8A中的上层容器被操作之后的示意图； 0075 图8C为图8B中的界面中页面容器移动后的示意图； 0076 图9A为一个实施例中界面热区的示意图； 0077 图9B为图9A中的界面热区移动后的示意图； 0078 图9C为图9B中的界面热区居中显示后的示意图； 0079 图10为一实施例的界面显示装置的示意性结构图； 0080 图11为一个实施例中计算机设备的内部结构图。 具体实施方式 0081 为了使本发明的目的、 技术方案及优点更加清楚明白， 以下结。

28、合附图及实施例， 对 本发明进行进一步详细说明。 应当理解， 此处所描述的具体实施例仅仅用以解释本发明， 并 不用于限定本发明。 0082 在本文中提及 “实施例” 意味着， 结合实施例描述的特定特征、 结构或特性可以包 含在本申请的至少一个实施例中。 在说明书中的各个位置出现该短语并不一定均是指相同 的实施例， 也不是与其它实施例互斥的独立的或备选的实施例。 本领域技术人员显式地和 隐式地理解的是， 本文所描述的实施例可以与其它实施例相结合。 0083 本申请提供的界面显示方法， 可以应用于如图1A所示的页面编辑界面100中， 界面 的可视区200如图1A所示， 可视区200中显示有处于编辑。

29、状态的页面容器300； 页面容器300 的形状固定， 例如页面容器300可以为一个矩形； 此外， 页面容器300相对于可视区200可移 动， 例如图1B所示， 页面容器300可以相对于可视区200向左移动； 或者， 如图1C所示， 页面容 器300可以相对于可视区200向上移动。 0084 在实施例中， 参考图1A所示， 页面编辑界面100中还包括可选元素的类型201， 可选 元素的类型201可以包括文本、 形状、 多媒体、 表格、 思维导图以及其他工具。 其中， 其他工具 说明书 4/14 页 8 CN 109901902 A 8 可以根据具体应用场景设定。 0085 用户选中任意一个类型的。

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

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

32、法显示出来。 0087 本发明实施例中， 在处于编辑状态的页面容器300中， 用户操作的元素包括但不限 于光标、 文本、 表格、 图形、 多媒体文件、 思维导图、 上层容器。 其中， 文本既可以是文字， 还可 以是符号； 图形既可以是流程图、 几何图形， 又可以是普通的图片。 0088 进一步地， 在页面编辑界面100中， 还包括新建页面容器(即图1A中的 “新建页面” ) 和 “开始播放” 等控件； 当用户点击 “新建页面” 的控件时， 可以在界面的可视区200中显示一 个空白的页面容器； 当用户点击 “开始播放” 的控件时， 自动保存当前编辑的页面容器300， 并将页面容器300及元素作为。

33、一个整体显示出来。 0089 在一个实施例中， 基于上述的页面编辑界面， 如图2所示， 提供了一种界面显示方 法， 包括以下步骤： 0090 S100， 显示界面的可视区； 所述界面的可视区中包括用于容纳元素的页面容器， 所 述页面容器的形状固定。 0091 其中， 界面的可视区、 页面容器可参见上述实施例所述。 0092 S110， 接收页面容器中的元素操作指令。 0093 本发明实施例中， 页面容器中的元素操作指令， 可以是向所述页面容器中添加元 素的操作指令， 也可以是编辑所述页面容器中已有元素的操作指令。 其中， 向页面容器中添 加元素的操作指令， 可以是向页面容器中输入文本、 键入光。

34、标、 插入图形、 插入多媒体文件、 添加表格、 添加上层容器等操作指令。 其中， 编辑页面容器中已有元素的操作指令， 可以是 对已经添加到页面容器中的文本、 光标、 表格、 图形、 多媒体文件、 上层容器进行编辑的操作 指令， 例如： 对已经添加到页面容器中的文本的格式进行调整的操作指令， 对已经添加到页 面容器中的思维导图进行展开显示的操作指令， 或者对已经添加到页面容器中的上层容器 进行位置移动的操作指令。 0094 S120， 响应所述操作指令， 确定目标元素； 所述目标元素为被所述操作指令操作的 元素。 说明书 5/14 页 9 CN 109901902 A 9 0095 本发明实施例。

35、中， 目标元素指的是被所述操作指令操作之后的元素， 例如： 当用户 对页面容器中的文本的格式进行调整时， 对应的目标元素则为调整后的文本； 当用户对页 面容器中的思维导图进行展开操作时， 对应的目标元素则为展开后的思维导图； 当用户对 页面容器中的古诗词窗口进行移动时， 对应的目标元素则为移动后的古诗词窗口。 0096 其中， 目标元素可以包括光标、 文本、 表格、 图形、 多媒体文件、 思维导图、 上层容器 中的至少一种。 0097 S130， 当所述目标元素超出所述界面的可视区时， 移动所述页面容器(即用于容纳 所述目标元素的页面容器)， 移动方向为所述目标元素向所述界面的可视区的中心靠近。

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

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

38、效果如图5C所示。 0101 传统的页面编辑界面中， 用户进行输出或者移动光标的时候， 如果界面的可视区 没有显示出光标、 用户最新输入的内容， 用户除非自己移动滚动条， 否则用户无法看到自己 输入的光标或者最新输入的内容。 通过上述实施例的界面显示方法， 在页面编辑界面中， 用 户进行元素操作时， 如果被操作的元素超出界面的可视区， 可自动移动相应的页面容器， 通 过移动页面容器， 将被操作的元素移动到界面的可视区中， 无需用户操作滚动条， 有利于提 高页面容器编辑效率。 0102 根据本发明的一个实施例， 在移动页面容器的过程中， 还同步移动界面中的第一 目标控件； 第一目标控件是用于控制。

39、页面容器移动的控件。 在页面编辑界面中， 还提供有用 于控制所述页面容器移动的控件， 例如图1A1C中的水平滚动条102和竖直滚动条101， 在 移动页面容器300的过程中， 还会同步移动界面中的水平滚动条102和/或竖直滚动条101。 传统方式下用户移动水平滚动条102和/或竖直滚动条101， 以使页面容器300做相应的移 动， 本发明实施例中， 无需用户操作水平滚动条102和/或竖直滚动条101， 便能自动移动页 面容器300， 并且保证页面容器300的移动与滚动条的移动相适应， 例如， 当页面容器300向 下移动时， 竖直滚动条101向上移动； 当页面容器300向左移动时， 水平滚动条1。

40、02向右移动。 其中， 水平滚动条102用于控制页面容器300在所述界面的可视区200的水平方向上移动； 竖 直滚动条101用于控制页面容器300在所述界面的可视区200的竖直方向上移动。 例如上述 图3A3C的场景， 用户在元素操作过程中， 页面容器300自动移动， 同时自适应地移动界面 说明书 6/14 页 10 CN 109901902 A 10 中的水平滚动条102， 让用户在可视区200看到完整的元素内容。 0103 进一步地， 当目标元素完全显示在界面的可视区200中， 或者第一目标控件移动到 边界处时， 则停止移动目标元素所在的页面容器， 以及页面容器对应的第一目标控件。 即 是。

41、， 在页面容器移动过程中， 当用户关注的元素已经完全显示到界面的可视区200中时， 或 者页面容器所对应的滚动条已移动到滚动区的边界处时， 则暂停移动页面容器以及相应的 滚动条； 通过两个停止条件， 既能将用户关注的元素完全显示到界面的可视区200， 又能防 止页面容器过多移动。 0104 根据本发明的一个实施例， 移动页面容器的情形包括： 在界面的水平方向上移动 页面容器， 在界面的竖直方向上移动页面容器， 或者在界面的水平方向以及竖直方向上均 移动页面容器三种情形。 具体为： 在界面的水平方向上， 若目标元素的对应区域有超出界面 的可视区200， 则水平移动页面容器， 并同步水平移动水平控。

42、件(例如水平滚动条)； 在界面 的竖直方向上， 若目标元素有超出界面的可视区200， 则竖直移动页面容器， 并同步竖直移 动竖直控件(例如竖直滚动条)； 在界面的水平和竖直方向上， 若目标元素均有超出界面的 可视区200， 则既水平移动页面容器， 又竖直移动页面容器， 并同步移动水平控件/竖直控 件。 0105 当既需要水平移动页面容器， 又需要竖直移动页面容器的情况下， 可根据页面容 器水平移动的距离和竖直移动的距离， 计算页面容器的整体移动方向和该方向上的整体移 动距离， 然后移动页面容器， 无需分两步移动页面容器， 提高页面容器调整的效率。 0106 进一步地， 为了方便移动页面容器， 。

43、将用户当前关注的元素(即目标元素)所在区 域定义为元素热区， 通过计算元素热区与界面的可视区200在水平方向/竖直方向上的距 离， 根据该距离水平/竖直移动页面容器。 用户当前关注的元素包括用户输入的内容、 移动 的光标、 或者是对一个元素进行变形操作得到的元素。 0107 下面将界面的可视区200、 页面容器、 元素热区均假设为矩形， 对移动页面容器的 具体实现方式进行说明。 0108 根据本发明一个实施例， 以界面的可视区200的左上角顶点为原点， 建立右手坐标 系。 基于该坐标系， 用户进行元素操作之后， 得到元素热区301， 元素热区301的情况可能是： 元素热区301在X轴方向上未完。

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

45、01的右侧边的横坐标， 减去界面的可视区200的右侧边的横坐标， 得到元素热区301与界面 的可视区200的右侧的距离。 0110 进一步地， 当左侧的距离小于零时， 可设置页面容器300在X轴方向向右侧移动的 距离等于所述左侧的距离的绝对值； 当计算得到的右侧的距离大于零时， 设置页面容器300 在X轴方向向左移动的距离等于右侧的距离。 只有左侧的距离小于零、 右侧的距离大于零两 个条件中只存在一个条件成立时， 才进行页面容器300在X轴方向的移动。 说明书 7/14 页 11 CN 109901902 A 11 0111 若两个条件都满足的情况， 即图6C所示的情况， 由于在页面容器300。

46、中， 元素热区 301在X轴方向的宽度大于界面的可视区200在X轴方向的宽度， 设置页面容器300在X轴方向 的移动距离为0， 即无需在X轴方向移动页面容器300。 0112 若两个条件都不满足的情况， 即图6D所示的情况， 由于在页面容器300中元素热区 301在界面的可视区200内， 因此也无需移动页面容器300。 0113 基于上述实施例， 若满足水平移动条件， 则水平移动目标元素所在的页面容器， 即 在X轴方向上， 若元素热区301的左侧或者右侧超出界面的可视区， 则在X轴方向移动目标元 素所在的页面容器300。 0114 当在页面容器300中， 元素热区301在Y轴方向上未完全显示在。

47、界面的可视区时， 分 别计算元素热区301的上下边与界面的可视区200的上下边的距离， 距离计算使用元素热区 301的上下边的纵坐标， 减去界面的可视区200的上下边的纵坐标， 例如： 图7A中， 用页面容 器300中的元素热区301的下侧边的纵坐标， 减去界面的可视区200的下侧边的纵坐标， 得到 元素热区301与界面的可视区200的下侧的距离； 图7B中， 用元素热区301的上侧边的纵坐 标， 减去界面的可视区200的上侧边的纵坐标， 得到元素热区301与界面的可视区200的上侧 的距离。 0115 进一步地， 当计算得到的上侧的距离小于零时， 可设置页面容器300竖直向下移动 的距离等于。

48、上侧的距离的绝对值； 当计算得到的下侧的距离大于零时， 设置页面容器300竖 直向上移动的距离等于下侧的距离。 只有在上侧的距离小于零、 下侧的距离大于零两个条 件中只存在一个条件成立时， 才进行页面容器300的竖直移动。 0116 若两个条件都满足的情况， 即图7C所示的情况， 由于元素热区301在Y轴方向的宽 度大于界面的可视区200在Y轴方向的宽度， 设置页面容器300在Y轴方向的移动距离为0， 即 无需在Y轴方向移动页面容器300。 0117 若两个条件都不满足的情况， 即图7D所示的情况， 元素热区301在界面的可视区 200内， 因此无需移动页面容器300。 0118 上述实施例，。

49、 若满足竖直移动条件， 则竖直移动目标元素所在的页面容器300， 即 在Y轴方向上， 元素热区301的上侧或者下侧超出界面的可视区200， 则在Y轴方向移动目标 元素所在的页面容器300。 0119 根据本发明一个实施例， 当用户操作的元素所在的页面容器并非底层容器时， 必 要时， 还可以对界面中的多个页面容器进行移动。 例如， 图8A所示， 页面编辑界面100的底层 画布之上包含多层容器， 具体包含被编辑的页面容器300以及添加到页面中的古诗词容器 400。 页面容器300是古诗词容器400的下层容器， 古诗词容器400是页面容器300的上层容 器； 下层容器对应的目标控件为控件101以及控。

50、件102； 上层容器对应的目标控件为控件 401。 若用户操作古诗词容器400中的元素， 得到元素热区402， 且元素热区402超出界面的可 视区200， 则首先移动古诗词容器400(在图8A的场景下， 移动方向为竖直向上移动)， 并同步 移动控件401。 0120 当控件401移动到边界时， 界面效果如图8B所示。 由于此时元素热区402仍然超出 界面的可视区200中， 则获取古诗词容器400的下层容器， 即页面容器300， 由于页面容器300 并非底层画布， 因此可以进一步移动页面容器300， 移动方向为使得元素热区402向界面的 可视区200中心靠近的方向(在图8B的场景下， 移动方向为。