CN118377398A - 页面布局方法、装置、设备、可读存储介质和程序产品 - Google Patents

Abstract

本申请涉及一种页面布局方法、装置、设备、可读存储介质和程序产品。所述方法包括：在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向，根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素，其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素，根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。采用本方法能够在页面重新布局时保证各页面元素的相对顺序不变，并在数据量较大的情况下，解决拖拽后重绘布局导致的页面卡顿现象，以提升重绘效率。

Description

页面布局方法、装置、设备、可读存储介质和程序产品

技术领域

本申请涉及计算机技术领域，特别是涉及一种页面布局方法、装置、设备、可读存储介质和程序产品。

背景技术

随着计算机技术领域的不断发展，为了迎合各用户的多元化需求，出现了个性化页面布局方法。现有的页面布局方法，一般通过监听用户在页面上对页面元素的拖拽操作，来实现页面的个性化设计。

然而，采用现有的方式，在用户拖拽目标页面元素导致各元素之间出现元素碰撞的情况下，页面元素重新排布得到的页面布局结果无法保证其他页面元素之间的相对顺序保持不变，降低了用户进行页面布局的便捷性。

发明内容

基于此，有必要针对上述技术问题，提供一种页面布局方法、装置、设备、可读存储介质和程序产品，能够在页面重新布局的情况下，保证页面布局中各页面元素的相对顺序不变。

第一方面，本申请提供了一种页面布局方法，包括：

在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向；

根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素；其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素；

根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。

在其中一个实施例中，在包括至少两个碰撞页面元素的情况下，根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局，包括：

获取各碰撞页面元素在初始页面布局中的原始排列序号，以及拖拽前目标页面元素在初始页面布局中的目标排列序号；从各碰撞页面元素的原始排列序号中，确定最小排列序号和最大排列序号；根据最小排列序号、最大排列序号、目标排列序号和拖拽方向，对初始页面布局对应的原始元素排布顺序进行调整，得到新元素排布顺序；根据最小排列序号、目标排列序号、新元素排布顺序和原始排列规则，对初始页面布局进行重新排布处理，得到新页面布局；其中，原始排列规则为生成初始页面布局的排列规则。

在其中一个实施例中，根据最小排列序号、最大排列序号、目标排列序号和拖拽方向，对初始页面布局对应的原始元素排布顺序进行调整，得到新元素排布顺序，包括：

在拖拽方向为向上拖拽的情况下，将原始元素排布顺序中从最小排列序号至目标排列序号的前一排列序号之间的各排列序号均加一，并将目标排列序号修改为最小排列序号，以得到新元素排布顺序；在拖拽方向为向下拖拽的情况下，将原始元素排布顺序中从目标排列序号的后一排列序号至最小排列序号之间的各排列序号均减一，并将目标排列序号修改为最小排列序号，以得到新元素排布顺序；在拖拽方向为向左拖拽的情况下，将原始元素排布顺序中最大排列序号所对应的碰撞页面元素，与目标页面元素之间的位置交换，以得到新元素排布顺序；在拖拽方向为向右拖拽的情况下，将原始元素排布顺序中最小排列序号所对应的碰撞页面元素，与目标页面元素之间的位置交换，以得到新元素排布顺序。

在其中一个实施例中，根据最小排列序号、目标排列序号、新元素排布顺序和原始排列规则，对初始页面布局进行重新排布处理，得到新页面布局，包括：

将最小排列序号和目标排列序号中的最小序号值，作为起始重排序列号；将起始重排序列号所对应的页面元素，以及新元素排布顺序中位于起始重排序列号之后的各序列号所对应的页面元素，作为重排页面元素；根据原始排列规则，对初始页面布局中各重排页面元素进行重新排布处理，得到新页面布局。

在其中一个实施例中，初始页面布局关联一个文档对象模型DOM展示模式和一个canvas图片排布模式，初始页面布局中每一页面元素关联一个文档对象模型DOM元素类型和一个canvas图片元素类型；相应的，根据原始排列规则，对初始页面布局中各重排页面元素进行重新排布处理，得到新页面布局，包括：

根据原始排列规则，对初始页面布局中canvas图片元素类型的各重排页面元素进行重新排布处理，得到canvas图片排布模式下的canvas页面图片布局；将DOM元素类型的各重排页面元素映射至canvas页面图片布局上，得到DOM展示模式下的新页面布局。

在其中一个实施例中，该方法还包括：

在检测到原始页面布局中任一原始页面元素的元素高度增大的情况下，确定原始页面元素对应的初始碰撞元素；根据原始页面元素的高度变化值，对原始页面布局中初始碰撞元素对应的原始页面位置进行修改，并确定初始碰撞元素是否存在对应的其他碰撞元素；若是，则将其他碰撞元素作为新的初始碰撞元素，并返回执行根据原始页面元素的高度变化值，对原始页面布局中初始碰撞元素对应的原始页面位置进行修改的操作，直至初始碰撞元素不存在对应的其他碰撞元素，以得到初始页面布局。

第二方面，本申请还提供了一种页面布局装置，包括：

获取模块，用于在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向；

