CN111782114B - 文稿编辑应用中的元素展示方法、装置、设备及介质 - Google Patents

Abstract

本申请提供一种文稿编辑应用中的元素展示方法、装置、设备及介质。其中，所述方法包括：基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个元素展示视图中绘制有至少一个元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；基于用户的操作指令，根据已绘制的元素之间的层级关系展示各元素展示视图。使得用户可以清楚、直观地看到编辑界面中所有已绘制的元素，尤其是具有重叠关系的元素都能够一目了然，并且可以清楚、直观地获知各个元素之间的层级关系，提高用户体验；此外，根据展示界面的元素展示视图，用户可以快速找到需要编辑的元素，并在后续执行相关操作对元素进行编辑，提高用户的编辑效率。

Description

文稿编辑应用中的元素展示方法、装置、设备及介质

技术领域

本申请涉及计算机应用技术领域，尤其涉及一种文稿编辑应用中的元素展示方法、装置、设备及介质。

背景技术

在电子白板等文稿编辑应用中，用户可以在编辑界面上进行书写、绘画、添加文本、图案、图片等操作，用户书写的一笔一画、编辑的一个文本、一个图案或者一张图片可以称为一个元素。编辑界面中的内容往往包括有多个元素，当存在不透明的元素之间互相重叠时，用户无法直接看到被覆盖的元素全貌，也无法在不影响覆盖在其上层的元素的前提下，对被覆盖的元素进行操作。如用户需查看被覆盖的元素，需要先将覆盖在其上层的元素移动开来。这个过程的交互繁琐，且会破坏覆盖在其上层的元素的位置状态，影响用户体验。

发明内容

为克服相关技术中存在的问题，本申请提供了一种文稿编辑应用中的元素展示方法、装置、设备及介质。

根据本申请实施例的第一方面，提供一种文稿编辑应用中的元素展示方法，所述方法包括：

基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图。

根据本申请实施例的第二方面，提供一种文稿编辑应用中的元素展示装置，所述装置包括：

生成模块，被配置为基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

展示模块，被配置为基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图。

根据本申请实施例的第三方面，提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：

基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图。

根据本申请实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现以下步骤：

基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图。

本申请的实施例提供的技术方案可以包括以下有益效果：

本技术方案中，通过将用户在文稿编辑应用的编辑界面中绘制的元素(例如，文本、图形、表格、图像等等)进行处理，将具有重叠关系的元素绘制在不同的元素展示视图，并根据用户的操作指令，可以在展示界面中展示生成的多个元素展示视图，在该展示界面中，多个元素展示视图根据各元素的层级关系进行展示，这样，不仅使得用户可以清楚、直观地看到编辑界面中所有已绘制的元素，尤其是具有重叠关系的元素都能够一目了然，并且可以清楚、直观地获知各个元素之间的层级关系，提高用户体验；此外，根据展示界面的元素展示视图，用户可以快速找到需要编辑的元素，并在后续执行相关操作对元素进行编辑，提高用户的编辑效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本申请的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1a至1c为本申请一示例性实施例示出的一种文稿编辑应用的编辑界面示意图。

图1d为本申请一示例性实施例示出的一种文稿编辑应用的展示界面示意图。

图1e为本申请一示例性实施例示出的另一种文稿编辑应用的展示界面示意图。

图1f至1g为本申请一示例性实施例示出的另一种文稿编辑应用的编辑界面示意图。

图2为本申请一示例性实施例示出的一种文稿编辑应用中的元素展示方法的流程图。

图3为本申请一示例性实施例示出的一种元素展示视图生成过程的流程图。

图4为本申请一示例性实施例示出的一种文稿编辑应用中的元素展示装置的结构框图。

图5为本申请一示例性实施例示出的一种计算机设备的结构框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

下面结合附图，对本申请的文稿编辑应用中的元素展示方法、装置、计算机设备及存储介质进行详细说明。在不冲突的情况下，下述的实施例及实施方式中的特征可以相互组合。

