CN111459486A - 一种基于网页画布的图形拖动优化方法 - Google Patents

Abstract

本发明公开了一种基于网页画布的图形拖动优化方法，包括以下步骤：拖动事件开始时，为被拖动的图像元素创建一个虚拟对象；拖动事件进行时，计算虚拟对象的图形样式数据，并在与图像元素不同的离屏画布上根据图形样式数据对虚拟对象进行实时渲染，并将虚拟对象的实时渲染结果与图像元素的离屏画布渲染结果叠加后进行可视化呈现；拖动事件结束时，图像元素根据与其对应的虚拟对象的图形样式数据更新自身的样式数据，并消除虚拟对象。通过虚拟对象将拖动操作瞬时化，减少图形拖动时的计算开销，并将拖动时的图形效果抽离出来以应用离屏canvas进行渲染效率优化，提升图形拖动的流畅性。

Description

一种基于网页画布的图形拖动优化方法

技术领域

本发明设计图形建模技术领域，具体涉及一种基于网页画布的图形拖动优化方法。

背景技术

目前市面上已有许多的基于网页的图形建模平台，这一类平台往往以用户的直接逻辑图形操作为基础来实现其各种各样的功能，这之中免除不了基本的图形拖动逻辑。

然而拖动事件与大部分的鼠标键盘事件不同，常规的如单击这一类的事件都是瞬时一次性触发，而拖动事件是需要长时间不断触发的事件。准确地说，拖动事件有三部分：按下、拖动、松开，其中按下和松开是一次触发事件，拖动则是会不断触发的事件。这导致编写这一类延迟性事件时需要不断地获取上一个瞬时状态并加以计算得到下一个瞬时状态，其中的计算压力与复杂性远大于常规的瞬时事件。

按照常规的设计思路，每拖动一个单位距离，都需要进行一次事件计算。当业务逻辑复杂时，特别是存在图形元素之间的递归式影响时，计算压力会指数型增加。

此外，以浏览器作为计算引擎又会大大限制拖动时的计算效率，在频繁计算的情况下，很容易出现卡顿等现象。因此，拖动操作往往是用户交互事件中较为难以处理的一类事件。

实际上在这一类软件中，具体的图形变动逻辑是写在图形元素内的。针对大部分的瞬时变化事件，这种设计是没问题的。但对于拖动这种不断变化的事件，业务情况远复杂于一次触发事件——同一个元素可能不同情况下有不同的拖动业务逻辑。而且拖动时往往需要拖动初始时图形元素的图形样式信息作为输入数据，结合初始鼠标坐标与拖动时的当前鼠标坐标计算出每个单位时间的图形变化。这导致图形元素中需要额外保存大量与图形元素本身语义无关的的数据，从而增加图形元素本身的复杂性。

而且结合实际情况来看，若将拖动事件的业务逻辑放置在图形元素中，当业务复杂时，大量的分支逻辑会导致维护起来愈发困难。不仅如此，不断回调式的触发会导致不断地计算元素的样式信息，甚至还会递归式地触发一来它的其它元素的样式信息的变化；同时还会不断地触发耗时的全局渲染，这些都会大大加重前端的运算压力，特别是在图形复杂的业务场景下，在拖动时很可能会导致大量的卡顿。

所以关键问题是如何把拖动时的业务逻辑抽出来解耦，防止干扰图形元素的语义逻辑，以及如何优化连续的图形计算渲染。

发明内容

本发明的目的是提供一种基于网页画布(canvas)的图形拖动优化方法，通过增加虚拟对象的手段将拖动操作瞬时化，减少图形拖动时的计算开销，并将拖动时的图形效果抽离出来以应用离屏canvas进行渲染效率优化，提升图形拖动的流畅性。

本发明的技术方案为：

一种基于网页画布的图形拖动优化方法，所述图形拖动优化方法包括以下步骤：

拖动事件开始时，为被拖动的图像元素创建一个虚拟对象；

拖动事件进行时，计算虚拟对象的图形样式数据，并在与图像元素不同的离屏画布上根据图形样式数据对虚拟对象进行实时渲染，并将虚拟对象的实时渲染结果与图像元素的离屏画布渲染结果叠加后进行可视化呈现；

拖动事件结束时，图像元素根据与其对应的虚拟对象的图形样式数据更新自身的样式数据，并消除虚拟对象。

其中，拖动事件开始时，为被拖动的图像元素创建一个虚拟对象，并初始化虚拟对象基础图形样式数据，然后将该虚拟对象及对应的基础图形样式数据注册到虚拟工厂。具体地，根据图像元素的初始状态、鼠标的初始状态计算虚拟对象的基础图形样式数据。

