KineticJS：什么时候使用 toImage() 什么时候使用 cache()答案

【问题标题】：KineticJS: When do I use toImage() and when do I use cache()KineticJS：什么时候使用 toImage() 什么时候使用 cache()
【发布时间】：2014-06-04 21:10:16
【问题描述】：

我读到如果你应该使用缓存来提高性能。有一个关于此的 KineticJS 教程：http://www.html5canvastutorials.com/kineticjs/html5-canvas-shape-caching-with-kineticjs/ 它谈论缓存但使用 toImage() 方法。

当我应该使用什么时，我找不到解释。

这两种方法有什么区别，什么时候使用cache()或toImage()？有人可以为两者提供一个例子吗？

编辑：假设您有一个包含三个形状 a、b、c 的图层。当我拖动其中一个形状时，如何缓存图层？如何告诉 KineticJS 何时使用缓存对象？

难道只有这个：

def layer = // some layer with shape a,b,c


stage.on('dragstart', function() {
        layer.cache();

        // find the shape which is dragged.

      });

stage.on('dragend', function() {
        // ???
      });

【问题讨论】：

标签： javascript html canvas kineticjs

【解决方案1】：

myNode.cache 只是自动执行从节点生成图像对象并在重绘期间使用该图像对象的过程。

您可以通过 myNode.toImage 执行相同的操作，然后使用该图像而不是 myNode。

这两种方法都可以加快绘图速度，因为复制图像像素比处理绘图命令来绘制节点要快。

【讨论】：

能否提供一个缓存示例？我如何在节点和层上使用它。如何激活从缓存中使用图像？
嗯，.cache 完成了该命令所需的一切。您在问题中提供的链接是一个很棒的演示。你有一个复杂的多点星，需要大量的数学来计算和绘制。然后star.cache 自动制作星星的图像，所有后续绘图都使用该图像来绘制星星，而不是使用复杂的数学来创建和绘制星星。
我没明白。你能在我的例子中解释一下吗？如果我做 layer.cache();拖动的元素也会包含在图像中吗？
layer.cache 的一个常见用途是当你合成了一个复杂的背景层。然后将绘制图层的图像缓存版本，而不是计算/重绘背景图层上的每个单独的形状。因此，在您编辑的代码中，如果您想单独拖动元素 a 或 b 或 c，则不会缓存图层，因为您不能再单独拖动元素（剩下的是带有元素 a/b/ 的图层图片c 永久固定在该层上）。如果元素 a 非常复杂，您可能只想缓存该元素：a.cache -- 但不是整个层。