本申请提供了一种文稿编辑应用中的元素展示方法，该方法可以应用于手机、电脑、平板电脑、智能交互平板等设备，上述设备可以装载有操作系统，该操作系统可以是Windows、Android、iOS、Linux等操作系统，在操作系统上可以安装有文稿编辑应用，文稿编辑应用可以提供文稿编辑服务，文稿编辑应用可以是电子白板、绘画应用(如MicrosoftVisio)、幻灯片制作应用(如Micorsoft Office Powerpoint)、文字编辑应用(如MicrosoftOffice Word)等等，本申请不作具体的限定。当文稿编辑应用被启动时，可以在上述设备的显示界面显示一编辑界面，用户可以在编辑界面通过鼠标、键盘、数位板、触控笔、手指等绘制元素，这里的元素可以是文本、图形、线条、表格、图像等等，本申请不作具体的限定。

用户在编辑界面中多个元素时，具有绘制顺序，完成绘制的多个元素之间可以具有层级关系，例如，先绘制的元素所在的层级相较于后绘制的元素所在的层级低，或者说，先绘制的元素所在的层级是后绘制的元素的下一层。如果以数字对每一层级进行表示，可以是底层是第一层，层级的数字表示按照底层到顶层逐层递增。以编辑界面绘制有5个元素为例子，最先绘制的第一个元素所在的层级为底层，也可以表示为第一层；绘制的第二个元素相较于底层是上一层，可以表示为第二层，以此类推，最后绘制的第五个元素为顶层，可以表示为第五层。同理地，元素的层级的数字表示也可以按照底层到顶层逐层递减。同样的，在编辑界面绘制有5个元素的例子中，即顶层为第一层，底层为第五层。为了便于理解，后续对于本申请的技术方案的说明，涉及元素的层级的表示采用底层为第一层，顶层为第N层的方式表示，其中， N大于1，且N等于已绘制的元素的个数。

图1a至1c为本申请一示例性实施例示出的一种文稿编辑应用的编辑界面示意图。如图1a所示，为一个电子白板10提供的文稿编辑应用的编辑界面110a，用户可以选择编辑界面110a下方的绘制工具111进行不同元素的绘制，在该编辑界面110a中，用户绘制了“永”字、一个“矩形”、一个“圆形”、一个“三角形”以及一张“图片”5个元素。在图1a例子中，由于用户分别在编辑界面110a对每个元素进行绘制时，避开了其他元素所在的位置进行绘制，这样可以看到每个元素的全貌，并且，也看不出每个元素之间的层级关系。

如图1b所示，可以是用户对图1a的5个元素进行位置的调整。从图1b 可以看出部分元素之间具有重叠关系，以及部分元素之间的层级关系，如“永”字与“矩形”重叠，“矩形”与“圆形”重叠，“永”字位于“矩形”的下一层，“矩形”位于“圆形”的下一层。然而，当前编辑界面110b只显示了其中4个元素，还有1个元素可能由于其大小小于其上一层的元素的大小，并且与上一层的元素重叠，或者说，被上一层元素所覆盖，那么，该元素则无法在编辑界面110b中显示。

为了便于展示编辑界面中元素重叠的情况，如图1c所示，对于元素重叠的情况用虚线表示，可以看出，元素“图片”由于其大小小于“矩形”的大小，绘制的位置在“矩形”绘制的位置范围内，并且“图片”所在的层级在于“矩形”的下一层，因此，在编辑界面110b中无法完全显示，这样，用户则无法获知元素“矩形”的下层还具有元素“图片”，无法对“图片”进行操作，如果需要看到元素“图片”的全貌并对其进行操作，在相关技术中，需要用户对上一层的元素“矩形”操作移动，针对多个类似的情况，用户则需要多次操作，这个操作过程繁琐，并且，如果是在制作演示幻灯片的应用场景，用户根据需求编辑元素之间是覆盖、重叠的，则在移动操作之后，还需要恢复元素原来之间的重叠关系，无疑增加用户的工作量，对用户的效率产生较大的影响，影响用户体验。

