CN115167963A - 一种基于h5的多层级窗口快速响应的方法及存储介质 - Google Patents

Abstract

一种基于H5的多层级窗口快速响应的方法，包括如下步骤，步骤101，识别每个可视化页面中的元素；步骤102，为每个元素，添加内容窗口，所述内容窗口用于展示元素内容，所述内容窗口的边框为非透明的可视状态；步骤103，为每个元素，添加移动窗口，所述移动窗口用于独立于所述内容窗口进行移动，所述移动窗口为透明的非可视状态。将各元素设计搭配对应的三个窗口，能够将设计过程中可能用到的显示、移动和缩放功能通过三个窗口分别进行响应，从而提升操作的响应速度并降低系统的运算资源占用。

Description

一种基于H5的多层级窗口快速响应的方法及存储介质

技术领域

本方案涉及H5应用领域，尤其涉及一种H5的多层级窗口快速响应的方法。

背景技术

随着web应用的不断发展，H5技术渐渐崭露头角。随着H5技术的兴起，为了快速开发界面，需要H5可视化页面自定义拖拽布局功能。

现有实现H5可视化页面自定义拖拽布局的技术有很多种，目前广泛运用在可视化页面自定义拖拽布局的实现主要是基于H5的拖拽API接口直接拖拽元素来实现。上述通过h5的拖拽API接口直接拖拽元素的方式，在拖动的元素内容较多情况下，十分损耗性能，会造成界面拖动卡顿不流畅的情况，响应速率不佳的情况。因此，目前的现实情况是可视化拖拽页面只能在少量元素内容下展现较好的体验，在元素内容较多情况下并不能带来优越的用户体验。直接拖拽元素内容生成可视化页面的方式，除了性能损耗比较多，会造成使用的内存较大，在一些较差的设备上，容易出现内存崩溃的情况。同时，在多次拖拽移动或者缩放操作下，界面需要实时的为拖拽元素的行为作出响应，造成性能上极度浪费。

发明内容

为此，需要提供一种H5的多层级窗口快速响应的方法，能够节省计算量，提升拖拽元素的资源利用率。

为实现上述目的，发明人提供了一种基于H5的多层级窗口快速响应的方法，包括如下步骤，步骤101，识别每个可视化页面中的元素；

步骤102，为每个元素，添加内容窗口，所述内容窗口用于展示元素内容，所述内容窗口的边框为非透明的可视状态；

步骤103，为每个元素，添加移动窗口，所述移动窗口用于独立于所述内容窗口进行移动，所述移动窗口为透明的非可视状态；

步骤104，为每个元素，添加缩放窗口，所述缩放窗口用于独立于所述内容窗口进行缩放操作，所述缩放窗口为透明的非可视状态。

具体地，还包括步骤，识别用户操作，当识别为拖拽移动操作时，响应所述拖拽移动操作得到移动窗口的移动后坐标位置，将所述内容窗口的内容和所述缩放窗口适应所述移动后坐标位置。

具体地，当识别为拖拽移动操作时，移动窗口的边框由透明转为具有颜色的可视状态，并响应所述拖拽移动操作得到移动后坐标位置，再将移动窗口的边框由具有颜色的可视状态转为透明的非可视窗口状态。

具体地，当用户选中移动窗口时，将所述缩放窗口由透明转为具有颜色的可视状态，同一时刻最多只有一个元素的缩放窗口为具有颜色的可视状态。

具体地，还包括步骤，识别用户操作，当识别为缩放操作时，响应所述缩放操作得到缩放窗口的缩放后坐标位置，将所述内容窗口的内容和所述移动窗口适应所述缩放后坐标位置。

具体地，当识别为缩放操作时，将缩放窗口的边框由透明转为具有颜色的可视状态，并响应所述缩放操作得到缩放后坐标位置，将第三可视化窗口的边框由具有颜色的可视状态转为透明的非可视状态缩放窗口。

具体地，所述缩放窗口包括边框及边框上的缩放事件监听功能。

具体地，所述内容窗口设置于最底层、所述移动窗口设置于中层、所述缩放窗口设置于最上层。

