CN112947916A - 用于实现在线画布的方法、装置、设备以及存储介质 - Google Patents

Abstract

本申请公开了一种用于实现在线画布的方法、装置、设备以及存储介质，涉及人工智能领域，尤其涉及云计算、大数据领域。具体实现方案为：确定要向初始在线画布中添加的页面设计组件；将页面设计组件绘制到弹层组件层；在弹层组件层中，基于页面设计组件和初始在线画布中的已添加组件，确定嵌套组件；基于嵌套组件更新初始在线画布，得到目标在线画布。本实现方式在用户界面(User Interface，简称UI)画布元素比较多时，可以提高页面渲染性能。

Description

用于实现在线画布的方法、装置、设备以及存储介质

技术领域

本申请涉及人工智能领域，具体涉及云计算、大数据领域，尤其涉及用于实现在线画布的方法、装置、设备以及存储介质。

背景技术

目前实现在线画布主要采用的方式是基于文档对象模型(DOM，Document ObjectModel)操作，当用户界面(UI，User Interface)画布元素比较多时，页面渲染性能上会有较大的瓶颈。

发明内容

本公开提供了一种用于实现在线画布的方法、装置、设备以及存储介质。

根据本公开的一方面，提供了一种用于实现在线画布的方法，包括：确定要向初始在线画布中添加的页面设计组件；将页面设计组件绘制到弹层组件层；弹层组件层中，基于页面设计组件和初始在线画布中的已添加组件，确定嵌套组件；基于嵌套组件更新初始在线画布，得到目标在线画布。

根据本公开的另一方面，提供了一种用于实现在线画布的装置，包括：确定单元，被配置成确定要向初始在线画布中添加的页面设计组件；绘制单元，被配置成将页面设计组件绘制到弹层组件层；嵌套组件确定单元，被配置成在弹层组件层中，基于页面设计组件和初始在线画布中的已添加组件，确定嵌套组件；画布实现单元，被配置成基于嵌套组件更新初始在线画布，得到目标在线画布。

根据本公开的再一方面，提供了一种用于实现在线画布的电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行如上述用于实现在线画布的方法。

根据本公开的又一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，上述计算机指令用于使计算机执行如上述用于实现在线画布的方法。

根据本公开的又一方面，提供了一种计算机程序产品，包括计算机程序，该计算机程序在被处理器执行时实现如上述用于实现在线画布的方法。

根据本申请的技术解决了当UI画布元素比较多时，页面渲染性能上会有较大的瓶颈的问题，通过在弹层组件层中确定嵌套组件，并基于嵌套组件实现在线画布，可以在UI画布元素比较多时，提高页面渲染性能。

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

附图说明

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

图1是本申请的一个实施例可以应用于其中的示例性系统架构图；

图2是根据本申请的用于实现在线画布的方法的一个实施例的流程图；

图3是根据本申请的用于实现在线画布的方法的一个应用场景的示意图；

图4是根据本申请的用于实现在线画布的方法的另一个实施例的流程图；

图5是根据本申请的用于实现在线画布的装置的一个实施例的结构示意图；

图6是用来实现本申请实施例的用于实现在线画布的方法的电子设备的框图。

具体实施方式

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

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图1示出了可以应用本申请的用于实现在线画布的方法或用于实现在线画布的装置的实施例的示例性系统架构100。

如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如在线画布类应用等。

终端设备101、102、103可以是硬件，也可以是软件。当终端设备101、102、103为硬件时，可以是各种电子设备，包括但不限于智能手机、平板电脑、车载电脑、膝上型便携计算机和台式计算机等等。当终端设备101、102、103为软件时，可以安装在上述所列举的电子设备中。其可以实现成多个软件或软件模块，也可以实现成单个软件或软件模块。在此不做具体限定。

服务器105可以是提供各种服务的服务器，例如将终端设备101、102、103确定的要向初始在线画布中添加的页面设计组件绘制到弹层组件层，并在弹层组件层中，基于页面设计组件和初始在线画布中的已添加组件，确定嵌套组件；基于嵌套组件更新初始在线画布，得到目标在线画布的后台服务器。

需要说明的是，服务器105可以是硬件，也可以是软件。当服务器105为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当服务器105为软件时，可以实现成多个软件或软件模块，也可以实现成单个软件或软件模块。在此不做具体限定。

需要说明的是，本申请实施例所提供的用于实现在线画布的方法一般由服务器105执行。相应地，用于实现在线画布的装置一般设置于服务器105中。