为了解决上述问题，图2为本申请一示例性实施例示出的一种文稿编辑应用中的元素展示方法的流程图。如图2所示，该文稿编辑应用中的元素展示方法包括以下步骤201至202：

步骤201，基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中。

在本步骤中，将具有重叠关系的元素绘制在不同的元素展示视图中，所述重叠关系可以是部分重叠，也可以是全部重叠。部分重叠可以理解为在两个元素之间，一个元素的一部分被另一个元素遮挡，其他部分没有被另一个元素遮挡，在具体的编辑界面中，可以显示该元素的没有被遮挡的其他部分。相应地，全部重叠可以理解为一个元素被另一个元素完全遮挡，在具体的编辑界面中，不能显示该被完全遮挡的元素。

以图1b为例，“永”字与“矩形”之间为部分重叠，“矩形”与“圆形”为部分重叠，“图片”与“矩形”为全部重叠。

在一示例性实施例中，所述重叠关系基于一个元素的位置及大小与另一个元素展示视图中的各元素的位置及大小确定。设备可以通过判断两个元素的位置和大小，确定两个元素之间是否具有重叠关系。

在一示例性实施例中，一个元素的位置、大小可以根据该元素在编辑界面的坐标信息确定。

在一示例性实施例中，可以根据元素的轮廓所形成的最小外接矩形的坐标信息来确定元素的位置和大小，也就是说，任意类型的元素根据其轮廓形成一个最小外接矩形，并以这个最小外接矩形的坐标信息来表示对应的元素的坐标信息，以确定元素的位置和大小。例如，可以采用最小外接矩形的左上角的坐标点和右下角的坐标点进行确定。两个元素之间的位置和大小的比较，可以通过这两个坐标点来进行比较。又如，可以采用最小外接矩形的右上角的坐标点和左下角的坐标点进行确定。不同类型的元素都采用其对应的最小外接矩形的两个坐标点来确定元素的位置和大小，这样，便于设备进行分析判断，无需进行复杂的计算，减少对设备的资源占用。

步骤202，基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图。

在本步骤中，生成的多个元素展示视图，在展示时的排列顺序可以根据各元素的层级关系确定。例如，可以按照各元素的底层到顶层的层级关系对元素展示视图进行排列。又如，可以按照各元素的顶层到底层的层级关系对元素展示视图进行排列。这样，用户可以通过元素展示视图清楚、直观地获知各元素的层级关系。

上述实施例的文稿编辑应用中的元素展示方法，通过将用户在文稿编辑应用的编辑界面中绘制的多个元素(例如，文本、图形、表格、图像等等) 进行处理，将具有重叠关系的元素绘制在不同的元素展示视图，并根据用户的操作指令，可以在展示界面中展示生成的多个元素展示视图，在该展示界面中，多个元素展示视图根据各元素的层级关系进行展示，这样，不仅使得用户可以清楚、直观地看到编辑界面中所有已绘制的元素，尤其是具有重叠关系的元素都能够一目了然，并且可以清楚、直观地获知各个元素之间的层级关系，提高用户体验；此外，根据展示界面的元素展示视图，用户可以快速找到需要编辑的元素，并在后续执行相关操作对元素进行编辑，提高用户的编辑效率。

为了更好地体现各元素之间的层级关系，在一示例性实施例中，可以按照各元素的层级关系，对每个元素进行判断，判断元素之间是否具有重叠关系。例如，可以按照各元素从底层到顶层的层级关系逐个判断；又如，也可以按照从顶层到底层的层级关系逐个判断。无论采取哪种方式判断，如果相邻层级的两个元素之间具有重叠关系，则生成不同的元素展示视图进行展示。

那么，

在本实施例中，相邻的两个元素展示视图中绘制的元素具有所述重叠关系。换句话说，由于相邻层级的两个元素具有重叠关系，因此生成了两个元素展示视图，并且，在排列元素展示视图时，根据各元素的层级关系进行排列，那么，排列相邻的两个元素展示视图，其各自展示的元素之间具有重叠关系。