一种基于H5的多层级窗口快速响应的存储介质，存储有计算机程序，所述计算机程序在被执行时用于执行包括如下步骤，步骤101，识别每个可视化页面中的元素；

步骤102，为每个元素，添加内容窗口，所述内容窗口用于展示元素内容，所述内容窗口的边框为非透明的可视状态；

步骤103，为每个元素，添加移动窗口，所述移动窗口用于独立于所述内容窗口进行移动，所述移动窗口为透明的非可视状态；

步骤104，为每个元素，添加缩放窗口，所述缩放窗口用于独立于所述内容窗口进行缩放操作，所述缩放窗口为透明的非可视状态。

具体地，所述计算机程序在被执行时还用于执行包括步骤，识别用户操作，当识别为拖拽移动操作时，移动窗口的边框由透明转为具有颜色的可视状态，并响应所述拖拽移动操作得到移动后坐标位置，再将移动窗口的边框由具有颜色的可视状态转为透明的非可视窗口状态。

具体地，所述计算机程序在被执行时还用于执行包括步骤，识别用户操作，当识别为缩放操作时，响应所述缩放操作得到缩放窗口的缩放后坐标位置，将所述内容窗口的内容和所述移动窗口适应所述缩放后坐标位置，当识别为缩放操作时，将缩放窗口的边框由透明转为具有颜色的可视状态，并响应所述缩放操作得到缩放后坐标位置，将第三可视化窗口的边框由具有颜色的可视状态转为透明的非可视状态缩放窗口。

具体地，所述计算机程序在被执行时还用于执行上述的基于H5的多层级窗口快速响应的方法。

区别于现有技术，上述技术方案通过在H5设计页面中，将各元素设计搭配对应的三个窗口，能够将设计过程中可能用到的显示、移动和缩放功能通过三个窗口分别进行响应，从而提升操作的响应速度并降低系统的运算资源占用。

附图说明

图1为具体实施方式所述的一种基于H5的多层级窗口快速响应的方法流程图；

图2为具体实施方式所述的H5多层级窗口示意图；

图3为具体实施方式所述的数据同步流程示意图

图4为具体实施方式所述的H5的多层级窗口快速响应存储介质。

具体实施方式

为详细说明技术方案的技术内容、构造特征、所实现目的及效果，以下结合具体实施例并配合附图详予说明。

请参阅图1，一种基于H5的多层级窗口快速响应的方法，包括如下步骤，

步骤101，识别每个可视化页面中的元素；

步骤102，为每个元素，添加内容窗口，所述内容窗口用于展示元素内容，所述内容窗口的边框为非透明的可视状态；

步骤103，为每个元素，添加移动窗口，所述移动窗口用于独立于所述内容窗口进行移动，所述移动窗口为透明的非可视状态；

步骤104，为每个元素，添加缩放窗口，所述缩放窗口用于独立于所述内容窗口进行缩放操作，所述缩放窗口为透明的非可视状态。

其中每个识别出的元素可以每个元素设计一组显示组件，各元素对应的显示组件包括内容窗口、移动窗口和缩放窗口。其中元素可以是H5页面的可视化内容，如图片、视频、文本框等等，内容窗口用于作为该元素的容器定义了该元素的可视化范围，移动窗口可以是上述的拖拽移动窗口，可以用于响应移动操作。移动操作可以是鼠标长按元素所在区域。缩放窗口可以是上述的拖拽缩放窗口，可以用于响应缩放操作。所述缩放操作可以是鼠标长按缩放窗口上的控制按钮等等。通过设计上述窗口来分别执行不同事件响应，能够有效节省系统资源占用并提升响应速度。上述技术方案通过在H5设计页面中，将各元素设计搭配对应的三个窗口，能够将设计过程中可能用到的显示、移动和缩放功能通过三个窗口分别进行响应，从而提升操作的响应速度并降低系统的运算资源占用。

