加速我的画布应用程序的提示

Question

这是关于WEB开发、画布和HTML5的。

我正在用HTML5画布和JQuery开发一个绘画应用程序。您可以绘制多个图层，并获得带有放大镜效果的动态缩放。

架构是多画布：

背景：

• 画布背景

层：

>

第1层

第2层

...

• 分层的

工具：

>

幽灵（当用户想要画线时显示“幽灵”线。释放鼠标确认绘制）

放大图层

我的问题是缩放。为了获得我想要的效果，我在放大图层上重新绘制了所有图层。当然，当您绘制2000*2000的图片时，它非常慢。更常见的是，您可以移动放大镜以缩放任何地方，并且在MouseMoveEvent上重新绘制。

为了更快，我只画了玻璃下的一小块区域（而不是整个图层）。但是它仍然很慢。我怎么才能加快速度呢？

插图：http://imgur.com/hAtYsZi

您可以在黑色圆圈中看到该区域被缩放。我使用此代码开始：

Démo：http://www.script-tutorials.com/demos/167/index.html

Answer 1

试试这个...可能会有帮助。

我猜你在做传统的“放大”：你以降低的分辨率显示，然后以全分辨率“放大”。

因此，当用户选择放大镜工具时，将所有层“展平”到另一个画布上。

然后将平面画布缓存到1/2分辨率的图像中。这将成为你的未修饰背景。

最后做一个放大技巧：从平坦的画布上抓取适当的像素，并在浮动放大镜中显示它们。

是的，展平图像需要一些开销时间，但这可能会被用户选择和定位放大镜所需的时间所抵消。