继续参考图2，示出了根据本申请的用于实现在线画布的方法的一个实施例的流程200。本实施例的用于实现在线画布的方法，包括以下步骤：

步骤201，确定要向初始在线画布中添加的页面设计组件。

本实施例中，用于实现在线画布的方法的执行主体(例如，可以是图1中的服务器105)可以通过各种方式确定要向初始在线画布中添加的页面设计组件。

具体地，执行主体可以通过监测用户的操作，来确定用户选定的要加入初始在线画布中的页面设计组件。具体地，初始在线画布中可以已经存在若干个已经添加的页面设计组件。

画布，可以控制对UI元素界面的渲染。通常渲染所有的UI元素只需要一个画布，但是UI覆盖在其他UI上面时，可以配置多个画布，还可以在一个画布上嵌套画布。如果初始没有画布，任意创建一个UI元素，就会自动生成画布，也可以通过从菜单中选择UI中的Canvas创建空白画布。

页面设计组件，可以是将一段或几段完成各自功能的代码段封装为一个或几个独立的部分。页面设计组件包含了这样一个或几个具有各自功能的代码段，最终完成了用户界面的表示。

步骤202，将页面设计组件绘制到弹层组件层。

本实施例中，弹层组件层即web弹层组件layer层是一个实现想到即可做到的web弹窗层解决方案，该解决方案可以是运行在浏览器上的脚本语言组件(js，JavaScript组件)。弹层组件层侧重于用户灵活的定义，为不同人的使用习惯提供动力，可以实现让用户的页面拥有更丰富与便捷的操作体验，只需在调用时简单地配置相关参数，即可轻松实现。

弹层组件层公开了众多的应用程序接口(API，Application ProgrammingInterface)，执行主体可以将页面设计组件绘制到该弹层组件层，用户可以自定义所需要的风格，尤其是页面层模式，并可以兼容多种浏览器，提高用户体验。

执行主体在向初始在线画布中添加页面设计组件时，首先要为即将添加的页面设计组件绑定事件，包括选中、拖拽、修改大小等事件；在绑定事件后，可以将绑定事件的页面设计组件绘制到弹层组件层。

步骤203，在弹层组件层中，基于页面设计组件和初始在线画布中的已添加组件，确定嵌套组件。

本实施例中，执行主体在将绑定事件的页面设计组件绘制到弹层组件层后，可以在弹层组件层中，基于页面设计组件和初始在线画布中的已添加组件，确定嵌套组件，具体地，执行主体可以检测当前添加到弹层组件层的页面设计组件是否位于初始在线画布的弹层组件层中的已添加组件内，如果位于某个已添加组件内，则将当前添加的页面设计组件添加到该某个已添加组件内，得到嵌套组件。

步骤204，基于嵌套组件更新初始在线画布，得到目标在线画布。

执行主体在得到嵌套组件后，可以用得到的嵌套组件替换刚添加至初始在线画布中的各自独立的页面设计组件以及初始在线画布中的已添加组件，得到更新后的目标在线画布。从而可以精简画布中的元素，以提高页面渲染性能。

继续参考图3，其示出了根据本申请的用于实现在线画布的方法的一个应用场景的示意图。在图3的应用场景中，服务器(图中未示出)确定要向初始在线画布303中添加的页面设计组件301。服务器将页面设计组件301绘制到弹层组件层302。服务器在弹层组件层302中，基于页面设计组件301和初始在线画布303中的已添加组件a，确定嵌套组件b。服务器基于嵌套组件b更新初始在线画布303，得到目标在线画布304。

本实施例通过在弹层组件层中确定嵌套组件，并基于嵌套组件实现在线画布，可以在UI画布元素比较多时，提高页面渲染性能。

继续参考图4，其示出了根据本申请的用于实现在线画布的方法的另一个实施例的流程400。如图4所示，本实施例的用于实现在线画布的方法，可以包括以下步骤：

步骤401，确定要向初始在线画布中添加的页面设计组件。

步骤401的原理与步骤201的原理类似，此处不再赘述。

步骤402，封装绘图协议框架。