在另一些如图2所示的实施例中，所述内容窗口设置于最底层、所述移动窗口设置于中层、所述缩放窗口设置于最上层。从图中可以看到最底层的窗口为元素内容展示窗口11，内容展示窗口主要存放真实的元素，主要是用于体现内容的可视化，在拖拽缩放窗口和拖拽移动窗口进行操作的时候，保持展示效果。中层的窗口为拖拽移动的窗口12，实际上由简单的四个边框以及边框内的空白且可拖拽移动的元素组成并绑定拖拽移动的事件监听。拖拽移动窗口主要是用来在用户进行拖拽元素的时候，并不操作最底层的真实元素，而是只操作该层级的方框元素。最上层的窗口为拖拽缩放的窗口，实际上由简单的四个边框以及边框上的8个圆圈点元素组成并绑定拖拽缩放的事件监听。拖拽缩放窗口13主要是用来在用户进行元素缩放的时候，并不对最底层的真实元素进行缩放，而只是对该窗口的边框进行缩放操作。内容展示窗口与拖拽移动的拖拽缩放窗口的大小可以设置为相同，也可以设置为内容展示窗口略小于拖拽移动窗口和拖拽缩放窗口，从而方便用户进行拖拽和缩放的事件监听。

在另一些具体的实施例中，还包括步骤，识别用户操作，当识别为拖拽移动操作时，响应所述拖拽移动操作得到移动窗口的移动后坐标位置，将所述内容窗口的内容和所述缩放窗口适应所述移动后坐标位置。这里的拖拽动作可以是鼠标长按元素所在区域，可以是长按内容窗口，可以是长按移动窗口，可以是长按缩放窗口。通过判定拖拽动作的移动坐标差值，可以实时计算移动窗口的移动目标坐标位置，待拖拽移动操作结束后得到最终的移动窗口的目标坐标位置。再将内容窗口的内容同步更新到移动后的移动窗口的目标坐标位置，再将缩放窗口的坐标同步更新到移动后的移动窗口的目标坐标位置。

在其他一些具体的实施例中，为了方便用户在拖拽的时候能够直观看到拖拽的移动结果，当识别为拖拽移动操作时，移动窗口的边框由透明转为具有颜色的可视状态，并响应所述拖拽移动操作得到移动后坐标位置，再将移动窗口的边框由具有颜色的可视状态转为透明的非可视窗口状态。具体的，可以通过修改移动窗口的边框的GRB值调整移动窗口的边框的显示状态(透明或者非透明)。再将内容窗口的内容同步更新到移动后的移动窗口的目标坐标位置，再将缩放窗口的坐标同步更新到移动后的移动窗口的目标坐标位置。通过上述方案达到了直观化用户操作结果的效果，提升了本方案的实用性。

在本申请的一些实施例中，中层的窗口可以是移动窗口12，移动窗口由简单的四个边框以及边框内的空白且可拖拽移动的元素组成并绑定拖拽移动的事件监听。最上层为缩放窗口13，实际上由简单的四个边框以及边框上的8个圆圈点元素组成并绑定拖拽缩放的事件监听。缩放窗口与移动窗口并不绑定显示，在实际应用中可以只显示元素的内容窗口和移动窗口，当用户选中移动窗口时，才将该元素的内容窗口和移动窗口高于其他元素窗口显示，再将选中的该元素的缩放窗口由透明转为具有颜色的可视状态，这样在之后用户可以针对该元素的缩放窗口进行缩放操作，达到了在平时隐藏缩放窗口，减少显示处理器的计算负担的技术效果。进一步地，当用户对其他元素的任意窗口进行选取时，原先元素的缩放窗口又变回了非可视状态，因此在同一时刻最多只有一个元素的缩放窗口为具有颜色的可视状态。达到了页面中能够兼容显示更多H5组件的技术效果。更好地优化了显示资源的配置。

其他的一些具体实施例中，还包括步骤，识别用户操作，当识别为缩放操作时，响应所述缩放操作得到缩放窗口的缩放后坐标位置。这里的缩放操作可以是对缩放窗口的边框进行鼠标长按拖动进行缩放和拉伸的操作，在缩放和拉伸操作结束之后，得到新的缩放窗口的新的坐标。在之后可以将所述内容窗口的内容和所述移动窗口的边框根据缩放窗口的新的坐标进行缩放，使得内容窗口的内容和所述移动窗口适应所述缩放后的新的缩放窗口的坐标位置。

