CN115857778A

CN115857778A - 页面生成方法和装置

Info

Publication number: CN115857778A
Application number: CN202211538570.7A
Authority: CN
Inventors: 范晓明; 郭小华; 周鹏飞; 刘燕
Original assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Current assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Priority date: 2022-12-02
Filing date: 2022-12-02
Publication date: 2023-03-28

Abstract

本公开提供了一种页面生成方法和装置，涉及数据处理、图像处理、元宇宙、增强现实、虚拟现实等技术领域。具体实现方案为：获取拖拽初始布局页面的起始位置信息和结束位置信息，确定初始布局页面中的最大父节点容器元素，根据起始位置信息和结束位置信息，对最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面，使得页面生成方法可以应用于更多的应用场景，且节约了计算资源，相对避免了卡顿，提高了拖拽效率，提高了用户的拖拽体验。

Description

页面生成方法和装置

技术领域

本公开涉及数据处理、图像处理、元宇宙、增强现实、虚拟现实等技术领域，尤其涉及一种页面生成方法和装置。

背景技术

布局页面拖拽功能是常见且重要的功能，如改变布局页面的元素的布局、拖动改变布局页面的元素的位置等。

例如，将布局页面的元素进行拖拽后，元素的位置依赖的相关参照也发生了变化，页面拖拽后可能导致元素之间的相对位置关系错误。

在一些实施例中，可以通过获取因拖拽而造成的各元素各自对应的位置变化信息，并基于各元素各自对应的位置变化生成调整后的布局页面。

发明内容

本公开提供了一种用于节约页面拖拽的资源的页面生成方法和装置。

根据本公开的第一方面，提供了一种页面生成方法，包括：获取拖拽初始布局页面的起始位置信息和结束位置信息；

确定所述初始布局页面中的最大父节点容器元素；

根据所述起始位置信息和所述结束位置信息，对所述最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面。

根据本公开的第二方面，提供了一种页面生成装置，包括：第一获取单元，用于获取拖拽初始布局页面的起始位置信息和结束位置信息；

第一确定单元，用于确定所述初始布局页面中的最大父节点容器元素；

缩放单元，用于根据所述起始位置信息和所述结束位置信息，对所述最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面。

根据本公开的第三方面，提供了一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面所述的方法。

根据本公开的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据第一方面所述的方法。

根据本公开的第五方面，提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序，所述计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从所述可读存储介质读取所述计算机程序，所述至少一个处理器执行所述计算机程序使得电子设备执行第一方面所述的方法。

根据本公开的第六方面，提供了一种终端设备，包括：

如第二方面所述的装置；

显示装置，用于输出初始布局页面和目标布局页面。

本实施例提供的页面生成方法和装置，包括：获取拖拽初始布局页面的起始位置信息和结束位置信息，确定初始布局页面中的最大父节点容器元素，根据起始位置信息和结束位置信息，对最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面，通过结合起始位置信息和结束位置信息，对最大父节点容器元素进行缩放处理，从而实现布局页面拖拽的技术特征，使得页面生成方法可以应用于更多的应用场景，且节约了计算资源，相对避免了卡顿，提高了拖拽效率，提高了用户的拖拽体验。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1是根据本公开第一实施例的示意图；

图2是根据本公开第二实施例的示意图；

图3是根据本公开第三实施例的示意图；

图4是本公开实施例的布局结构信息、视图属性信息、缩放基点之间的关系示意图；

图5是本公开实施例的页面生成方法的应用示意图；

图6是根据本公开第四实施例的示意图；

图7是根据本公开第五实施例的示意图；

图8是根据本公开第六实施例的示意图；

图9是用来实现本公开实施例的页面生成方法的电子设备的框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

为便于读者理解本公开的实现原理，现对本公开的至少部分技术术语解释如下：

增强现实(Augmented Reality，AR)技术，是指将虚拟信息与真实世界巧妙融合的技术，广泛运用了多媒体、三维建模、实时跟踪及注册、智能交互、传感等多种技术手段，将计算机生成的文字、图像、三维模型、音乐、视频等虚拟信息模拟仿真后，应用到真实世界中，两种信息互为补充，从而实现对真实世界的“增强”。

虚拟现实技术(Virtual Reality，VR)，又称虚拟实境或灵境技术，其中，虚拟现实技术囊括计算机、电子信息、仿真技术，其基本实现方式是以计算机技术为主，利用并综合三维图形技术、多媒体技术、仿真技术、显示技术、伺服技术等多种高科技的最新发展成果，借助计算机等设备产生一个逼真的三维视觉、触觉、嗅觉等多种感官体验的虚拟世界，从而使处于虚拟世界中的人产生一种身临其境的感觉。

元宇宙(Metaverse)，是指运用数字技术构建的，由现实世界映射或超越现实世界，可与现实世界交互的虚拟世界的数字生活空间。

全球广域网(World Wide Web，Web)，也称为万维网，是一种基于超文本和超文本传输协议(Hyper Text Transfer Protocol，HTTP)的、全球性的、动态交互的、跨平台的分布式图形信息***。

其中，超文本传输协议是一个请求-响应协议，它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

