0

我正在尝试将我 20 年前编写的 TclTK 程序移植到 HTML5。

经过数小时的挫折，我了解到当您“缩放”或“翻译”HTML5 的画布元素时，它仅适用于未来的绘图，而不适用于画布上已有的项目。

这与 TclTK 相反，其中已经在画布上的项目被缩放/翻译。

没有创建一个绘制/重绘循环（当我想缩放/翻译时，我自己清除画布并重绘所有对象），是否有办法让 HTML5 的画布元素表现得像 TclTK 的一样？

还是我错过了一些大事？

4

1 回答 1

0

Canvas 2D 上下文基于像素级图像处理——它不是您显然熟悉的“保留模式”图形界面。从字面上看，您的图形没有记录可以重绘。如果你想改变图形，你必须以某种方式重新绘制它们。

最后，一切都在重绘（尽管重绘可能隐藏在您的代码中），但有一些方法可以减少您必须做的工作量。以下是一些选项，大致按照您必须对代码进行的更改量排序（大致按照提高质量/性能的顺序）：

  • 在画布上绘制图形，然后使用 CSS 属性缩放和平移画布本身（而不是画布的宽度和高度属性，这将清除它）。这将重新缩放图像，可能会降低质量，因为您没有针对当前比例重新绘制它。

  • 在画布上绘制图形，然后将它们导出到一个ImageData或数据 URL，然后在需要时将其重新绘制到画布上。再次，可能会失去质量。

以上两个本质上是继续使用您已经编写的画布代码的工具。要获得像您描述的 TK 那样的适当系统，您需要：

  • 构建您自己的场景图：创建一组表示图形的对象，如Circle、Line等，以及用于存储比例和位置等变换属性的容器。然后编写例程来遍历此图并在需要重绘时执行适当的绘图命令。

  • 请改用SVG。SVG 是一种矢量图形语言，在现代浏览器中，您可以直接将其嵌入到 HTML 中，并像处理页面的其余部分一样在 JavaScript 中进行操作。在 SVG 中，您可以简单地更改比例属性并获得您期望看到的更改。

    （之前的选择基本上是重新发明了少量的 SVG。）

于 2012-08-25T05:11:04.520 回答