其他的一些具体的实施例中，为了使得用户操作更为直观化，当识别为缩放操作时，将缩放窗口的边框由透明转为具有颜色的可视状态，并响应所述缩放操作得到缩放后坐标位置，将第三可视化窗口的边框由具有颜色的可视状态转为透明的非可视状态缩放窗口。具体的，可以通过修改缩放窗口的边框的GRB值调整移动窗口的边框的显示状态(透明或者非透明)。再将移动窗口的坐标同步更新到移动后的缩放窗口的目标坐标位置。通过上述方案达到了直观化用户操作结果的效果，提升了本方案的实用性。

其他一些进一步的实施例中，所述缩放窗口包括边框及边框上的缩放事件监听功能。例如缩放窗口可以包括方形的边框和边框四角的控制点，可以用于缩放窗口缩放。还可以包括边框中部的控制点，可以用于缩放窗口的拉伸。通过上述控制点能够方便进行用户操作。

一些实施例中，还可以介绍数据同步流程如图3所示：步骤201，识别用户进行的动作。

步骤202，判断该动作是否为拖拽移动动作，若是，进行步骤203；否则进行步骤204；

步骤203，移动窗口响应拖拽移动事件，移动窗口的移动事件在响应后，对移动窗口的位置位移进行计算，得到移动窗口的变化值。在移动行为结束后，保存移动窗口移动后位置坐标的变化值。

步骤204，缩放窗口响应拖拽缩放事件，缩放窗口的缩放事件在响应后，对缩放窗口的大小状态进行计算，得到缩放后的宽高。在缩放操作结束后，保存缩放窗口缩放后元素宽度和高度的变化值。

步骤205，将窗口操作后生成的数据同步到所有窗口。所有窗口保持数据一致性。真实的元素展示窗口，根据数据进行位置和大小的状态渲染。

通过共享数据保持三个独立窗口的一致性。三层窗口在位置大小的状态渲染在统一的数据驱动下保持一致。用户对元素的操作的时候，真正具有变化的是数据。可以看出，在用户对页面中的元素进行操作时，真实的元素的窗口并不每时每刻都处在变化中。用户同一时刻多次操作缩放或者移动，实际上只对移动窗口和缩放窗口进行操作，真实的元素窗口，只在移动窗口和缩放窗口多次操作结束后，通过数据来进行一次状态同步。由于移动窗口和缩放窗口只是简单的方框元素响应操作并不占用内存，同时在操作的时候也不会消耗过多的性能，能够得到更流畅的体验。

在如图4所示的实施例中，还介绍了一种基于H5的多层级窗口快速响应的存储介质400，存储有计算机程序，所述计算机程序在被执行时用于执行包括如下步骤，步骤101，识别每个可视化页面中的元素；

步骤102，为每个元素，添加内容窗口，所述内容窗口用于展示元素内容，

步骤103，为每个元素，添加移动窗口，所述移动窗口用于独立于所述内容窗口进行平移移动，

步骤104，为每个元素，添加缩放窗口，所述缩放窗口用于独立于所述内容窗口进行缩放操作。

具体地，所述计算机程序在被执行时还用于执行包括步骤，识别用户操作，当识别为拖拽移动操作时，响应所述拖拽移动操作得到移动窗口的移动后坐标位置，将所述内容窗口的内容和所述缩放窗口适应所述移动后坐标位置，当识别为拖拽移动操作时，将移动窗口变为第二可视化窗口，并响应所述拖拽移动操作得到移动后坐标位置，将第二可视化窗口变为移动窗口。

具体地，所述计算机程序在被执行时还用于执行包括步骤，识别用户操作，当识别为缩放操作时，响应所述缩放操作得到缩放窗口的缩放后坐标位置，将所述内容窗口的内容和所述移动窗口适应所述缩放后坐标位置。