碰撞检测模块，用于根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素；其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素；

页面排布模块，用于根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。

第三方面，本申请还提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向；

根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素；其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素；

根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。

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

在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向；

根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素；其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素；

根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。

第五方面，本申请还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向；

根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素；其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素；

根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。

上述页面布局方法、装置、设备、可读存储介质和程序产品，通过在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向，并根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素，进而根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。采用上述方法，引入拖拽方向，能够在发生元素碰撞的情况下，基于拖拽方向对初始页面进行重新布局，能够保证新页面布局中各页面元素的相对顺序保持不变，即，在重新布局后无需用户重新调整其他页面之间的相对顺序，提高了用户进行页面布局的便捷性。

附图说明

为了更清楚地说明本申请实施例或相关技术中的技术方案，下面将对本申请实施例或相关技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为一个实施例中页面布局方法的流程示意图；

图2为一个实施例中确定新页面布局的流程示意图；

图3A为一个实施例中一种初始页面布局的示意图；

图3B为一个实施例中另一种初始页面布局的示意图；

图3C为一个实施例中又一种初始页面布局的示意图；

图4为另一个实施例中确定新页面布局的流程示意图；

图5为一个实施例中元素排布的流程示意图；

图6为一个实施例中确定初始页面布局的流程示意图；

图7为另一个实施例中页面布局方法的流程示意图；

图8为一个实施例中页面布局装置的结构框图；

图9为另一个实施例中页面布局装置的结构框图；

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

具体实施方式

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

随着计算机技术领域的不断发展，为了迎合各用户的多元化需求，出现了个性化页面布局方法。现有的页面布局方法，一般通过监听用户在页面上对页面元素的拖拽操作，来实现页面的个性化设计。

然而，采用现有的方式，在用户拖拽目标页面元素导致各元素之间出现元素碰撞的情况下，页面元素重新排布得到的页面布局结果无法保证其他页面元素之间的相对顺序保持不变，降低了用户进行页面布局的便捷性。

基于此，在一个示例性的实施例中，提供了一种页面布局方法，以该方法应用于页面布局设备为例进行说明，如图1所示，具体包括以下步骤：

S101，在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向。

其中，初始页面布局指的是对各页面元素的初始布局；目标页面元素指的是被拖拽的页面元素；目标页面位置指的是目标页面元素经拖拽后的位置；拖拽方向指的是对目标页面元素进行拖拽的方向。

可选的，在页面布局设备检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，可以在拖拽操作结束后获取目标页面元素经拖拽后的目标页面位置；随后，可以基于目标页面元素在初始页面布局中的初始元素位置和目标页面位置之间的相对位置关系，确定拖拽操作对应的拖拽方向。

可以理解的是，为了提高页面布局的规范性，可以将初始页面布局中各页面元素从像素点维度下的元素位置转换为单元格维度下的元素位置。具体为，基于标准单元格高度unitH、标准单元格宽度unitW、单元格之间的标准横向间距marginX和单元格之间的标准纵向间距marginY，将初始页面布局均匀划分成n份，以得到标准单元格和初始页面布局中各像素点与各标准单元格之间的对应关系。

进一步的，在确定各像素点与各标准单元格之间的对应关系后，针对每一页面元素，可以基于初始页面布局中该页面元素的左上顶点在像素点维度下的元素位置，确定该页面元素的单元格坐标(x,y)；随后，可以基于该页面元素的高度和宽度，确定该页面元素宽度所占单元格的数量w和高度所占单元格的数量h；最后，可以将单元格坐标(x,y)、宽度数量w和高度数量h这一元素数组，作为该页面元素在单元格维度下的初始页面位置。

S102，根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素。

其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素；初始页面位置指的是页面元素在初始页面布局中的位置；目标页面位置指的是目标页面元素经过拖拽后的位置；碰撞页面元素指的是在拖拽过程中与目标页面元素发生碰撞的页面元素，可以包含一个或多个，在本实施例中不做限定。

可选的，在完成对目标页面元素的拖拽操作后，可以参考公式（1）和（2），将拖拽操作最后到达的目标像素点位置所对应的单元格，作为目标页面位置中的新单元格坐标。

（1）

其中，表示目标页面元素的新单元格横坐标；表示目标像素点位置距离初始页面布局左侧边界的像素位置；表示目标页面元素的初始页面位置对应的单元格横坐标；round()函数是一种四舍五入函数。

（2）

其中，表示目标页面元素的新单元格纵坐标；表示目标像素点位置距离初始页面布局顶部边界的像素位置。

进一步的，针对每一其他页面元素，可以将目标页面位置对应的元素数组与该其他页面元素所在初始页面位置对应的元素数组进行比较，若两个元素数组满足下述任一比较条件，则证明目标页面元素与该其他页面元素未发生碰撞。其中，比较条件包括：1）e1.x+e1.w≤e2.x；2）e2.x+e2.w≤e1.x；3）e1.y+e1.h≤e2.y；4）e2.y+e2.h≤e1.y。其中，e1表示目标页面元素，进一步的，e1.x表示目标页面元素的横坐标，e1.w表示目标页面元素宽度所占单元格的数量，e1.y表示目标页面元素的纵坐标，e1.h表示目标页面元素高度所占单元格的数量；e2表示其他页面元素，进一步的，e2.x表示其他页面元素的横坐标，e2.w表示其他页面元素宽度所占单元格的数量，e2.y表示其他页面元素的纵坐标，e2.h表示其他页面元素高度所占单元格的数量。