在上述各实施例的方法中，将具有重叠关系的元素绘制到不同的元素展示视图进行展示，针对没有重叠关系的至少两个元素，在一示例性实施例中，至少一个元素展示视图可以包括至少两个元素，在一个元素展示视图中的各元素之间不具有重叠关系。也就是说，如果已绘制的元素中有至少两个元素之间不具有重叠关系，可以将这些没有重叠关系的元素绘制在同一个元素展示视图进行展示，由于它们之间互不遮挡，因此，即使在同一个元素展示视图中，用户也可以清楚、直观地看到各个元素的全貌，并对每个元素都能进行操作，并且，可以减少元素展示视图的数量，提高绘制效率，避免展示较多视图造成冗余，提高用户体验。

在一示例性实施例中，按照各元素的层级关系逐个判断时，如果相邻的元素之间不具有重叠关系，则可以将这相邻的元素绘制在同一个元素展示视图进行展示，也就是说，一个所述元素展示视图中各元素之间的层级关系是相邻的。例如，一个元素展示视图中包括两个元素，则这两个元素分别是对方的上一层或者下一层。又如，一个元素展示视图中包括三个元素，那么这三个元素的层级是相邻的、连续的，如分别是第一层、第二层、第三层。

需要理解的是，由于不具有重叠关系的元素可以绘制在同一个元素展示视图进行展示，前述实施例提及到相邻的两个元素展示视图中绘制的元素具有重叠关系，可以是与一个元素展示视图中的其中一个元素具有重叠关系，也可以是与多个元素具有重叠关系。

为了更直观地获知每个元素之间的层级关系，在一示例性实施例中，可以在元素展示视图中元素的指定位置范围内显示层级标识，层级标识用于描述元素所在的层级。例如，层级标识可以采用阿拉伯数字进行标识。这样，通过层级标识用户可以进一步地直观地获知每个元素所在的层级。

为了更清楚地理解上述各实施例的元素展示视图，图1d为本申请一示例性实施例示出的一种文稿编辑应用的展示界面示意图。如图1d所示，展示界面120中包括有元素展示视图121、122及123。其中，元素展示视图121展示的元素为“永”字和“图片”，元素展示视图122展示的元素为“矩形”，元素展示视图123展示的元素为“圆形”和“三角形”。通过元素展示视图 121、122、123这种展示方式，可以将编辑界面110b的所有元素进行展示，可以避免被覆盖的元素无法展示的问题。

在展示界面120中，元素展示视图121、122、123采用从左到右的排列顺序，并且，该排列顺序根据元素的底层到顶层的层级关系所确定。结合图 1b、1c、1d，可以得知，“永”字和“图片”位于较底层，“矩形”相对于“永”字和“图片”位于它们的上一层，“圆形”和“三角形”相对于“矩形”位于“矩形”的上一层。位于同一个元素展示视图中的各元素，它们之间的层级关系是相邻的，在元素展示视图121中，“永”字和“图片”分别是对方的上一层或者下一层；在元素展示视图123中，“圆形”和“三角形”分别是对方的上一层或者下一层。

假设用户在编辑界面110绘制这5个元素的顺序是：先绘制“永”字，再添加“图片”，再绘制“矩形”，再绘制“圆形”，最后绘制“三角形”。采用数字的方式表示元素层级关系的话，即“永”字位于第一层(底层)，“图片”位于第二层，“矩形”位于第三层，“圆形”位于第四层，“三角形”位于第五层(顶层)。

在生成元素视图121、122、123时，根据这5个元素的层级关系，分别进行判断，先判断“永”字，由于是第一层，可以直接生成一个元素展示视图121；再判断“图片”，由于其与“永”字没有重叠关系，则将“图片”绘制在元素展示视图121中进行展示；再判断“矩形”，由于其与“永”字、“图片”具有重叠关系，则生成一个新的元素展示视图122来展示“矩形”；再判断“圆形”，由于其与“矩形”具有重叠关系，则生成新的元素展示视图123来展示“圆形”；最后判断“三角形”，由于其与“圆形”不具有重叠关系，则将“三角形”绘制在元素展示视图123中进行展示。