相应的，Web端可以理解为可以浏览互联网(Internet)上信息的设备。例如，若设备上可以安装浏览器，则可以将该设备称之为Web端，设备可以是终端设备，如用户终端(如计算机、笔记本电脑、以及手机等)，也可以是具有安全浏览器功能的智能家居(如冰箱等)，等等，此处不再一一列举。

文本对象模型(Document Ojbect Model，DOM)图，也可以称为树状图或者渲染树，由布局页面中的文档及文档中的所有元素组成的一个树形结构图。

重排，是指在布局页面被拖拽时，浏览器使渲染树中的受到拖拽影像的部分元素失效，并重新构造渲染树的过程。

重绘，是指浏览器重新绘制受影响的部分元素到屏幕的过程。

回调函数，是指被作为参数传递的函数。

元素(element)，布局页面中的每个标签，都可以称为一个元素，每个元素都可以看成是一个对象。

节点(node)，布局页面中的所有内容都是节点，如标签、属性、以及文本等。

容器元素代表一块区域，容器元素的内部用于放置其他元素。例如，划分(div)元素(也可以称为图层元素)，或者，行内标签(span)元素。

相应的，容器元素之间存在父子节点关系、祖孙节点关系等，可以理解为节点分为不同的层级，如父节点，子节点等，而最上层的节点的容器元素可以称为最大父节点容器元素。

在页面布局时，用户可以拖拽布局页面中的元素，以调整布局页面，使得布局页面满足布局需求。在元素被拖拽时，元素需要自适应快速渲染，以完成页面拖拽。

在一些实施例中，页面生成方法可以通过自适应计算元素尺寸的方式实现。例如，在用户拖拽布局页面时，触发元素的尺寸调整变化(resize)事件，通过尺寸调整变化事件的回调函数，获取布局页面的尺寸，并计算布局页面中各层级元素各自对应的尺寸变化信息，并基于各尺寸变化信息进行渲染处理，从而实现页面拖拽。

然而，一方面，该方法逻辑相对比较简单，相对适用于元素较少、层级较少的场景中，应用范围比较局限。另一方，在尺寸调整变化事件处理中，由于尺寸调整变化事件触发频率相对较高，并且在回调函数时，计算机性能消耗相对较高，容易导致页面拖拽的卡顿或者浏览器的崩溃。再一方面，页面拖拽时树状图发生变动，因此会触发各层级的元素的重新渲染，导致成本相对较高，资源消耗较大，时间相对较长。

在另一些实施例中，可以引入“节流”的技术特征，如将获取布局页面的尺寸，并计算得到尺寸变化信息的操作，调整为在一段时间内执行一次，而不是一直触发，以大幅度减少计算的操作，从而节约浏览器资源的消耗。

然而，该种方法的应用场景也相对比较简单，且由于需要各个层级的元素调整的相对复杂的计算，因此，拖拽过程中可能会呈现出比较严重的卡顿，用户体验不好。

为了避免上述技术问题中的至少一种，本公开提供了经创造性劳动的技术构思：在拖拽布局页面时，对最大父节点元素进行缩放处理，以实现整体布局页面的调整。

基于上述技术构思，本公开提供一种页面生成方法和装置，涉及数据处理、图像处理、元宇宙、增强现实、虚拟现实等技术领域，以达到节约页面拖拽的消耗，提高页面拖拽的效率。

图1是根据本公开第一实施例的示意图，如图1所示，本公开实施例的页面生成方法，包括：

S101：获取拖拽初始布局页面的起始位置信息和结束位置信息。

示例性的，本实施例的执行主体可以为页面生成装置，页面生成装置可以为服务器，也可以为计算机，也可以为终端设备，也可以为处理器，也可以为芯片，等等，此处不再一一列举。

例如，若页面生成装置为服务器，则页面生成装置可以为本地服务器，也可以为云端服务器，可以为独立的服务器，也可以为服务器集群，本实施例不做限定。

初始布局页面中的“初始”用于与其他布局页面进行区分，如用于与后文中的目标布局页面进行区分，而不能理解为对初始布局页面的限定。初始布局页面可以理解为被拖拽而未完成拖拽的布局页面。

起始位置信息和结束位置信息为相对概念。起始位置信息是指拖拽开始时的位置信息，结束位置信息是指拖拽结束时的位置信息。

结合上述示例可知，拖拽可以为引入了“节流”技术特征后的拖拽，即可以将拖拽的过程划分为多个触发尺寸调整变化的过程，如可以基于预设时间间隔将拖拽的过程划分为多个触发尺寸调整变化事件的过程。

相应的，本实施例中的起始位置信息和结束位置信息，可以理解为某一时间间隔内触发的尺寸调整变化事件。

例如，一次页面拖拽可以理解为包括多个尺寸调整变化的触发的过程，第一次触发尺寸调整变化时，起始位置信息为初始化时布局页面的位置，结束位置信息可以理解为当前次尺寸调整变化结束时布局页面的位置；第二次触发尺寸调整变化时，起始位置信息为第一次触发尺寸调整变化结束时布局页面的位置，结束位置信息为当前次尺寸调整变化结束时布局页面的位置，以此类推，此处不再一一列举。

关于本实施例中获取起始位置信息和结束位置信息的具体实现方式，本实施例不做限定，例如，可以采用如上实施例所述的通过回调函数的方式，获取起始位置信息和结束位置信息。