可选的，在对各其他页面元素所在初始页面位置对应的元素数组进行逐一比较后，即可从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素。

可以理解的是，为了保证碰撞页面元素确定的准确性，针对每一碰撞页面元素，可以计算该碰撞页面元素的元素右边界，与目标页面元素经过拖拽操作后的元素左边界之间的边界差值，若边界差值小于该碰撞页面元素自身宽度的1/4，则该碰撞页面元素的元素碰撞不成立。

或者，可以计算该碰撞页面元素的元素下边界，与目标页面元素经过拖拽操作后的元素上边界之间的边界差值，若边界差值小于该碰撞页面元素自身高度的1/4，则该碰撞页面元素的元素碰撞不成立。

进一步的，在碰撞页面元素的元素碰撞不成立的情况下，需要将元素碰撞不成立的碰撞页面元素恢复为普通的其他页面元素。

S103，根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。

其中，新页面布局指的是经过拖拽处理后的页面布局。

可选的，可以将碰撞页面元素和拖拽方向同时输入到经过训练的重新排布模型中，由重新排布模型根据碰撞页面元素、拖拽方向和模型参数，对初始页面布局进行重新排布处理，进而得到新页面布局。

上述页面布局方法中，通过在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向，并根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素，进而根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。采用上述方法，引入拖拽方向，能够在发生元素碰撞的情况下，基于拖拽方向对初始页面进行重新布局，能够保证新页面布局中各页面元素的相对顺序保持不变，即，你无需用户重新调整其他页面之间的相对顺序，提高了用户进行页面布局的便捷性。

为了保证新页面布局的准确性，在上述实施例的基础上，在包括至少两个碰撞页面元素的情况下，在本实施例中，提供了一种确定新页面布局的可选方式，如图2所示，具体包括以下步骤：

S201，获取各碰撞页面元素在初始页面布局中的原始排列序号，以及拖拽前目标页面元素在初始页面布局中的目标排列序号。

其中，原始排列序号指的是初始页面布局中各页面元素的排列序号；目标排列序号指的是目标页面元素初始的排列序号。

可选的，可以按照原始排列规则，对初始页面布局中各页面元素进行排序，得到各页面元素对应的原始排列序号；随后，在确定各碰撞页面元素后，可以直接获取各碰撞页面元素在初始页面布局中的原始排列序号，以及拖拽前目标页面元素在初始页面布局中的目标排列序号。

S202，从各碰撞页面元素的原始排列序号中，确定最小排列序号和最大排列序号。

其中，最小排列序号指的是各碰撞页面元素的原始排列序号中的最小序列号；最大排列序号指的是各碰撞页面元素的原始排列序号中的最大序列号。

可选的，可以对各碰撞页面元素的原始排列序号进行大小比较，进而确定各碰撞页面元素的原始排列序号中的最小排列序号和最大排列序号。

S203，根据最小排列序号、最大排列序号、目标排列序号和拖拽方向，对初始页面布局对应的原始元素排布顺序进行调整，得到新元素排布顺序。

其中，原始元素排布顺序指的是初始页面中各页面元素的排布顺序；新元素排布顺序指的是经过拖拽操作后，各页面元素进行重排处理的排布顺序。

可选的，可以基于拖拽方向确定不同拖拽方向下的排布顺序更新方式；随后，可以采用排布顺序更新方式，根据最小排列序号、最大排列序号和目标排列序号，对原始元素排布顺序进行调整，以得到新元素排布顺序。

S204，根据最小排列序号、目标排列序号、新元素排布顺序和原始排列规则，对初始页面布局进行重新排布处理，得到新页面布局。

其中，原始排列规则为生成初始页面布局的排列规则。

可选的，可以根据最小排列序号和目标排列序号确定元素重排范围；随后，可以采用原始排列规则，在初始页面布局的基础上，按照新元素排布顺序对元素重排范围内的各页面元素进行重排处理，进而得到新页面布局。

在本实施例中，引入元素排布顺序，通过根据各碰撞页面元素的原始排列序号确定新元素排布顺序，进而根据新元素排布顺序对初始页面布局进行重新排布处理得到新页面布局，能够有效保证新页面布局的准确性。

为了保证新元素排布顺序的准确性，在上述实施例的基础上，在本实施例中，提供了一种确定新元素排布顺序的可选方式，具体为，在拖拽方向为向上拖拽的情况下，将原始元素排布顺序中从最小排列序号至目标排列序号的前一排列序号之间的各排列序号均加一，并将目标排列序号修改为最小排列序号，以得到新元素排布顺序。