其中，拖动事件进行时，即鼠标移动时检测到虚拟工厂中有与被移动的图像元素对应的虚拟对象被注册，则自动调用虚拟对象的绘制算法实时计算虚拟对象的图形样式数据，并将图形样式数据存储到虚拟工厂。

具体地，所述绘制算法根据图像元素的初始状态、鼠标的初始状态以及当前鼠标坐标计算虚拟对象的图形样式数据。

拖动事件结束时，从虚拟工厂中根据图像元素的自身ID获取到与图像元素对应的虚拟对象，然后根据该虚拟对象的图形样式数据更新自身样式数据。

当图像元素更新完自身的样式数据时，从虚拟工厂中注销虚拟对象，此时屏幕上的虚拟对象框消失。

其中，根据图形样式数据对虚拟对象进行实时渲染，自动代用虚拟对象的渲染算法，利用渲染算法并根据虚拟对象的图形样式数据对虚拟对象进行实时渲染。

与现有技术相比，本发明具有的有益效果为：

本发明通过为每个图像元素建立虚拟对象，采用虚拟对象则能避免在拖动一个图形元素时与其它图形元素的交互影响，能避免大量的递归式计算；

在虚拟对象绘制期间，图形元素都是处于不变的状态，这使得我们在拖动过程中可以仅渲染虚拟对象图形，而不需要重复渲染整个画面中所有的图形元素，这大大优化了拖动时浏览器的图形渲染效率。

附图说明

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

图1是实施例提供的虚拟对象效果图；

图2是实施例提供的图像元素拖动时流程图。

具体实施方式

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

如图1和图2所示，实施例提供了一种基于网页画布的图形拖动优化方法。在基本的图形元素之外提出了一种新的辅助图形元素，称之为虚拟对象。虚拟对象是图形元素在拖动时创建出来的临时图形对象。虚拟对象与图形对象不同，仅仅是一种图形表达，即包含最基本的图形样式信息，不具有其它任何的语义计算能力，用于用户在拖动过程中看到拖动的“效果”。虚拟对象的作用主要包含两大部分，分别为将图形元素拖动事件瞬时化的解耦操作、离屏canvas优化渲染效率。下面针对每部分进行详细介绍。

第一部分：将图形元素拖动事件瞬时化的解耦操作

虚拟对象本身是不含任何的语义信息的，虚拟对象本身只包含供canvas绘制渲染的样式数据，所以它本身非常轻量，无论是计算还是渲染，都远快于常规的图形元素。每个虚拟对象在鼠标拖动时需要做的动作分为移动时计算和计算后渲染两步。不像在图形元素中难以维护自身的状态副本，虚拟对象在创建时就可持有一个图形元素的初始状态引用，由此仅需根据图形元素的初始状态和鼠标的初始坐标以及当前鼠标坐标，就能计算出每一刻的虚拟对象状态。

其中，所有的虚拟对象的两个动作可以作为公共父类的抽象函数moving和draw，由各个子类分别实现。在操作的全局范围内，同时只有一个虚拟对象，在鼠标事件管理器中，鼠标每移动一个单元就会先后调用moving和draw两个函数。moving函数负责绘制前计算所有的图形样式数据，与在图形元素中不同，它不需要根据复杂的图形元素语义和多样的样式信息来计算图形样式数据，它只接收一个拖动时的鼠标当前坐标和在初始化时便记录下来的拖动开始时的鼠标起始坐标以及图形元素的初始状态作为输入即可以获得图形样式数据。而draw则根据moving函数中计算得到的图形样式数据来绘制并渲染虚拟图形。

不管是不是同种元素，每种业务场景都会一一对应一种虚拟对象。在图形元素的开始拖动事件中，需要创建对应业务场景的虚拟对象，这时候会初始化虚拟对象的基础图形样式数据，该基础图形样式数据根据图形元素的初始状态和鼠标的初始坐标计算获得。然后将这个虚拟对象即对应的基础图形样式数据注册到虚拟工厂中，鼠标在移动时会判断虚拟工厂中有没有被注册的虚拟对象，若有，则在鼠标移动时不断地调用moving函数(指定的运算规则)和draw函数进行图形样式数据的计算和渲染。在图形元素结束拖动事件中，从虚拟工厂中根据自身ID获取到最初注册时的虚拟对象，再根据虚拟对象的图形样式数据来重设自身的样式信息，最后从虚拟工厂中销毁虚拟对象，此时图中的虚拟对象消失，鼠标移动时无法检测到虚拟对象，回归正常的无虚拟对象状态。

通过虚拟对象，所有在拖动时的计算逻辑都从UMLDI元素内部抽离出来，通过不同类型的虚拟对象来划分，很大程度上的实现了解耦。

第二部分：离屏canvas优化渲染效率