S102：确定初始布局页面中的最大父节点容器元素。

结合上述，初始布局页面具有表征元素关系的树状图，因此，可以通过该树状图确定最大父节点容器元素。

应该理解的是，本实施例对S101和S102之间的先后顺序不做限定。例如，可以为如上述顺序先获取起始位置信息和结束位置信息，而后确定最大父节点容器元素；也可以先确定最大父节点容器元素，而后获取起始位置信息和结束位置信息；也可以在获取起始位置信息和结束位置信息的时，确定最大父节点容器元素。

S103：根据起始位置信息和结束位置信息，对最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面。

其中，起始位置信息为拖拽开始时的位置信息，结束位置信息为指拖拽结束时的位置信息。因此，在本实施例中，相当于是基于指拖拽结束时的位置信息、以及拖拽开始时的位置信息，对最大父节点容器元素进行缩放操作，而最大父节点容器元素中的其他元素，会基于对最大父节点容器元素的缩放操作而进行相应的缩放操作。所以，既拖拽了最大父节点容器元素，也拖拽了最大父节点容器元素中的其他元素，从而得到拖拽后的目标布局页面。

也就是说，相对而言，在布局页面拖拽时，本实施例可以基于对最大父节点容器元素进行缩放处理，实现将最大元素节点容器元素、以及最大父节点容器元素中的其他元素作为一个整体进行缩放处理，而无需再逐层级对各个层级的元素进行缩放处理，以快速对拖拽操作响应和渲染，避免了逐层级对各个层级的元素进行缩放处理的计算复杂度，从而节约了计算资源，相对避免了卡顿，提高了拖拽效率，以实现快速流畅的完成缩放，维持布局页面的美观程度，可以适用于更多的拖拽场景，如可以适用于元素较多，层级较多的拖拽场景，甚至可以应用于分辨率较高的布局页面的场景中。

基于上述分析可知，本公开提供了一种页面生成方法，包括：获取拖拽初始布局页面的起始位置信息和结束位置信息，确定初始布局页面中的最大父节点容器元素，根据起始位置信息和结束位置信息，对最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面，在本实施例中，通过结合起始位置信息和结束位置信息，对最大父节点容器元素进行缩放处理，从而实现布局页面拖拽的技术特征，使得页面生成方法可以应用于更多的应用场景，且节约了计算资源，相对避免了卡顿，提高了拖拽效率，提高了用户的拖拽体验。

为使读者更加深刻地理解本公开的实现原理，现结合图2对本公开的页面生成方法进行更为详细地阐述。其中，图2是根据本公开第二实施例的示意图，如图2所示，本公开实施例的页面生成方法，包括：

S201：获取拖拽初始布局页面的起始位置信息和结束位置信息。

应该理解的是，为了避免繁琐地陈述，关于本实施例与上述实施例中相同的技术特征，本实施例不再赘述。

示例性的，关于S201的实现原理，可以参见S101的描述，此处不再赘述。

S202：确定初始布局页面中的最大父节点容器元素。

示例性的，关于S202的实现原理，可以参见S102的描述，此处不再赘述。

S203：根据起始位置信息和结束位置信息，计算得到拖拽初始布局页面的变化比率。

变化比率为起始位置信息变化为结束位置信息的变化的比率。示例性的，变化比率＝结束位置信息/起始位置信息。

S204：根据变化比率，对最大父节点容器元素进行缩放处理，得到目标布局页面。

在本实施例中，通过计算得到变化比率，以将变化比率确定为用于对最大父节点容器元素进行缩放处理的比率，以使得对最大父节点容器元素进行缩放处理高度贴合于用户的拖拽操作，从而提高缩放处理的有效性和可靠性，进而提高目标布局页面的准确性。

在一些实施例中，S204可以包括如下步骤：

第一步骤：根据变化比率，添加最大父节点容器元素的层叠样式表属性中的变形属性。

示例性的，对最大父节点容器元素添加层叠样式表(Cascading Style Sheets，CSS)属性中的变形属性(transform)赋值：变化比率。

第二步骤：根据变形属性，对最大父节点容器元素进行缩放处理，得到目标布局页面。

在本实施例中，通过对变形属性进行赋值-变化比率，以基于变形属性进行缩放处理，可以实现缩放处理的有效性和可靠性。

值得说明的是，不同的布局页面可能具有不同的布局方式，布局方式也可以称为布局结构信息，如布局结构信息可以为左右结构，也可以为上下结构。其中，左右结构中的“左右”、上下结构中的“上下”以浏览布局页面的视觉为基准。

相应的，初始布局页面也具有布局结构信息，且不同的初始布局页面可能具有不同的布局结构信息。如初始布局页面可能为左右结构，也可以为上下结构。

由于初始布局页面具有布局结构信息，而在不同的布局结构信息中，初始布局页面可能为布局结构信息中的不同视图，如在左右结构中，初始布局页面可能为左视图，也可能为右视图。又如在上下结构中，初始布局页面可能为上视图，也可能为下视图。

因此，可以通过视图属性信息对初始布局页面的视图情况进行区分。同理，视图属性信息中的上视图、下视图、左视图、以及右视图以浏览布局页面的视觉为基准。