可以理解的是，为了保证元素碰撞判断的准确性，在拖拽方向为向上拖拽的情况下，可以判断碰撞页面元素的下边界和目标页面元素的上边界的差值是否小于该碰撞页面元素自身高度的1/4，若是，则确定该碰撞页面元素与目标页面元素未碰撞；若否，则确定该碰撞页面元素与目标页面元素发生碰撞。

可选的，在拖拽操作过程中，为了保证其他页面元素的相对排布顺序保持不变，参考图3A所示的初始页面布局，在将目标页面元素4向上拖拽的情况下，碰撞页面元素包括页面元素1和2，此时，最小排列序号为1；目标排列序号为4。

进一步的，将原始元素排布顺序中从最小排列序号1至目标排列序号的前一排列序号3之间的各排列序号均加一，并将目标排列序号4修改为最小排列序号1，即可实现将页面元素1-3均向后移动1位，并将目标页面元素插到排列顺序中的第1位的操作，以在保持各其他页面元素的相对排布顺序不变的基础上得到新元素排布顺序。

在拖拽方向为向下拖拽的情况下，将原始元素排布顺序中从目标排列序号的后一排列序号至最小排列序号之间的各排列序号均减一，并将目标排列序号修改为最小排列序号，以得到新元素排布顺序。

可以理解的是，为了保证元素碰撞判断的准确性，在拖拽方向为向下拖拽的情况下，可以判断碰撞页面元素的上边界和目标页面元素的下边界的差值是否小于该碰撞页面元素自身高度的1/4，若是，则确定该碰撞页面元素与目标页面元素未碰撞；若否，则确定该碰撞页面元素与目标页面元素发生碰撞。

可选的，参考图3A所示的初始页面布局，在将目标页面元素4向下拖拽的情况下，碰撞页面元素包括页面元素6、7和8，此时，最小排列序号为6；目标排列序号为4。

进一步的，将原始元素排布顺序中从目标排列序号的后一排列序号5至最小排列序号6之间的各排列序号均减一，并将目标排列序号4修改为最小排列序号6，即可实现将页面元素5和6向前移动1位，并将目标页面元素插到排列顺序中的第6位的操作，以在保持各其他页面元素的相对排布顺序不变的基础上得到新元素排布顺序。

在拖拽方向为向左拖拽的情况下，将原始元素排布顺序中最大排列序号所对应的碰撞页面元素，与目标页面元素之间的位置交换，以得到新元素排布顺序。

可以理解的是，为了保证元素碰撞判断的准确性，在拖拽方向为向左拖拽的情况下，可以判断碰撞页面元素的右边界和目标页面元素的左边界的差值是否小于该碰撞页面元素自身宽度的1/4，若是，则确定该碰撞页面元素与目标页面元素未碰撞；若否，则确定该碰撞页面元素与目标页面元素发生碰撞。

可选的，参考图3B所示的初始页面布局，在将目标页面元素3向左拖拽的情况下，碰撞页面元素包括页面元素2和4，此时，最大排列序号4；目标排列序号为3；进一步的，将原始元素排布顺序中最大排列序号所对应的碰撞页面元素4，与目标页面元素3之间的位置交换，即可得到新元素排布顺序。

在拖拽方向为向右拖拽的情况下，将原始元素排布顺序中最小排列序号所对应的碰撞页面元素，与目标页面元素之间的位置交换，以得到新元素排布顺序。

可以理解的是，为了保证元素碰撞判断的准确性，在拖拽方向为向右拖拽的情况下，可以判断碰撞页面元素的左边界和目标页面元素的右边界的差值是否小于该碰撞页面元素自身宽度的1/4，若是，则确定该碰撞页面元素与目标页面元素未碰撞；若否，则确定该碰撞页面元素与目标页面元素发生碰撞。

可选的，参考图3C所示的初始页面布局，在将目标页面元素2向右拖拽的情况下，碰撞页面元素包括页面元素3和5，此时，最小排列序号3；目标排列序号为2；进一步的，将原始元素排布顺序中最小排列序号所对应的碰撞页面元素3，与目标页面元素2之间的位置交换，即可得到新元素排布顺序。

在本实施例中，提供了四个拖拽方向下新元素排布顺序的不同确定方式，能够在保持各其他页面元素的相对排布顺序不变的基础上得到新元素排布顺序，同时也能保证新元素排布顺序的准确性。

为了保证新页面布局确定的高效性，在上述实施例的基础上，在本实施例中，提供了另一种确定新页面布局的可选方式，如图4所示，具体包括以下步骤：

S401，将最小排列序号和目标排列序号中的最小序号值，作为起始重排序列号。

其中，最小序号值指的是各碰撞元素中最小排列序号和目标排列序号之间最小的序列号值；起始重排序列号指的是在新元素排布顺序中需要进行重排处理的起始位置。

可以理解的是，由于新元素排布顺序中各其他页面元素的相对排布顺序不变，因此，在对初始页面布局中的目标页面元素进行拖拽的过程中，位于最小序号值之前的页面元素的元素位置不会发生变化，因此，在本实施例中，可以将最小序号值，作为新元素排布顺序中的起始重排序列号。

