0

这是关于 WEB 开发、Canvas、HTML5 的。

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

该架构是多个画布：

背景 ：

  • 画布-bg

层数：

  • 第0层

  • 第一层

  • 第 2 层

...

  • 层N

工具 ：

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

  • 放大层

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

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

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

您可以在黑色圆圈中看到该区域已放大。我用这段代码开始：

演示：http ://www.script-tutorials.com/demos/167/index.html

4

1 回答 1

1

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

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

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

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

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

是的，扁平化图像有一些开销+时间，但这可能会被用户选择和放置放大镜所花费的时间所抵消。

于 2013-05-24T19:55:10.500 回答