相应的，为使读者对本公开的实现原理有更细化地理解，现结合图3对本公开的页面生成方法进行更为详细地阐述。其中，图3是根据本公开第三实施例的示意图，如图3所示，本公开实施例的页面生成方法，包括：

S301：获取拖拽初始布局页面的起始位置信息和结束位置信息。

同理，为了避免繁琐地陈述，关于本实施例与上述实施例中相同的技术特征，本实施例不再赘述。

示例性的，关于S301的实现原理，可以参见S101的描述，此处不再赘述。

S302：确定初始布局页面中的最大父节点容器元素。

示例性的，关于S302的实现原理，可以参见S102的描述，此处不再赘述。

S303：获取拖拽初始布局页面的拖拽类型，拖拽类型为放大类型或者缩小类型。

示例性的，基于对初始布局页面执行的拖拽操作是被放大的拖拽操作还是被缩小的拖拽操作，可以将拖拽初始布局页面的拖拽操作分为两种类型，一种类型为放大类型，以通过放大类型的拖拽操作将初始布局页面放大，即目标布局页面所占面积大于初始布局页面所占面积；另一种类型为缩小类型，以通过缩小类型的拖拽操作将初始布局页面缩小，即目标布局页面所占面积小于初始布局页面所占面积。

S304：若拖拽类型为缩小类型，则根据起始位置信息和结束位置信息，计算得到拖拽初始布局页面的变化比率。

示例性的，拖拽类型可能为放大类型，也可能为缩小类型，如果拖拽类型为缩小类型，则可以直接基于起始位置信息和结束位置信息计算得到变化比率。

例如，在基于拖拽手柄拖拽初始布局页面开始时，触发尺寸调整变化事件，从回调函数中的事件对象(event)中获取起始位置信息，并将起始位置信息存储在初始化拖拽时拖拽手柄的位置[handle X，handle Y]中。

其中，拖拽手柄为拖拽初始布局页面的工具，如拖拽手柄可以为鼠标，也可以为键盘，等等，此处不再一一列举。

handle X为起始位置信息中的横坐标，handle Y为起始位置信息中的纵坐标。

在当前次基于拖拽手柄拖拽初始布局页面结束时，获取拖拽手柄的当前位置信息，并将当前位置信息(即结束位置信息)赋值给拖拽结束时拖拽手柄的位置[handle EndX，handle End Y]中。

其中，handle End X为结束位置信息中的横坐标，handle End Y结束位置信息中的纵坐标。

相应的，可以基于起始位置信息[handle X，handle Y]、结束位置信息[handleEnd X，handle End Y]，计算得到变化比率[scale X，scale Y]。

