[发明专利]一种基于网页画布的图形拖动优化方法

说明书

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

技术领域

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

背景技术

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

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

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

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

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

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

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

发明内容

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

本发明的技术方案为：

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

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

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

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