这样，当切换到展示界面120时，上述的5个元素通过不同的元素展示视图进行展示，被遮挡的“永”字、“图片”、“矩形”的元素全貌都能够被完全地展示，便于用户查看。

在图1d的实施例中，每个元素展示视图在展示元素时，还保留了每个元素原本的在编辑界面中的位置关系，即元素展示视图中展示的元素位置与编辑界面中的位置是相同的。这样，可以便于用户获知元素原本的位置关系，尤其是被遮挡住的元素原本的位置关系，提高用户体验。

在本实施例中，用户可以通过点击图1b的编辑界面110b中的展示界面图标112，切换到图1d所示的展示界面120，本实施例方案可以理解为文稿编辑应用提供了一种视图展示功能，该图标可以用于检测用户是否触发该视图展示功能，检测用户是否触发展示本实施例中的元素展示视图。如果用户没有对展示界面120中的任意视图进行操作，也可以点击展示界面120中的编辑界面图标126切换到图1b所示的展示界面110b。需要说明的是，图1b、图1d所示的展示界面图标112、编辑界面图标126的样式只是示例性的，本申请并不限定图标的样式。

在一示例性实施例中，用户也可以通过快捷键切换展示界面和编辑界面，例如，预设的键盘按键或者按键组合、预设的手势等等。

本申请通过生成元素展示视图来展示当前编辑界面中所有的元素，除了便于用户查看被遮挡的元素，还可以便于用户对元素执行相关的操作，如修改元素的大小、颜色、位置等等。在对元素执行相关操作之前，在展示界面中，用户可以针对元素展示视图进行操作。

在一示例性实施例中，用户可以通过对一个元素展示视图执行第一指定操作，从而触发顶层调整指令，顶层调整指令可以是用于指示将选中的元素展示视图中的元素的层级调整为顶层，这里所说的顶层是指元素的层级关系中的顶层，或者说编辑界面的顶层，即在编辑界面中该元素被显示于顶层。当设备检测到用户针对其中一个元素展示视图的顶层调整指令时，响应该顶层调整指令，将所述顶层调整指令对应的元素展示视图中的元素调整到所述编辑界面的顶层。这样，用户所选中的元素展示视图中包括的元素的层级可以调整到编辑界面的顶层，即在编辑界面的顶层进行显示，使得用户可以查看到对应的元素的全貌，并对其进行操作。

上述的第一指定操作可以是单击、双击等操作，本申请不作具体的限定。

在一示例性实施例中，用户可以通过对一个元素展示视图执行第二指定操作，从而触发层级调整指令，层级调整指令可以是用于指示改变选中的元素展示视图在各元素展示视图中的层级关系。当设备检测到用户针对其中一个元素展示视图的层级调整指令时，响应该层级调整指令，改变所述层级调整指令对应的元素展示视图在各元素展示视图中的层级关系，这里所说的元素展示视图的层级关系，可以理解为是前述的元素展示视图的排列顺序。

上述的第二指定操作可以是长按元素展示视图并移动元素展示视图的操作，也可以是其他操作，本申请不作具体的限定。

应该理解的是，由于元素展示视图的层级关系是根据各元素的层级关系确定的，在一示例性实施例中，设备响应于检测到用户针对其中一个元素展示视图的层级调整指令，还调整所述层级调整指令对应的元素展示视图中的元素在所述已绘制的元素的层级关系。也就是说，当设备响应于层级调整指令，除了调整被选中的元素展示视图，还调整了该元素展示视图中的元素在各元素之间的层级关系。以图1d为例子，用户通过长按元素展示视图123，并将元素展示视图123移动到元素展示视图121和元素展示视图122之间，那么，元素展示视图之间的层级关系就改变为121、123、122，为了便于理解，改变后的元素展示视图的层级关系在展示界面的示意图如图1e所示。