本实施例中，3D绘图协议(webgl，Web Graphics Library)是一种在Web端运行的，这种绘图协议将运行在浏览器上的脚本语言(js，JavaScript)和跨编程语言、跨平台的编程接口的规格OpenGL2.0结合起来，提供硬件加速3D渲染并借助显卡来在浏览器里渲染3D场景和模型。可以实现跨平台，使用原生的canvas标签即可实现3D渲染；渲染效率高，图形的渲染基于底层的硬件加速实现。为了像操作DOM元素一样操作webgl元素，需要实现类似于原生DOM的交互方式。在网页开发中经常会有交互操作，比如点击一个DOM元素，需要让js对该操作做出相应的响应，这就需要对DOM元素进行事件绑定来进行处理，js通常有三种常用的方法进行事件绑定：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。事件监听是在web弹层组件layer层的基础上实现的，每一个层有一个用于显示图形的前台渲染器和用于监听事件的后台渲染器。通过在后台渲染器中注册全局事件来判断用户当前触发事件的图形，并调用处理事件的回调。本实施例中的封装绘图协议框架，即webgl框架的封装，可以通过定义舞台(stage)来存储图形，通过定义层来显示图形。具体地，可以通过定义函数来封装绘图协议框架，其中定义的函数需要用动词作为开头，定义的函数名字要与绘图协议框架的功能相匹配，定义的函数要写必要的注释。

本实施例通过封装绘图协议框架，可以优化代码，可以使得前端开发者可以方便、快速地应用封装后的webgl框架。

步骤403，基于封装后的绘图协议框架定义弹层组件层。

执行主体在封装绘图协议框架后，可以基于封装后的绘图协议框架定义弹层组件层，以显示绘制的图形。

本实施例通过基于封装后的绘图协议框架定义弹层组件层，可以用于显示绘制的图形，并可以用于显示用户的操作行为，帮助研发人员定位问题，解决问题，工作效率得到很高的提升。

步骤404，将页面设计组件绘制到弹层组件层。

步骤404的原理与步骤202的原理类似，此处不再赘述。

步骤405，隐藏已添加的上一个页面设计组件的锚点，显示当前添加的页面设计组件的锚点。

执行主体在将当前的页面设计组件绘制到弹层组件层后，可以隐藏已添加的上一个页面设计组件的锚点，并显示当前添加的页面设计组件的锚点。具体地，执行主体还可以将已添加的上一个页面设计组件的锚点以透明的形式显示，以精简在线画布中的锚点，避免显示的锚点过多引起混乱，具体的该锚点的透明度可供用户自定义，本申请对已添加的上一个页面设计组件的锚点的透明度不做具体限定。锚点，可以理解为是一个迅速定位器，是一种页面内的超级链接。锚点，可以设置于页面设计组件处或设置于在线画布顶部。创建对应锚点的链接，这些链接可快速将访问者或用户带到指定的页面设计组件的位置。创建锚点的链接的过程分为两步，首先创建锚点，然后创建到该锚点的链接。

本实施例通过隐藏已添加的上一个页面设计组件的锚点，并显示当前添加的页面设计组件的锚点，可以精简在线画布中的锚点，避免锚点过多容易导致用户设置错误，提升页面渲染性能。

步骤406，在弹层组件层中，基于页面设计组件和初始在线画布中的已添加组件，确定嵌套组件。

步骤406的原理与步骤203的原理类似，此处不再赘述。

具体地，步骤406还可以通过步骤4061～步骤4063来实现：

步骤4061，确定页面设计组件在弹层组件层中的第一位置以及已添加组件在弹层组件层中的第二位置。

步骤4062，根据第一位置和第二位置，确定页面设计组件是否位于已添加组件内。

步骤4063，响应于确定页面设计组件位于已添加组件内，将页面设计组件与已添加组件组成嵌套组件。

本实施例中，执行主体在判断当前添加的页面设计组件与初始在线画布中的已添加组件的位置关系时，可以通过首先确定页面设计组件在初始在线画布中的弹层组件层中的位置，这里称为第一位置，以及确定已添加组件在初始在线画布中的弹层组件层中的位置，这里称为第二位置。

执行主体在确定好对应当前添加的页面设计组件的第一位置和对应已添加组件的第二位置后，可以根据该第一位置和第二位置，确定页面设计组件是否位于已添加组件内。具体地，执行主体可以判断该第一位置和第二位置之间的关系，例如，是否是包含关系，或者是否是相交关系，或者是否是相离关系等。执行主体可以根据确定出的二者之间的关系，确定当前添加的页面设计组件是否位于已添加组件内，或者任意一个或者任意几个已添加组件是否位于当前添加的页面设计组件内，从而可以将具有包含关系的当前添加的页面设计组件和已添加组件组成嵌套组件。

本实施例通过将具有包含关系的当前添加的页面设计组件和已添加的页面设计组件组成嵌套组件，以此来得到目标在线画布，可以精简在线画布中的组件，并大大提升页面渲染性能。

步骤407，基于嵌套组件更新初始在线画布，得到目标在线画布。