S402，将起始重排序列号所对应的页面元素，以及新元素排布顺序中位于起始重排序列号之后的各序列号所对应的页面元素，作为重排页面元素。

可选的，在确定起始重排序列号后，由于起始重排序列号对应的页面元素，以及新元素排布顺序中位于起始重排序列号之后的各序列号所对应的页面元素，均会重新布局，因此，可以将上述页面元素作为重排页面元素。

S403，根据原始排列规则，对初始页面布局中各重排页面元素进行重新排布处理，得到新页面布局。

可选的，在确定重排页面元素后，为了保证页面布局的规范性，可以按照生成初始页面布局的原始排列规则，在初始页面布局的基础上，逐一对各重排页面元素进行重新排布处理，进而得到新页面布局。

在本实施例中，引入起始重排序列号，通过基于起始重排序列号缩小了重新排布处理对应的元素处理范围，能够保证新页面布局确定的高效性。

在实际应用中，在各页面元素的内容复杂、数量较多以及拖拽过程中需要频繁展示动效的情况下，现有解决方案在拖拽后对DOM元素类型的页面元素重新布局时容易出现卡顿和白屏的现象。

基于此，在上述实施例的基础上，初始页面布局关联一个文档对象模型DOM展示模式和一个canvas图片排布模式，初始页面布局中每一页面元素关联一个DOM元素类型和一个canvas图片元素类型；进一步的，在本实施例中，提供了一种元素排布的可选方式，如图5所示，具体包括以下步骤：

S501，根据原始排列规则，对初始页面布局中canvas图片元素类型的各重排页面元素进行重新排布处理，得到canvas图片排布模式下的canvas页面图片布局。

其中，DOM元素类型指的是能够存储页面元素的元素内容的元素类型，相应的，DOM展示模式用于展示DOM元素类型下的页面元素；canvas图片元素类型指的是能够展示页面元素的图标信息和动效展示信息的元素类型，相应的，canvas图片排布模式用于在拖拽，以及页面元素重排过程中展示canvas图片元素类型下的页面元素，以及页面元素对应的动效。

可选的，在得到初始页面布局后，可以在DOM展示模式中展示各DOM元素类型下的页面元素；随后，在检测到存在拖拽目标页面元素操作的情况下，元素展示模式会由DOM展示模式切换至canvas图片排布模式。

进一步的，在canvas图片排布模式下，由canvas图片元素类型下的各页面元素展示目标页面元素的拖拽过程，并基于对目标页面元素的拖拽操作和原始排列规则，对初始页面布局中各重排页面元素进行重新排布处理，得到canvas图片排布模式下由canvas图片元素类型的页面元素构成的canvas页面图片布局。

可以理解的是，为了能够更加直观的展示元素拖拽过程，可以为canvas图片元素类型下的页面元素配置一个动效层，即在canvas图片排布模式中拖拽目标页面元素时，目标页面元素会展示对应的拖拽动效。

S502，将DOM元素类型的各重排页面元素映射至canvas页面图片布局上，得到DOM展示模式下的新页面布局。

可选的，在得到canvas图片排布模式下的canvas页面图片布局后，元素展示模式会由canvas图片排布模式切换回DOM展示模式，同时，将各重排页面元素关联的DOM元素类型映射至canvas页面图片布局上，以得到DOM展示模式下由DOM元素类型的页面元素构成的新页面布局。

在本实施例中，通过提供DOM展示模式和canvas图片排布模式这两种模式，在拖拽页面元素进行重新排布处理时，使用canvas图片形式来替代传统的DOM元素进行布局渲染，能够解决页面元素数据量较大的情况下所出现的卡顿情况，进而有效提高新页面布局的高效性。

在上述实施例的基础上，在本实施例中，提供了一种确定初始页面布局的可选方式，如图6所示，具体包括以下步骤：

S601，在检测到原始页面布局中任一原始页面元素的元素高度增大的情况下，确定原始页面元素对应的初始碰撞元素。

其中，原始页面布局指的是在各元素高度未发生变化的情况下的元素布局；原始页面元素指的是元素高度增大的页面元素；初始碰撞元素指的是原始页面元素在元素高度增大后碰撞到的页面元素。

可选的，将各页面元素按照元素排布顺序，按左上到右下的页面排布方式将各页面元素紧密排列在原始页面中，以得到原始页面布局；随后，在检测到原始页面布局中任一原始页面元素的元素高度增大的情况下，可以参考上述步骤S102的方式，根据元素高度增大后的原始页面元素所在的页面位置，从其他页面元素中确定初始碰撞元素。

S602，根据原始页面元素的高度变化值，对原始页面布局中初始碰撞元素对应的原始页面位置进行修改。

其中，高度变化值指的是能够表征原始页面元素在高度维度下的变化情况的数值；原始页面位置指的是页面元素在原始页面布局中的位置。

可选的，在高度变化值为deltaH的情况下，可以将初始碰撞元素的y轴加deltaH，以实现对初始碰撞元素对应的原始页面位置进行修改的操作。

S603，判断初始碰撞元素是否存在对应的其他碰撞元素；若是，则执行S604；若否，则执行S605。