可以理解的是，在元素展示视图之间的层级关系发送了改变的同时，所展示的各元素之间的层级关系也可以发生了改变，原本的从第一层到第五层 (底层到顶层)分别是：“永”字、“图片”、“矩形”、“圆形”和“三角形”，改变后的从第一层到第五层(底层到顶层)分别是：“永”字、“图片”、“圆形”、“三角形”和“矩形”，即“永”字位于第一层(底层)，“图片”位于第二层，“圆形”位于第三层，“三角形”位于第四层，“矩形”位于第五层(顶层)。为了便于理解，改变后的元素的层级关系在编辑界面的示意图如图1f、1g所示。在本实施例中，通过改变元素展示视图的层级关系来调整元素的层级关系，针对多个元素的层级调整的操作相对简单，更加便捷，提高用户体验。

可以理解的是，在一个元素展示视图内，各元素之间的层级的相邻关系可以没有发生改变。

为了方便用户直观地查看元素的全貌，在一示例性实施例中，展示界面可以展示指定数量的元素展示视图，指定数量可以根据展示界面的尺寸以及每个元素展示视图的尺寸进行确定，以确保每个元素展示视图之间不会相互遮挡，从而遮挡其展示的元素。

由于生成的元素展示视图的数量会超过指定数量，在当前的展示界面不能将所有元素展示视图完全展示，在一示例性实施例中，展示界面可以设置有指示按钮，当用户点击指示按钮时，展示界面可以展示剩余未展示的元素展示视图。如图1d所示的指示按钮124、125，可以左右切换展示，展示当前展示界面的元素展示视图之前或者之后的元素展示视图。

在图1d的实施例中，元素展示视图采用的是三维效果的展示视图，以提高用户体验，当然，也可以采用其他形式来展示视图，本申请不作具体的限定。

为了更清楚地理解本申请生成元素展示视图的过程，图3为本申请一示例性实施例示出的一种元素展示视图生成过程的流程图。如图3所示，生成元素展示视图的过程可以具体包括步骤301至305：

步骤301，检测是否已生成有至少一个元素展示视图；如果是，执行步骤302；如果否，执行步骤305。

步骤302，检测当前的一个元素与上一个生成的元素展示视图中的至少一个元素之间是否为重叠关系；如果是，执行步骤303；如果否，执行步骤 304。

步骤303，重新生成一个元素展示视图。

步骤304，将当前的一个元素绘制到上一个生成的元素展示视图中。

步骤305，基于当前的一个元素生成一个元素展示视图。

在本实施例中，通过对每个元素进行遍历，进行逐个对比、判断，确定元素之间是否具有重叠关系，从而完成元素展示视图的生成。应该理解的是，可以按照元素的从底层到顶层的层级关系作为对比的顺序，也可以按照元素的从顶层到底层的层级关系作为对比的顺序。可以理解，作为第一个对比的元素，可以直接生成一个元素展示视图。

应该理解的是，上述的当前的一个元素，即为根据所述已绘制的元素的层级关系对每个所述已绘制的元素进行遍历时，当前所遍历到的元素。

以下以Android系统的文稿编辑应用为例子，具体说明如何生成元素展示视图进行展示。

在编辑界面监听到完成一个元素的绘制时，可以将元素的位置、大小等属性信息存储，例如，定义一个对象ElementInfo，可以包括元素的属性：元素的id、元素的位置、元素的大小，等等。每个元素可以对应一个ElementInfo。将所有元素对应的ElementInfo按照元素的层级关系(或者说绘制顺序)存储到一个栈ElementInfoStack中，其中，可以是底层的元素的ElementInfo置于栈顶。根据ElementInfo来判断元素之间是否具有重叠关系，从而确定元素展示视图的生成。在生成一个元素展示视图时，可以生成一个Layer，并将Layer存储到一个列表LayerList中，每个Layer可以存放元素的 ElementInfo。在完成对比判断，生成当前编辑界面的元素展示视图后，该列表可以如下表示， LayerList＝[Layer1＝(ElementInfo1,ElementInfo2)],[Layer2＝ElementInfo3]，这个列表表示当前生成的元素展示视图有两个，其中，第一元素展示视图包括元素1和元素2，第二元素展示视图包括元素3。