步骤407的原理与步骤204的原理类似，此处不再赘述。

具体地，步骤407还可以通过步骤4071来实现：

步骤4071，基于封装后的绘图协议框架和嵌套组件，更新初始在线画布，得到目标在线画布。

执行主体在得到嵌套组件后，可以基于封装后的绘图协议框架和嵌套组件，更新初始在线画布，得到目标在线画布。具体地，执行主体在得到嵌套组件后，可以用嵌套组件将初始在线画布中的原本各自独立的组件替换，从而实现在保证页面渲染效果的前提下，使得画布中的组件更精简易看，便于用户精准找到想要操作的页面设计组件以进行进一步的设置操作，从而完善页面，并基于此提高页面渲染性能。

本实施例基于嵌套组件得到目标在线画布，实现了在保证页面渲染效果的前提下，使得画布中的组件更精简易看，便于用户精准找到想要操作的页面设计组件以进行进一步的设置操作，从而完善页面，并基于此提高页面渲染性能。

在本实施例的一些可选的实现方式中，用于实现在线画布的方法还包括：在该定义的弹层组件层中注册全局事件；基于注册的全局事件，确定用户当前触发事件的图形；调用处理图形对应的事件的回调。

本实现方式中，在封装绘图协议框架并基于该封装的绘图协议框架定义弹层组件层之后，执行主体可以在该定义的弹层组件层中注册全局事件。具体地，全局事件可以是在该弹层组件层中进行页面设计组件的添加以及在添加后的渲染时，触发的所有节点对应的事件。在该定义的弹层组件层中注册全局事件，可以理解为在该定义的弹层组件层中监听上述提到的触发的所有节点对应的事件。

执行主体在注册全局事件后，可以基于注册的全局事件，确定用户当前触发事件的图形，具体地，执行主体基于注册的全局事件以及通过监听用户当前的操作(例如添加页面设计组件操作或者渲染操作)，可以确定用户所触发的异常事件的图形，例如异常事件的DOM树。执行主体在确定用户触发的异常事件对应的DOM树后，可以调用处理该DOM对应的时间的回调函数进行处理，并将该异常事件进行输出，以供研发人员快速定位问题、解决问题，提升工作效率。

本实施例能够还原用户在使用研发人员开发的产品时发生异常时的场景，可以还原用户的操作行为，可以实现节点嵌套、时间监听、节点查找等功能，便于研发人员使用，帮助研发人员定位问题。

进一步参考图5，作为对上述各图所示方法的实现，本申请提供了一种用于实现在线画布的装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图5所示，本实施例的用于实现在线画布的装置500包括：确定单元501、绘制单元502、嵌套组件确定单元503和画布实现单元504。

确定单元501，被配置成确定要向初始在线画布中添加的页面设计组件。

绘制单元502，被配置成将页面设计组件绘制到弹层组件层。

嵌套组件确定单元503，被配置成在弹层组件层中，基于页面设计组件和初始在线画布中的已添加组件，确定嵌套组件。

画布实现单元504，被配置成基于嵌套组件更新初始在线画布，得到目标在线画布。

在本实施例的一些可选的实现方式中，嵌套组件确定单元503进一步被配置成：确定页面设计组件在弹层组件层中的第一位置以及已添加组件在弹层组件层中的第二位置；根据第一位置和第二位置，确定页面设计组件是否位于已添加组件内；响应于确定页面设计组件位于已添加组件内，将页面设计组件与已添加组件组成嵌套组件。

在本实施例的一些可选的实现方式中，用于实现在线画布的装置还包括图5中未示出的：封装单元，被配置成封装绘图协议框架；以及画布实现单元进一步被配置成：基于封装后的绘图协议框架和嵌套组件，更新初始在线画布，得到目标在线画布。

在本实施例的一些可选的实现方式中，用于实现在线画布的装置还包括图5中未示出的：隐藏/显示单元，被配置成在将页面设计组件绘制到弹层组件层中之后，隐藏已添加的上一个页面设计组件的锚点，显示当前添加的页面设计组件的锚点。

在本实施例的一些可选的实现方式中，装置还包括图5中未示出的：定义单元，被配置成基于封装后的绘图协议框架定义弹层组件层；以及用于实现在线画布的装置还包括图5中未示出的：注册单元，被配置成在该定义的弹层组件层中注册全局事件；触发事件图形确定单元，被配置成基于注册的全局事件，确定用户当前触发事件的图形；调用回调单元，被配置成调用处理图形对应的事件的回调。