可选的，在将初始碰撞元素的y轴加deltaH后，可以参考上述步骤S102的方式，确定改变y轴坐标后的初始碰撞元素是否存在对应的其他碰撞元素，若是，则执行下述步骤S604；若否，则执行下述步骤S605。

S604，将其他碰撞元素作为新的初始碰撞元素，并返回执行S602。

可选的，在确定改变高度后的初始碰撞元素还存在对应的其他碰撞元素后，可以将其他碰撞元素作为新的初始碰撞元素；随后，继续执行改变初始碰撞元素的y轴坐标的操作，并判断改变y轴坐标后的初始碰撞元素是否存在对应的其他碰撞元素。

S605，得到初始页面布局。

可选的，在确定初始碰撞元素不存在对应的其他碰撞元素的情况下，证明页面布局完成，此时可以得到初始页面布局。

可以理解的是，在原始页面元素的元素高度减小的情况下，虽然不会碰撞到其他页面元素，但是为了保证页面布局的紧凑性，可以对原始页面元素的y轴加1，随后参考上述步骤，查找出原始页面元素所影响的各影响页面元素，并将各页面元素中的第一个元素记为effectE。

进一步的，可以对effectE的y轴尝试减deltaH，判断是否会碰撞到其他元素，如果会碰撞，则尝试减deltaH-1，如果减deltaH-1还会碰撞，再尝试减deltaH-2，以此类推，直到effectE不会碰撞到其他的页面元素。对各影响页面元素均做此操作，即可得到元素高度减少后的初始页面布局。

在本实施例中，通过检测原始页面布局中各页面元素的元素高度变化情况，能够在元素高度发生变化情况下，对原始页面布局进行动态调整，进而得到初始页面布局。

图7为另一个实施例中页面布局方法的流程示意图，在上述实施例的基础上，本实施例提供了一种页面布局方法的可选实例。结合图7，具体实现过程如下：

S701，在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，由DOM展示模式切换至canvas图片排布模式，并在canvas图片排布模式下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向。

可选的，在检测到原始页面布局中任一原始页面元素的元素高度发生变化的情况下，确定原始页面元素对应的初始碰撞元素；根据原始页面元素的高度变化值，对原始页面布局中初始碰撞元素对应的原始页面位置进行修改，并确定初始碰撞元素是否存在对应的其他碰撞元素；若是，则将其他碰撞元素作为新的初始碰撞元素，并返回执行根据原始页面元素的高度变化值，对原始页面布局中初始碰撞元素对应的原始页面位置进行修改的操作，直至初始碰撞元素不存在对应的其他碰撞元素，以得到初始页面布局。

S702，根据各其他页面元素对应的原始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素。

其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素。

S703，获取各碰撞页面元素在初始页面布局中的原始排列序号，以及拖拽前目标页面元素在初始页面布局中的目标排列序号。

S704，从各碰撞页面元素的原始排列序号中，确定最小排列序号和最大排列序号。

S705，根据最小排列序号、最大排列序号、目标排列序号和拖拽方向，对初始页面布局对应的原始元素排布顺序进行调整，得到新元素排布顺序。

可选的，在拖拽方向为向上拖拽的情况下，将原始元素排布顺序中从最小排列序号至目标排列序号的前一排列序号之间的各排列序号均加一，并将目标排列序号修改为最小排列序号，以得到新元素排布顺序；在拖拽方向为向下拖拽的情况下，将原始元素排布顺序中从目标排列序号的后一排列序号至最小排列序号之间的各排列序号均减一，并将目标排列序号修改为最小排列序号，以得到新元素排布顺序；在拖拽方向为向左拖拽的情况下，将原始元素排布顺序中最大排列序号所对应的碰撞页面元素，与目标页面元素之间的位置交换，以得到新元素排布顺序；在拖拽方向为向右拖拽的情况下，将原始元素排布顺序中最小排列序号所对应的碰撞页面元素，与目标页面元素之间的位置交换，以得到新元素排布顺序。

S706，将最小排列序号和目标排列序号中的最小序号值，作为起始重排序列号。

S707，将起始重排序列号所对应的页面元素，以及新元素排布顺序中位于起始重排序列号之后的各序列号所对应的页面元素，作为重排页面元素。

S708，根据原始排列规则，对初始页面布局中canvas图片元素类型的各重排页面元素进行重新排布处理，得到canvas图片排布模式下的canvas页面图片布局。

其中，原始排列规则为生成初始页面布局的排列规则。

S709，将DOM元素类型的各重排页面元素映射至canvas页面图片布局上，得到DOM展示模式下的新页面布局。

上述S701-S709的具体过程可以参见上述方法实施例的描述，其实现原理和技术效果类似，在此不再赘述。

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

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的页面布局方法的页面布局装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个页面布局装置实施例中的具体限定可以参见上文中对于页面布局方法的限定，在此不再赘述。

在一个示例性的实施例中，如图8所示，提供了一种页面布局装置1，包括：获取模块10、碰撞检测模块20和页面排布模块30，其中：