具体地，当识别为缩放操作时，将缩放窗口变为第三可视化窗口，并响应所述缩放操作得到缩放后坐标位置，将第三可视化窗口变为缩放窗口。

需要说明的是，尽管在本文中已经对上述各实施例进行了描述，但并非因此限制本发明的专利保护范围。因此，基于本发明的创新理念，对本文所述实施例进行的变更和修改，或利用本发明说明书及附图内容所作的等效结构或等效流程变换，直接或间接地将以上技术方案运用在其他相关的技术领域，均包括在本发明专利的保护范围之内。

Claims (10)

1.一种基于H5的多层级窗口快速响应的方法，其特征在于，包括如下步骤，步骤101，识别每个可视化页面中的元素；

步骤102，为每个元素，添加内容窗口，所述内容窗口用于展示元素内容，所述内容窗口的边框为非透明的可视状态；

步骤103，为每个元素，添加移动窗口，所述移动窗口用于独立于所述内容窗口进行移动，所述移动窗口为透明的非可视状态；

步骤104，为每个元素，添加缩放窗口，所述缩放窗口用于独立于所述内容窗口进行缩放操作，所述缩放窗口为透明的非可视状态。

2.根据权利要求1所述的基于H5的多层级窗口快速响应的方法，其特征在于，还包括步骤，识别用户操作，当识别为拖拽移动操作时，响应所述拖拽移动操作得到移动窗口的移动后坐标位置，将所述内容窗口的内容和所述缩放窗口适应所述移动后坐标位置。

3.根据权利要求2所述的基于H5的多层级窗口快速响应的方法，其特征在于，当识别为拖拽移动操作时，移动窗口的边框由透明转为具有颜色的可视状态，并响应所述拖拽移动操作得到移动后坐标位置，再将移动窗口的边框由具有颜色的可视状态转为透明的非可视窗口状态。

4.根据权利要求2所述的基于H5的多层级窗口快速响应的方法，其特征在于，当用户选中移动窗口时，将所述缩放窗口由透明转为具有颜色的可视状态，同一时刻最多只有一个元素的缩放窗口为具有颜色的可视状态。

5.根据权利要求1所述的基于H5的多层级窗口快速响应的方法，其特征在于，还包括步骤，识别用户操作，当识别为缩放操作时，响应所述缩放操作得到缩放窗口的缩放后坐标位置，将所述内容窗口的内容和所述移动窗口适应所述缩放后坐标位置。

6.根据权利要求5所述的基于H5的多层级窗口快速响应的方法，其特征在于，当识别为缩放操作时，将缩放窗口的边框由透明转为具有颜色的可视状态，并响应所述缩放操作得到缩放后坐标位置，将第三可视化窗口的边框由具有颜色的可视状态转为透明的非可视状态缩放窗口。

7.根据权利要求1所述的基于H5的多层级窗口快速响应的方法，其特征在于，所述缩放窗口包括边框及边框上的缩放事件监听功能。

8.根据权利要求1所述的基于H5的多层级窗口快速响应的方法，其特征在于，所述内容窗口设置于最底层、所述移动窗口设置于中层、所述缩放窗口设置于最上层。

9.一种基于H5的多层级窗口快速响应的存储介质，其特征在于，存储有计算机程序，所述计算机程序在被执行时用于执行包括如下步骤，步骤101，识别每个可视化页面中的元素；

步骤102，为每个元素，添加内容窗口，所述内容窗口用于展示元素内容，所述内容窗口的边框为非透明的可视状态；

步骤103，为每个元素，添加移动窗口，所述移动窗口用于独立于所述内容窗口进行移动，所述移动窗口为透明的非可视状态；

步骤104，为每个元素，添加缩放窗口，所述缩放窗口用于独立于所述内容窗口进行缩放操作，所述缩放窗口为透明的非可视状态。

10.根据权利要求9所述的基于H5的多层级窗口快速响应的存储介质，其特征在于，所述计算机程序在被执行时还用于执行如权利要求2-8任一项所述的基于H5的多层级窗口快速响应方法。

Images