其中，变化比率scale X为结束位置信息中的横坐标handle End X、以及起始位置信息中的横坐标handle X之间的变化比率。例如，scale X＝[handle End X/handle X。

变化比率scale Y为结束位置信息中的纵坐标handle End Y、以及起始位置信息中的纵坐标handle Y之间的变化比率。例如，scale Y＝[handle End Y/handle Y。

例如，若起始位置信息为[1000，800](单位为像素(Pixel，px))，结束位置信息为[800，640](单位为像素px)，则变化比率为scale X＝scale Y＝0.8。

相对而言，针对缩小类型的拖拽场景，由于布局页面被拖拽的过程为由大变小的过程，因此，拖拽后的布局页面相对小于拖拽前的布局页面，拖拽后的布局页面不会超出拖拽前的布局页面的所处范围。

因此，在本实施例中，在初始布局页面的拖拽类型为缩小类型的场景中，可以直接基于结束位置信息和起始位置信息进行计算，以得到变化比率，可以提高确定变化比率的效率和有效性。

S305：若拖拽类型为放大类型，且结束位置信息不属于初始布局页面，则获取布局页面的布局结构信息。

其中，布局结构信息以浏览初始布局页面的视角为基准。

S306：根据布局结构信息、起始位置信息、以及结束位置信息，计算得到变化比率。

在拖拽类型为放大类型的拖拽场景中，初始布局页面可能被拖拽出预设的最大所处范围。

例如，结合上述对布局结构信息和视图属性信息的描述，若布局结构信息为左右结构，视图属性信息为左视图，则在放大类型的拖拽场景中，初始布局页面可能被拖拽至右视图的布局页面中。

因此，在本实施例中，针对放大类型的拖拽场景，可以先确定结束位置信息是否属于初始布局页面，若不属于，则获取布局结构信息，以结合布局结构信息计算变化比率，以提高计算变化比率的有效性和可靠性，从而使得最终拖拽得到的目标布局页面具有较高的有效性和可靠性。

在一些实施例中，起始位置信息包括起始横坐标和起始纵坐标，结束位置信息包括结束横坐标和结束纵坐标，变化比率包括横坐标变化比率和纵坐标变化比率；S306可以包括：

若布局结构信息表征初始布局页面为左右结构，则横坐标变化比率为结束横坐标与起始横坐标之间的比值，纵坐标变化比率为1。

若布局结构信息表征初始布局页面为上下结构，则纵坐标变化比率为结束纵坐标与起始纵坐标之间的比值，横坐标变化比率为1。

示例性的，结合上述示例，handle X为起始位置信息中的横坐标，可以称为起始横坐标；handle Y为起始位置信息中的纵坐标，可以称为起始纵坐标；handle End X为结束位置信息中的横坐标，可以称为结束横坐标；handle End Y结束位置信息中的纵坐标，可以称为结束纵坐标；scale X为横坐标变化比率，scale Y为纵坐标变化比率。

以初始布局页面为左右结构为例，scale X＝handle End X/handle X，scale Y＝1。例如，若起始位置信息为[1000，800](单位为像素px)，结束位置信息为[1200，960](单位为像素px)，则变化比率为scale X＝1.2，scale Y＝1。

相应的，若初始布局页面为上下结构，则scale X＝1，scale Y＝handle End Y/handle Y。

通过上述示例确定变换比例，可以避免拖拽初始布局页面超过为初始布局页面预设的页面边界(即预设的最大所处范围)，即避免放大类型的拖拽操作超出初始布局页面的布局范围，从而提高拖拽的有效性和可靠性。

S307：根据获取到的初始布局页面的布局结构信息和视图属性信息，确定缩放基点。其中，布局结构信息和视图属性信息以浏览初始布局页面的视角为基准。

示例性的，可以先获取如上所述的布局结构信息和视图属性信息，并基于布局结构信息和视图属性信息确定缩放基点。

在一些实施例中，如图4所示，若布局结构信息表征初始布局页面为左右结构，且视图属性信息表征初始布局为左视图，则缩放基点为最大父节点容器元素的左顶点(lefttop)、左中心点(left center)、左底点(left bottom)中的任意点。

示例性的，若最大父节点容器元素为如图5所示的容器A，则缩放基点可以为如图5所示的左顶点、右底点、左中心点。

若布局结构信息表征初始布局页面为左右结构，且视图属性信息表征初始布局为右视图，则缩放基点为最大父节点容器元素的右顶点(right top)、右中心点(rightcenter)、右底点(right bottom)中的任意点。

示例性的，若最大父节点容器元素为如图5所示的容器C，则缩放基点可以为如图5所示的右顶点、右底点、右中心点。

若布局结构信息表征初始布局页面为上下结构，且视图属性信息表征初始布局为上视图，则缩放基点为最大父节点容器元素的左顶点(left top)、中心顶点(center top)、右顶点(right top)中的任意点。

若布局结构信息表征初始布局页面为上下结构，且视图属性信息表征初始布局为下视图，则缩放基点为最大父节点容器元素的左底点(left bottom)、中心底点(centerbottom)、右底点(right bottom)中的任意点。

在本实施例中，针对不同的布局结构信息和视图属性信息，采用不同的点作为缩放基点，可以避免以中心点作为缩放基点的单一性，实现了确定缩放基点的灵活性和多样性，且可以实现对最大父节点容器元素、以及最大父节点容器元素中的其他元素的整体移动，避免最大父节点容器元素中的部分元素没有被缩放，甚至出现在其他最大父节点容器元素中的弊端，提高了缩放处理的有效性和可靠性。

S308：根据缩放基点和变化比率，对最大父节点容器元素进行缩放处理，得到目标布局页面。

示例性的，以缩放基点为基准，根据变化比率对最大父节点容器元素进行缩放处理。如缩放基点在缩放处理过程中，位置不发生变化，最大父节点容器元素中的其他点以该点为基准，进行缩放处理。

示例性的，如图5所示，若初始布局页面的最大父节点容器元素为容器A，起始位置信息为[1000，400](单位为像素px)，结束位置信息为[800，320](单位为像素px)，拖拽类型为缩小类型，变化比率为scale X＝scale Y＝0.8，缩放基点为左顶点。

如图5所示，若初始布局页面的最大父节点容器元素为容器B，起始位置信息为[1000，800](单位为像素px)，结束位置信息为[800，640](单位为像素px)，拖拽类型为缩小类型，变化比率为scale X＝scale Y＝0.8，缩放基点为左顶点。

如图5所示，若初始布局页面的最大父节点容器元素为容器C，起始位置信息为[800，1200](单位为像素px)，结束位置信息为[1000，1200](单位为像素px)，拖拽类型为放大类型，变化比率为scale X＝1.25，scale Y＝1，缩放基点为右顶点或右底点。

在本实施例中，通过基于布局结构信息和视图属性信息确定缩放基点，以基于缩放基点进行缩放处理，可以避免以初始布局页面的中心点为缩放基点进行缩放处理处理时，最大父节点容器元素中的部分元素没有被缩放，甚至出现在其他最大父节点容器元素中的弊端，从而提高了缩放处理的有效性和可靠性。

应该理解的是，上述实施例只是用于示范性地说明，本公开的页面生成方法可能的实施例，而不能理解为对实施例的限定。

示例性的，可以通过特征抽取、特征组合、以及特征新增等方式对上述第一实施例、第二实施例、第三实施例中的至少部分实施例进行调整，得到新的实施例。

例如，以将第二实施例和第三实施例中的至少部分技术特征组合为例，进行示范性地阐述如下。

在第三实施例中，S308为阐述了根据缩放基点和变化比率，对最大父节点容器元素进行缩放处理，在第二实施例中，阐述了以变形属性对最大父节点容器元素进行缩放处理，因此，在一些实施例中，S308可以替换为如下步骤：

例如，CSS属性的transform：scale(scale X，scale Y)。

第二步骤：根据缩放基点添加CSS属性的变形属性-基点(transform-origin)，以改变CSS属性的transform的原始基点(如中心点)。

第三步骤：根据CSS属性的transform-origin、CSS属性的transform：scale(scaleX，scale Y)，对最大父节点容器元素进行缩放处理，以使得初始布局页面完成二维(2D)缩放，得到目标布局页面。

在一些实施例中，CSS属性可以包括四个部分，分别为：查找并计算样式(style)、重新布局(layout)、绘制(paint)、层级组合(composite)。若采用如上实施例所述的通过自适应计算元素尺寸的方式实现页面拖拽时，计算各个层级元素尺寸属于重新布局，重新布局的改变会引起后续的绘制和层级组合。而transform位于层级组合，所以，通过采用transform实现拖拽相对更快更流畅。

且从硬件结构分析，若执行页面生成方法的为计算机，计算机包括浏览器和图形处理器(graphics processing unit，GPU)，则通过对transform赋值，浏览器可以适用独立的合成器进程为其创建独立的复合图层，如缩放处理开始时，复合图层可以被加载到GPU形成渲染纹理用于初始化绘制，然后由GPU的复合器执行缩放处理，若缩放处理结束，则可以再次重绘删除复合图层，从而从硬件结构上提高拖拽的效率。

图6是根据本公开第四实施例的示意图，如图6所示，本公开实施例的页面生成装置600，包括：

第一获取单元601，用于获取拖拽初始布局页面的起始位置信息和结束位置信息。

第一确定单元602，用于确定初始布局页面中的最大父节点容器元素。

缩放单元603，用于根据起始位置信息和结束位置信息，对最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面。

图7是根据本公开第五实施例的示意图，如图7所示，本公开实施例的页面生成装置700，包括：

第一获取单元701，用于获取拖拽初始布局页面的起始位置信息和结束位置信息。

第一确定单元702，用于确定初始布局页面中的最大父节点容器元素。

缩放单元703，用于根据起始位置信息和结束位置信息，对最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面。

在一些实施例中，结合图7可知，缩放单元703，包括：

计算子单元7031，用于根据起始位置信息和结束位置信息，计算得到拖拽初始布局页面的变化比率。

缩放子单元7032，用于根据变化比率，对最大父节点容器元素进行缩放处理，得到目标布局页面。

在一些实施例中，结合图7可知，页面生成装置700还包括：

第二获取单元704，用于获取初始布局页面的布局结构信息和视图属性信息，其中，布局结构信息和视图属性信息以浏览初始布局页面的视角为基准。

第二确定单元705，用于根据布局结构信息和视图属性信息，确定缩放基点。

以及，缩放单元703(且具体可以为缩放单元703中的缩放子单元7032)用于，根据缩放基点和变化比率，对最大父节点容器元素进行缩放处理，得到目标布局页面。

在一些实施例中，若布局结构信息表征初始布局页面为左右结构，且视图属性信息表征初始布局为左视图，则缩放基点为最大父节点容器元素的左顶点、左中心点、左底点中的任意点。

若布局结构信息表征初始布局页面为左右结构，且视图属性信息表征初始布局为右视图，则缩放基点为最大父节点容器元素的右顶点、右中心点、右底点中的任意点。

若布局结构信息表征初始布局页面为上下结构，且视图属性信息表征初始布局为上视图，则缩放基点为所述最大父节点容器元素的左顶点、中心顶点、右顶点中的任意点。

若布局结构信息表征初始布局页面为上下结构，且视图属性信息表征初始布局为下视图，则缩放基点为最大父节点容器元素的左底点、中心底点、右底点中的任意点。

在一些实施例中，缩放子单元7032，包括：

添加模块，用于根据变化比率，添加最大父节点容器元素的层叠样式表属性中的变形属性。

缩放模块，用于根据变形属性，对最大父节点容器元素进行缩放处理，得到目标布局页面。

在一些实施例中，结合图7可知，页面生成装置700还包括：

第三获取单元706，用于获取拖拽初始布局页面的拖拽类型，拖拽类型为放大类型或者缩小类型。

以及，缩放单元703(且具体可以为缩放单元703中的缩放子单元7032)用于，若拖拽类型为缩小类型，则根据起始位置信息和结束位置信息，计算得到拖拽初始布局页面的变化比率。

在一些实施例中，若所述拖拽类型为放大类型，结合图7可知，页面生成装置700还包括：

第四获取单元707，用于若结束位置信息不属于初始布局页面，则获取布局页面的布局结构信息，其中，布局结构信息以浏览初始布局页面的视角为基准。

以及，缩放单元703(且具体可以为缩放单元703中的缩放子单元7032)用于，根据布局结构信息、起始位置信息、以及结束位置信息，计算得到变化比率。

在一些实施例中，起始位置信息包括起始横坐标和起始纵坐标，结束位置信息包括结束横坐标和结束纵坐标，变化比率包括横坐标变化比率和纵坐标变化比率。

根据本公开实施例的另一个方面，本公开还提供了一种终端设备，包括：如上任意实施例所述的页面生成装置、以及显示装置，其中，显示装置用于输出初始布局页面和目标布局页面。

示例性的，终端设备包括如上第四实施例或者第五实施例所述的页面生成装置。

在一些实施例中，终端设备还包括拖拽手柄，拖拽手柄用于支持实现页面拖拽。

其中，如拖拽手柄可以为鼠标，也可以为键盘，等等，此处不再一一列举。

图8是根据本公开第六实施例的示意图，如图8所示，本公开中的电子设备800可以包括：处理器801和存储器802。

存储器802，用于存储程序；存储器802，可以包括易失性存储器(英文：volatilememory)，例如随机存取存储器(英文：random-access memory，缩写：RAM)，如静态随机存取存储器(英文：static random-access memory，缩写：SRAM)，双倍数据率同步动态随机存取存储器(英文：Double Data Rate Synchronous Dynamic Random Access Memory，缩写：DDR SDRAM)等；存储器也可以包括非易失性存储器(英文：non-volatile memory)，例如快闪存储器(英文：flash memory)。存储器802用于存储计算机程序(如实现上述方法的应用程序、功能模块等)、计算机指令等，上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器802中。并且上述的计算机程序、计算机指令、数据等可以被处理器801调用。

上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器802中。并且上述的计算机程序、计算机指据等可以被处理器801调用。

处理器801，用于执行存储器802存储的计算机程序，以实现上述实施例涉及的方法中的各个步骤。

具体可以参见前面方法实施例中的相关描述。

处理器801和存储器802可以是独立结构，也可以是集成在一起的集成结构。当处理器801和存储器802是独立结构时，存储器802、处理器801可以通过总线803耦合连接。

本实施例的电子设备可以执行上述方法中的技术方案，其具体实现过程和技术原理相同，此处不再赘述。

本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

根据本公开的实施例，本公开还提供了一种计算机程序产品，计算机程序产品包括：计算机程序，计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从可读存储介质读取计算机程序，至少一个处理器执行计算机程序使得电子设备执行上述任一实施例提供的方案。

图9示出了可以用来实施本公开的实施例的示例电子设备900的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字助理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图9所示，设备900包括计算单元901，其可以根据存储在只读存储器(ROM)902中的计算机程序或者从存储单元908加载到随机访问存储器(RAM)903中的计算机程序，来执行各种适当的动作和处理。在RAM 903中，还可存储设备900操作所需的各种程序和数据。计算单元901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

设备900中的多个部件连接至I/O接口905，包括：输入单元906，例如键盘、鼠标等；输出单元907，例如各种类型的显示器、扬声器等；存储单元908，例如磁盘、光盘等；以及通信单元909，例如网卡、调制解调器、无线通信收发机等。通信单元909允许设备900通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元901可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元901的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元901执行上文所描述的各个方法和处理，例如页面生成方法。例如，在一些实施例中，页面生成方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元908。在一些实施例中，计算机程序的部分或者全部可以经由ROM 902和/或通信单元909而被载入和/或安装到设备900上。当计算机程序加载到RAM 903并由计算单元901执行时，可以执行上文描述的页面生成方法的一个或多个步骤。备选地，在其他实施例中，计算单元901可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行页面生成方法。

本文中以上描述的***和技术的各种实施方式可以在数字电子电路***、集成电路***、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上***的***(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程***上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储***、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储***、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行***、装置或设备使用或与指令执行***、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体***、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的***和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的***和技术实施在包括后台部件的计算***(例如，作为数据服务器)、或者包括中间件部件的计算***(例如，应用服务器)、或者包括前端部件的计算***(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的***和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算***中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将***的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机***可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务("Virtual Private Server"，或简称"VPS")中，存在的管理难度大，业务扩展性弱的缺陷。服务器也可以为分布式***的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims

1.一种页面生成方法，包括：

获取拖拽初始布局页面的起始位置信息和结束位置信息；

确定所述初始布局页面中的最大父节点容器元素；

2.根据权利要求1所述的方法，其中，根据所述起始位置信息和所述结束位置信息，对所述最大父节点容器元素进行缩放处理，得到拖拽后的目标布局页面，包括：

根据所述起始位置信息和所述结束位置信息，计算得到拖拽所述初始布局页面的变化比率；

根据所述变化比率，对所述最大父节点容器元素进行缩放处理，得到所述目标布局页面。

3.根据权利要求2所述的方法，所述方法还包括：

获取所述初始布局页面的布局结构信息和视图属性信息，其中，所述布局结构信息和所述视图属性信息以浏览所述初始布局页面的视角为基准；

根据所述布局结构信息和所述视图属性信息，确定缩放基点；

以及，根据所述变化比率，对所述最大父节点容器元素进行缩放处理，得到所述目标布局页面，包括：根据所述缩放基点和所述变化比率，对所述最大父节点容器元素进行缩放处理，得到所述目标布局页面。

4.根据权利要求3所述的方法，其中，若所述布局结构信息表征所述初始布局页面为左右结构，且所述视图属性信息表征所述初始布局为左视图，则所述缩放基点为所述最大父节点容器元素的左顶点、左中心点、左底点中的任意点；

若所述布局结构信息表征所述初始布局页面为左右结构，且所述视图属性信息表征所述初始布局为右视图，则所述缩放基点为所述最大父节点容器元素的右顶点、右中心点、右底点中的任意点；

若所述布局结构信息表征所述初始布局页面为上下结构，且所述视图属性信息表征所述初始布局为上视图，则所述缩放基点为所述最大父节点容器元素的左顶点、中心顶点、右顶点中的任意点；

若所述布局结构信息表征所述初始布局页面为上下结构，且所述视图属性信息表征所述初始布局为下视图，则所述缩放基点为所述最大父节点容器元素的左底点、中心底点、右底点中的任意点。

5.根据权利要求2-4中任一项所述的方法，其中，根据所述变化比率，对所述最大父节点容器元素进行缩放处理，得到所述目标布局页面，包括：

根据所述变化比率，添加所述最大父节点容器元素的层叠样式表属性中的变形属性；

根据所述变形属性，对所述最大父节点容器元素进行缩放处理，得到所述目标布局页面。

6.根据权利要求2-5中任一项所述的方法，所述方法还包括：

获取拖拽所述初始布局页面的拖拽类型，所述拖拽类型为放大类型或者缩小类型；

以及，根据所述起始位置信息和所述结束位置信息，计算得到拖拽所述初始布局页面的变化比率，包括：若所述拖拽类型为缩小类型，则根据所述起始位置信息和所述结束位置信息，计算得到拖拽所述初始布局页面的变化比率。

7.根据权利要求6所述的方法，若所述拖拽类型为放大类型，则所述方法还包括：

若所述结束位置信息不属于所述初始布局页面，则获取所述布局页面的布局结构信息，其中，所述布局结构信息以浏览所述初始布局页面的视角为基准；

以及，根据所述起始位置信息和所述结束位置信息，计算得到拖拽所述初始布局页面的变化比率，包括：根据所述布局结构信息、所述起始位置信息、以及所述结束位置信息，计算得到所述变化比率。

8.根据权利要求7所述的方法，其中，所述起始位置信息包括起始横坐标和起始纵坐标，所述结束位置信息包括结束横坐标和结束纵坐标，所述变化比率包括横坐标变化比率和纵坐标变化比率；

若所述布局结构信息表征所述初始布局页面为左右结构，则所述横坐标变化比率为所述结束横坐标与所述起始横坐标之间的比值，所述纵坐标变化比率为1；

若所述布局结构信息表征所述初始布局页面为上下结构，则所述纵坐标变化比率为所述结束纵坐标与所述起始纵坐标之间的比值，所述横坐标变化比率为1。

9.一种页面生成装置，包括：

第一获取单元，用于获取拖拽初始布局页面的起始位置信息和结束位置信息；

10.根据权利要求9所述的装置，其中，所述缩放单元，包括：

计算子单元，用于根据所述起始位置信息和所述结束位置信息，计算得到拖拽所述初始布局页面的变化比率；

缩放子单元，用于根据所述变化比率，对所述最大父节点容器元素进行缩放处理，得到所述目标布局页面。

11.根据权利要求10所述的装置，所述装置还包括：

第二获取单元，用于获取所述初始布局页面的布局结构信息和视图属性信息，其中，所述布局结构信息和所述视图属性信息以浏览所述初始布局页面的视角为基准；

第二确定单元，用于根据所述布局结构信息和所述视图属性信息，确定缩放基点；

以及，所述缩放单元用于，根据所述缩放基点和所述变化比率，对所述最大父节点容器元素进行缩放处理，得到所述目标布局页面。

12.根据权利要求11所述的装置，其中，若所述布局结构信息表征所述初始布局页面为左右结构，且所述视图属性信息表征所述初始布局为左视图，则所述缩放基点为所述最大父节点容器元素的左顶点、左中心点、左底点中的任意点；

13.根据权利要求10-12中任一项所述的装置，其中，所述缩放子单元，包括：

添加模块，用于根据所述变化比率，添加所述最大父节点容器元素的层叠样式表属性中的变形属性；

缩放模块，用于根据所述变形属性，对所述最大父节点容器元素进行缩放处理，得到所述目标布局页面。

14.根据权利要求10-13中任一项所述的装置，所述装置还包括：

第三获取单元，用于获取拖拽所述初始布局页面的拖拽类型，所述拖拽类型为放大类型或者缩小类型；

以及，所述缩放单元用于，若所述拖拽类型为缩小类型，则根据所述起始位置信息和所述结束位置信息，计算得到拖拽所述初始布局页面的变化比率。

15.根据权利要求14所述的装置，若所述拖拽类型为放大类型，则所述装置还包括：

第四获取单元，用于若所述结束位置信息不属于所述初始布局页面，则获取所述布局页面的布局结构信息，其中，所述布局结构信息以浏览所述初始布局页面的视角为基准；

以及，所述缩放单元用于，根据所述布局结构信息、所述起始位置信息、以及所述结束位置信息，计算得到所述变化比率。

16.根据权利要求15所述的装置，其中，所述起始位置信息包括起始横坐标和起始纵坐标，所述结束位置信息包括结束横坐标和结束纵坐标，所述变化比率包括横坐标变化比率和纵坐标变化比率；

17.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-8中任一项所述的方法。

18.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-8中任一项所述的方法。

19.一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现权利要求1-8中任一项所述方法的步骤。

20.一种终端设备，包括：

如权利要求9-16中任一项所述的装置；

显示装置，用于输出初始布局页面和目标布局页面。