获取模块10，用于在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取目标页面元素经拖拽后的目标页面位置，以及拖拽操作对应的拖拽方向；

碰撞检测模块20，用于根据各其他页面元素对应的原始页面位置，从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素；其中，各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素；

页面排布模块30，用于根据碰撞页面元素和拖拽方向，对初始页面布局进行重新排布处理，得到新页面布局。

在一个示例性的实施例中，在包括至少两个碰撞页面元素的情况下，如图9所示，页面排布模块30包括：

序号获取单元31，用于获取各碰撞页面元素在初始页面布局中的原始排列序号，以及拖拽前目标页面元素在初始页面布局中的目标排列序号；

确定单元32，用于从各碰撞页面元素的原始排列序号中，确定最小排列序号和最大排列序号；

顺序确定单元33，用于根据最小排列序号、最大排列序号、目标排列序号和拖拽方向，对初始页面布局对应的原始元素排布顺序进行调整，得到新元素排布顺序；

布局确定单元34，用于根据最小排列序号、目标排列序号、新元素排布顺序和原始排列规则，对初始页面布局进行重新排布处理，得到新页面布局；其中，原始排列规则为生成初始页面布局的排列规则。

在一个示例性的实施例中，顺序确定单元33具体用于：

在拖拽方向为向上拖拽的情况下，将原始元素排布顺序中从最小排列序号至目标排列序号的前一排列序号之间的各排列序号均加一，并将目标排列序号修改为最小排列序号，以得到新元素排布顺序；在拖拽方向为向下拖拽的情况下，将原始元素排布顺序中从目标排列序号的后一排列序号至最小排列序号之间的各排列序号均减一，并将目标排列序号修改为最小排列序号，以得到新元素排布顺序；在拖拽方向为向左拖拽的情况下，将原始元素排布顺序中最大排列序号所对应的碰撞页面元素，与目标页面元素之间的位置交换，以得到新元素排布顺序；在拖拽方向为向右拖拽的情况下，将原始元素排布顺序中最小排列序号所对应的碰撞页面元素，与目标页面元素之间的位置交换，以得到新元素排布顺序。

在一个示例性的实施例中，布局确定单元34包括：

第一子单元，用于将最小排列序号和目标排列序号中的最小序号值，作为起始重排序列号；

第二子单元，用于将起始重排序列号所对应的页面元素，以及新元素排布顺序中位于起始重排序列号之后的各序列号所对应的页面元素，作为重排页面元素；

第三子单元，用于根据原始排列规则，对初始页面布局中各重排页面元素进行重新排布处理，得到新页面布局。

在一个示例性的实施例中，初始页面布局关联一个文档对象模型DOM展示模式和一个canvas图片排布模式，初始页面布局中每一页面元素关联一个文档对象模型DOM元素类型和一个canvas图片元素类型；相应的，第三子单元具体用于：

根据原始排列规则，对初始页面布局中canvas图片元素类型的各重排页面元素进行重新排布处理，得到canvas图片排布模式下的canvas页面图片布局；将DOM元素类型的各重排页面元素映射至canvas页面图片布局上，得到DOM展示模式下的新页面布局。

在一个示例性的实施例中，页面布局装置还包括初始布局模块，其中，初始布局模块具体用于：

在检测到原始页面布局中任一原始页面元素的元素高度发生变化的情况下，确定原始页面元素对应的初始碰撞元素；根据原始页面元素的高度变化值，对原始页面布局中初始碰撞元素对应的原始页面位置进行修改，并确定初始碰撞元素是否存在对应的其他碰撞元素；若是，则将其他碰撞元素作为新的初始碰撞元素，并返回执行根据原始页面元素的高度变化值，对原始页面布局中初始碰撞元素对应的原始页面位置进行修改的操作，直至初始碰撞元素不存在对应的其他碰撞元素，以得到初始页面布局。