在浏览器上进行渲染操作是十分耗时的，很容易成为系统的性能瓶颈。为了缓解这一问题，在前端渲染过程中为了优化渲染效率，使用了离屏渲染。即在浏览器上应用多个canvas，其中只有一个canvas时用于渲染用户看得到的图形，其它的离屏canvas仅负责绘制图形，但这个绘制过程只是在内存中进行，不会呈现到当前屏幕上，绘制完后再将整个图片用非离屏canvas一次渲染出来。这种做法的本质是使GPU在屏幕缓冲区以外开辟一个新的缓冲区进行渲染操作。这种优化技术比较适合应用在需要用多层画布去画一个复杂图形的业务场景。

实施例中，采用三屏渲染计算，其中两个用于离屏渲染。两个离屏一个是用于绘制所有的图形元素，另一个则是用来绘制所有的虚拟对象。在拖动时，会不断渲染的只有全局唯一的虚拟对象，而其它复杂的图形则作为底部图层保持不动，所以消耗相较原本的全局渲染小很多。第三个屏幕用于综合图形元素渲染结果和虚拟对象渲染结果以进行可视化呈现。

虚拟对象本身结构十分简单，不存在各种各样的子节点元素等，仅含图形轮廓，绘制起来成本低下，即使在拖动期间需要不断地绘制渲染也不会过大地影响性能。而在元素的拖动过程中，图形元素屏上的图形是完全没变化的，故每次更新的只有虚拟对象屏，而真正的展示屏只需要将这两个离屏作为两个图层绘制到它的“展示板”上。

上述的用于网页画布(canvas)的图形拖动优化方法，在业务层面上，采用虚拟对象则能避免在拖动一个图形元素时与其它图形元素的交互影响，能避免大量的递归式计算。通过将拖动时的效果计算抽离到虚拟对象中，原有图形元素仅需要处理鼠标的按下松开事件，即由延时事件转变为瞬时事件，延时事件由虚拟对象处理。此外另一大优势在于，通过应用虚拟对象，在虚拟对象绘制期间，图形元素都是处于不变的状态，这使得我们在拖动过程中可以仅渲染虚拟对象图形，而不需要重复渲染整个画面中所有的图形元素，这大大优化了拖动时浏览器的图形渲染效率。

以上所述的具体实施方式对本发明的技术方案和有益效果进行了详细说明，应理解的是以上所述仅为本发明的最优选实施例，并不用于限制本发明，凡在本发明的原则范围内所做的任何修改、补充和等同替换等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种基于网页画布的图形拖动优化方法，其特征在于，所述图形拖动优化方法包括以下步骤：

拖动事件开始时，为被拖动的图像元素创建一个虚拟对象；

拖动事件进行时，计算虚拟对象的图形样式数据，并在与图像元素不同的离屏画布上根据图形样式数据对虚拟对象进行实时渲染，并将虚拟对象的实时渲染结果与图像元素的离屏画布渲染结果叠加后进行可视化呈现；

拖动事件结束时，图像元素根据与其对应的虚拟对象的图形样式数据更新自身的样式数据，并消除虚拟对象。

2.如权利要求1所述的基于网页画布的图形拖动优化方法，其特征在于，拖动事件开始时，为被拖动的图像元素创建一个虚拟对象，并初始化虚拟对象基础图形样式数据，然后将该虚拟对象及对应的基础图形样式数据注册到虚拟工厂。

3.如权利要求2所述的基于网页画布的图形拖动优化方法，其特征在于，根据图像元素的初始状态、鼠标的初始状态计算虚拟对象的基础图形样式数据。

4.如权利要求2所述的基于网页画布的图形拖动优化方法，其特征在于，拖动事件进行时，即鼠标移动时检测到虚拟工厂中有与被移动的图像元素对应的虚拟对象被注册，则自动调用虚拟对象的绘制算法实时计算虚拟对象的图形样式数据，并将图形样式数据存储到虚拟工厂。

5.如权利要求3所述的基于网页画布的图形拖动优化方法，其特征在于，所述绘制算法根据图像元素的初始状态、鼠标的初始状态以及当前鼠标坐标计算虚拟对象的图形样式数据。

6.如权利要求2所述的基于网页画布的图形拖动优化方法，其特征在于，拖动事件结束时，从虚拟工厂中根据图像元素的自身ID获取到与图像元素对应的虚拟对象，然后根据该虚拟对象的图形样式数据更新自身样式数据。

7.如权利要求2所述的基于网页画布的图形拖动优化方法，其特征在于，当图像元素更新完自身的样式数据时，从虚拟工厂中注销虚拟对象，此时屏幕上的虚拟对象框消失。

8.如权利要求2所述的基于网页画布的图形拖动优化方法，其特征在于，根据图形样式数据对虚拟对象进行实时渲染，自动代用虚拟对象的渲染算法，利用渲染算法并根据虚拟对象的图形样式数据对虚拟对象进行实时渲染。

Images