应当理解，用于实现在线画布的装置500中记载的单元501至单元504分别与参考图2中描述的方法中的各个步骤相对应。由此，上文针对用于实现在线画布的方法描述的操作和特征同样适用于装置500及其中包含的单元，在此不再赘述。

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

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

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

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

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

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

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

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

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

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

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

计算机程序产品，包括计算机程序，该计算机程序在被处理器执行时实现如上述的用于实现在线画布的方法。

根据本申请实施例的技术方案，过在弹层组件层中确定嵌套组件，并基于嵌套组件实现在线画布，可以在UI画布元素比较多时，提高页面渲染性能。

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

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

Claims (13)

1.一种用于实现在线画布的方法，包括：

确定要向初始在线画布中添加的页面设计组件；

将所述页面设计组件绘制到弹层组件层；

在所述弹层组件层中，基于所述页面设计组件和所述初始在线画布中的已添加组件，确定嵌套组件；

基于所述嵌套组件更新所述初始在线画布，得到目标在线画布。

2.根据权利要求1所述的方法，其中，所述在所述弹层组件层中，基于所述页面设计组件和所述初始在线画布中的已添加组件，确定嵌套组件，包括：

确定所述页面设计组件在所述弹层组件层中的第一位置以及所述已添加组件在所述弹层组件层中的第二位置；

根据所述第一位置和所述第二位置，确定所述页面设计组件是否位于所述已添加组件内；

响应于确定所述页面设计组件位于所述已添加组件内，将所述页面设计组件与所述已添加组件组成嵌套组件。

3.根据权利要求1所述的方法，其中，在所述将所述页面设计组件绘制到弹层组件层之前，所述方法还包括：封装绘图协议框架；以及

所述基于所述嵌套组件更新所述初始在线画布，得到目标在线画布，包括：

基于封装后的绘图协议框架和所述嵌套组件，更新所述初始在线画布，得到目标在线画布。

4.根据权利要求1～3中任一项所述的方法，其中，所述方法还包括：

在将所述页面设计组件绘制到弹层组件层中之后，隐藏已添加的上一个页面设计组件的锚点，显示当前添加的页面设计组件的锚点。

5.根据权利要3所述的方法，其中，在所述封装绘图协议框架之后以及在所述将所述页面设计组件绘制到弹层组件层之前，所述方法还包括：

基于封装后的绘图协议框架定义弹层组件层；以及

所述方法还包括：

在该定义的弹层组件层中注册全局事件；

基于注册的全局事件，确定用户当前触发事件的图形；

调用处理所述图形对应的事件的回调。

6.一种用于实现在线画布的装置，包括：

确定单元，被配置成确定要向初始在线画布中添加的页面设计组件；

绘制单元，被配置成将所述页面设计组件绘制到弹层组件层；

嵌套组件确定单元，被配置成在所述弹层组件层中，基于所述页面设计组件和所述初始在线画布中的已添加组件，确定嵌套组件；

画布实现单元，被配置成基于所述嵌套组件更新所述初始在线画布，得到目标在线画布。

7.根据权利要求6所述的装置，其中，所述嵌套组件确定单元进一步被配置成：

确定所述页面设计组件在所述弹层组件层中的第一位置以及所述已添加组件在所述弹层组件层中的第二位置；

根据所述第一位置和所述第二位置，确定所述页面设计组件是否位于所述已添加组件内；

响应于确定所述页面设计组件位于所述已添加组件内，将所述页面设计组件与所述已添加组件组成嵌套组件。

8.根据权利要求6所述的装置，其中，所述装置还包括：封装单元，被配置成封装绘图协议框架；以及

所述画布实现单元进一步被配置成：基于封装后的绘图协议框架和所述嵌套组件，更新所述初始在线画布，得到目标在线画布。

9.根据权利要求6～8中任一项所述的装置，其中，所述装置还包括：隐藏/显示单元，被配置成在将所述页面设计组件绘制到弹层组件层中之后，隐藏已添加的上一个页面设计组件的锚点，显示当前添加的页面设计组件的锚点。

10.根据权利要求8所述的装置，其中，所述装置还包括：定义单元，被配置成基于封装后的绘图协议框架定义弹层组件层；以及

所述装置还包括：

注册单元，被配置成在该定义的弹层组件层中注册全局事件；

触发事件图形确定单元，被配置成基于注册的全局事件，确定用户当前触发事件的图形；

调用回调单元，被配置成调用处理所述图形对应的事件的回调。

11.一种用于实现在线画布的电子设备，其特征在于，包括：

至少一个处理器；以及

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

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

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

13.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1-5中任一项所述的方法。

Images