上述页面布局装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个示例性的实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图10所示。该计算机设备包括处理器、存储器、输入/输出接口(Input/Output，简称I/O）和通信接口。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储页面元素位置数据。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种页面布局方法。

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

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

需要说明的是，本申请所涉及的数据（包括但不限于页面元素数据等），均为经用户授权或者经过各方充分授权的数据，且相关数据的收集、使用和处理需要符合相关规定。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性存储器和易失性存储器中的至少一种。非易失性存储器可包括只读存储器（Read-Only Memory，ROM）、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器（Resistive Random Access Memory，ReRAM）、磁变存储器（Magnetoresistive RandomAccess Memory，MRAM）、铁电存储器（Ferroelectric Random Access Memory，FRAM）、相变存储器（Phase Change Memory，PCM）、石墨烯存储器等。易失性存储器可包括随机存取存储器（Random Access Memory，RAM）或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器（Static Random Access Memory，SRAM）或动态随机存取存储器（Dynamic Random Access Memory，DRAM）等。本申请提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器、人工智能（Artificial Intelligence，AI）处理器等，不限于此。

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

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

Claims (10)

1.一种页面布局方法，其特征在于，所述方法包括：

在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取所述目标页面元素经拖拽后的目标页面位置，以及所述拖拽操作对应的拖拽方向；

根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在所述目标页面位置处与所述目标页面元素发生碰撞的碰撞页面元素；其中，各其他页面元素包括所述初始页面布局中除所述目标页面元素之外的页面元素；

根据所述碰撞页面元素和所述拖拽方向，对所述初始页面布局进行重新排布处理，得到新页面布局。

2.根据权利要求1所述的方法，其特征在于，在包括至少两个碰撞页面元素的情况下，所述根据所述碰撞页面元素和所述拖拽方向，对所述初始页面布局进行重新排布处理，得到新页面布局，包括：

获取各碰撞页面元素在所述初始页面布局中的原始排列序号，以及拖拽前所述目标页面元素在所述初始页面布局中的目标排列序号；

从各碰撞页面元素的原始排列序号中，确定最小排列序号和最大排列序号；

根据所述最小排列序号、所述最大排列序号、所述目标排列序号和所述拖拽方向，对所述初始页面布局对应的原始元素排布顺序进行调整，得到新元素排布顺序；

根据所述最小排列序号、所述目标排列序号、所述新元素排布顺序和原始排列规则，对所述初始页面布局进行重新排布处理，得到新页面布局；其中，所述原始排列规则为生成所述初始页面布局的排列规则。

3.根据权利要求2所述的方法，其特征在于，所述根据所述最小排列序号、所述最大排列序号、所述目标排列序号和所述拖拽方向，对所述初始页面布局对应的原始元素排布顺序进行调整，得到新元素排布顺序，包括：

在所述拖拽方向为向上拖拽的情况下，将所述原始元素排布顺序中从所述最小排列序号至所述目标排列序号的前一排列序号之间的各排列序号均加一，并将所述目标排列序号修改为所述最小排列序号，以得到新元素排布顺序；

在所述拖拽方向为向下拖拽的情况下，将所述原始元素排布顺序中从所述目标排列序号的后一排列序号至所述最小排列序号之间的各排列序号均减一，并将所述目标排列序号修改为所述最小排列序号，以得到所述新元素排布顺序；

在所述拖拽方向为向左拖拽的情况下，将所述原始元素排布顺序中所述最大排列序号所对应的碰撞页面元素，与所述目标页面元素之间的位置交换，以得到所述新元素排布顺序；

在所述拖拽方向为向右拖拽的情况下，将所述原始元素排布顺序中所述最小排列序号所对应的碰撞页面元素，与所述目标页面元素之间的位置交换，以得到所述新元素排布顺序。

4.根据权利要求2所述的方法，其特征在于，所述根据所述最小排列序号、所述目标排列序号、所述新元素排布顺序和原始排列规则，对所述初始页面布局进行重新排布处理，得到新页面布局，包括：

将所述最小排列序号和所述目标排列序号中的最小序号值，作为起始重排序列号；

将所述起始重排序列号所对应的页面元素，以及所述新元素排布顺序中位于所述起始重排序列号之后的各序列号所对应的页面元素，作为重排页面元素；

根据原始排列规则，对所述初始页面布局中各重排页面元素进行重新排布处理，得到新页面布局。

5.根据权利要求4所述的方法，其特征在于，所述初始页面布局关联一个文档对象模型DOM展示模式和一个画布canvas图片排布模式，所述初始页面布局中每一页面元素关联一个DOM元素类型和一个canvas图片元素类型；

相应的，所述根据原始排列规则，对所述初始页面布局中各重排页面元素进行重新排布处理，得到新页面布局，包括：

根据原始排列规则，对所述初始页面布局中canvas图片元素类型的各重排页面元素进行重新排布处理，得到canvas图片排布模式下的canvas页面图片布局；

将DOM元素类型的各重排页面元素映射至所述canvas页面图片布局上，得到DOM展示模式下的新页面布局。

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

在检测到原始页面布局中任一原始页面元素的元素高度增大的情况下，确定所述原始页面元素对应的初始碰撞元素；

根据所述原始页面元素的高度变化值，对所述原始页面布局中所述初始碰撞元素对应的原始页面位置进行修改，并确定所述初始碰撞元素是否存在对应的其他碰撞元素；

若是，则将所述其他碰撞元素作为新的初始碰撞元素，并返回执行根据所述原始页面元素的高度变化值，对所述原始页面布局中所述初始碰撞元素对应的原始页面位置进行修改的操作，直至所述初始碰撞元素不存在对应的其他碰撞元素，以得到所述初始页面布局。

7.一种页面布局装置，其特征在于，所述装置包括：

获取模块，用于在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下，获取所述目标页面元素经拖拽后的目标页面位置，以及所述拖拽操作对应的拖拽方向；

碰撞检测模块，用于根据各其他页面元素对应的初始页面位置，从各其他页面元素中确定在所述目标页面位置处与所述目标页面元素发生碰撞的碰撞页面元素；其中，各其他页面元素包括所述初始页面布局中除所述目标页面元素之外的页面元素；

页面排布模块，用于根据所述碰撞页面元素和所述拖拽方向，对所述初始页面布局进行重新排布处理，得到新页面布局。

8.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

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

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。