在判断元素之间是否具有重叠关系时，需要将当前判断的元素的 ElementInfo与上一个生成的元素展示视图包括的所有元素的ElementInfo进行比对，当与其中一个元素具有重叠关系时，则当前的元素ElementInfo存放到新创建的layer中；如果与所有元素均不具有重叠关系，则将当前的元素ElementInfo存放到上一个元素展示视图的layer中。当完成编辑界面所有的元素的对比判断时，则完成了对应的LayerLsit的创建。之后，可以使用列表控件，来绘制每个元素展示视图，并完成展示。在使用列表控件时，可以自定义元素展示视图的绘制效果，例如，设定如图1d的3D展示效果。

在上述实施例中，主要通过判断元素之间的位置、大小来确定是否具有重叠关系，从而确定生成不同的元素展示视图进行展示还是在同一元素展示视图进行展示。然而，有些元素虽然具有重叠关系，但是由于上层的元素对下层的元素的遮挡影响较小，用户查看下层元素时仍然可以看清楚大致的全貌。例如，上层元素是文本、不形成封闭图形的线条等类型的元素，下层元素是图形、图像等类型的元素，文本、线条这类元素对图形、图像这类元素的遮挡影响较小。在一示例性实施例中，还可以结合元素的类型来确定是否生成新的元素展示视图进行展示。此时，如果当前的元素是文本、线条这类型的元素，与上一个生成的元素展示视图中具有重叠关系的元素的类型是如图形、图像等类型，并且，它们之间重叠的部分的面积大小小于第一设定阈值，可以将当前的元素绘制到上一个生成的元素展示视图中进行展示，无需生成新的元素展示视图。

在一示例性实施例中，如果当前的元素是文本、线条这类型的元素，以及与上一个生成的元素展示视图中具有重叠关系的元素也是文本、线条这类型的元素，也可以根据它们之间重叠的部分的面积大小是否小于或者等于第二设定阈值，来确定是否在同一个元素展示视图进行展示。以上实施方式中的各种技术特征可以任意进行组合，只要特征之间的组合不存在冲突或矛盾，但是限于篇幅，未进行一一描述，因此上述实施方式中的各种技术特征的任意进行组合也属于本说明书公开的范围。

本申请还提供了一种文稿编辑应用中的元素展示装置，图4为本申请一示例性实施例示出的一种文稿编辑应用中的元素展示装置的结构框图。如图 4所示，所述装置40包括：

生成模块410，被配置为基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

展示模块420，被配置为基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图。

在一示例性实施例中，相邻的两个元素展示视图中绘制的元素具有所述重叠关系。

在一示例性实施例中，若所述已绘制的元素中包括：没有重叠关系的至少两个元素，则所述没有重叠关系的至少两个元素被绘制在一个元素展示视图中。

在一示例性实施例中，一个所述元素展示视图中各元素之间的层级关系是相邻的。

在一示例性实施例中，所述重叠关系包括部分重叠或者全部重叠。

在一示例性实施例中，所述重叠关系基于元素之间的位置和大小而确定。

在一示例性实施例中，所述生成模块包括：

检测子模块，被配置为在生成一个元素展示视图之前，检测是否已生成有至少一个元素展示视图；

第一生成子模块，被配置为如果是，基于当前的一个元素与上一个生成的元素展示视图中的至少一个元素之间为重叠关系时，重新生成一个元素展示视图；

第二生成子模块，被配置为如果否，基于当前的一个元素生成一个元素展示视图；

其中，所述当前的一个元素为根据所述已绘制的元素的层级关系对每个所述已绘制的元素进行遍历时，当前所遍历到的元素。

在一示例性实施例中，所述装置还包括：

第一调整模块，被配置为响应于检测到用户针对其中一个元素展示视图的顶层调整指令，将所述顶层调整指令对应的元素展示视图中的元素的层级调整为所述编辑界面的顶层。

