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

Hints to speed up my canvas app

本文关键字：应用程序 我的 提示      更新时间：2023-09-26

这是关于WEB开发，Canvas, HTML5。

我正在开发一个使用HTML5画布和JQuery的绘画应用程序。你可以画几个图层，你可以用放大镜效果动态缩放。

架构是多重画布:

背景:

  • canvas-bg

layers:

  • layer0

  • layer1

  • layer2

…

  • layerN

工具:

  • ghost(当用户想要画一条线时显示一条"幽灵"线)。释放鼠标确认绘制)

  • magnify-layer

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

为了更快，我只画玻璃下面的小区域(而不是整个层)。但它仍然很慢。我怎样才能加速知道呢?

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

你可以看到在黑色圆圈区域被放大。我用这段代码开始:

dsamo: http://www.script-tutorials.com/demos/167/index.html

试试这个…这可能有帮助。

我猜你在做传统的"放大":你在降低分辨率下显示，然后在全分辨率下"放大"。

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

然后将平面画布缓存为1/2分辨率的图像。这将成为未放大的背景。

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

是的，在使图像平坦化的过程中会有一些开销和时间，但这可能会被用户选择和定位放大镜所花费的时间所抵消。

相关文章：