在一示例性实施例中，所述装置还包括：

第二调整模块，被配置为响应于检测到用户针对其中一个元素展示视图的层级调整指令，调整所述层级调整指令对应的元素展示视图在各元素展示视图中的层级关系。

在一示例性实施例中，所述装置还包括：

第三调整模块，被配置为响应于所述层级调整指令，调整所述层级调整指令对应的元素展示视图中的元素在所述已绘制的元素的层级关系。

上述装置中各个模块的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

本申请还提供了一种计算机设备，图5为本申请一示例性实施例示出的一种计算机设备的结构框图。该计算机设备50包括：

存储器；

处理器，用于存储所述处理器可执行的计算机程序；

其中，所述处理器执行所述计算机程序时实现以下步骤：

基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图。

本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现以下步骤：

基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图。

本申请实施例可采用在一个或多个其中包含有程序代码的可读介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。计算机可用可读介质包括永久性和非永久性、可移动和非可移动媒体，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的可读介质的例子包括但不限于：相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本领域技术人员在考虑说明书及实践这里申请的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未申请的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

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

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (12)

1.一种文稿编辑应用中的元素展示方法，其特征在于，所述方法包括：

基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图；

响应于检测到用户针对其中一个元素展示视图的层级调整指令，调整所述层级调整指令对应的元素展示视图在各元素展示视图中的层级关系。

2.根据权利要求1所述的文稿编辑应用中的元素展示方法，其特征在于，相邻的两个元素展示视图中绘制的元素具有所述重叠关系。

3.根据权利要求1所述的文稿编辑应用中的元素展示方法，其特征在于，若所述已绘制的元素中包括：没有重叠关系的至少两个元素，则所述没有重叠关系的至少两个元素被绘制在一个元素展示视图中。

4.根据权利要求3所述的文稿编辑应用中的元素展示方法，其特征在于，一个所述元素展示视图中各元素之间的层级关系是相邻的。

5.根据权利要求1所述的文稿编辑应用中的元素展示方法，其特征在于，所述重叠关系包括部分重叠或者全部重叠。

6.根据权利要求1所述的文稿编辑应用中的元素展示方法，其特征在于，所述重叠关系基于元素之间的位置和大小而确定。

7.根据权利要求1所述的文稿编辑应用中的元素展示方法，其特征在于，所述生成元素展示视图的步骤包括：

检测是否已生成有至少一个元素展示视图；

如果是，基于当前的一个元素与上一个生成的元素展示视图中的至少一个元素之间为重叠关系时，重新生成一个元素展示视图；

如果否，基于当前的一个元素生成一个元素展示视图；

其中，所述当前的一个元素为根据所述已绘制的元素的层级关系对每个所述已绘制的元素进行遍历时，当前所遍历到的元素。

8.根据权利要求1所述的文稿编辑应用中的元素展示方法，其特征在于，所述方法还包括：

响应于检测到用户针对其中一个元素展示视图的顶层调整指令，将所述顶层调整指令对应的元素展示视图中的元素的层级调整为顶层。

9.根据权利要求1所述的文稿编辑应用中的元素展示方法，其特征在于，所述方法还包括：

响应于所述层级调整指令，调整所述层级调整指令对应的元素展示视图中的元素在所述已绘制的元素的层级关系。

10.一种文稿编辑应用中的元素展示装置，其特征在于，所述装置包括：

生成模块，被配置为基于当前编辑界面中已绘制的元素，生成至少两个元素展示视图，其中，每个所述元素展示视图中绘制有至少一个所述元素，具有重叠关系的至少两个元素绘制在不同的元素展示视图中；

展示模块，被配置为基于用户的操作指令，根据所述已绘制的元素之间的层级关系展示各所述元素展示视图；

调整模块，被配置为响应于检测到用户针对其中一个元素展示视图的层级调整指令，调整所述层级调整指令对应的元素展示视图在各元素展示视图中的层级关系。

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

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

Images