将形状缓存复制为位图源图像答案

【问题标题】：Copy Shape cache as Bitmap source image将形状缓存复制为位图源图像
【发布时间】：2016-03-01 06:20:58
【问题描述】：

我有一个 EaselJS Shape 对象，其中包含缓存的图形指令，这些指令非常昂贵。每一帧我都会使用myShape.updateCache("source-overlay"); 将更多图形绘制到缓存中，因此下一帧不需要重新绘制它们。

但我想在1秒后删除最旧的缓存图形，所以我想创建一个buffer位图对象，将缓存从myShape复制到buffer的image属性中，清除myShape当前缓存并继续向其绘制新图形，然后在 1 秒后清除缓冲区。

我知道很难解释，但要简化一下：

var myShape = new createjs.Shape();
var buffer = new createjs.Bitmap();

myShape.cache(0, 0, innerWidth, innerHeight);
stage.addChild(myShape, buffer);

function tick () {
    myShape.graphics.s("#F00").lt(Math.random() * 100, Math.random() * 100);
    myShape.updateCache("source-overlay");
    myShape.graphics.clear();
}
setInterval(function(){
    buffer.alpha = 1;
    buffer.image = myShape.getCacheDataURL();
    myShape.updateCache();
    createjs.Tween.get(buffer).to({alpha: 0}, 1000);
},1000);

问题是myShape 的缓存不会显示为buffer 的源图像。为什么？

【问题讨论】：

getCacheDataURL 方法返回一个字符串。您必须将其作为新图像的 src 传递，然后将该图像设置为源。
我在发布问题后就注意到了，但是这种方法太慢了。难道没有更好的方法来做到这一点吗？也许通过调用clone 将形状缓存复制到另一个对象的缓存中...
您可以将输出位图包装在一个容器中，并对其进行缓存，以维护第二个缓存。
我没听懂@Lanny，你能提供示例代码吗？使用位图方法很慢，因为getCacheDataURL 很昂贵，即使每 10 秒运行一次（因为当它运行时所有内容都会冻结约 5 帧），并且每次我想清除旧的时我都需要运行它来自myShape 的图形。我能想到的唯一解决方案是实现一种更好的方法，在 EaselJS 上跨 DisplayObjects 复制缓存。
这基本上是复制缓存。 jsfiddle.net/lannymcnie/hzgueoah -- 只是将当前缓存绘制到容器中的新项目中，该项目本身已被缓存。

标签： javascript caching html5-canvas createjs easeljs

【解决方案1】：

Grant Skinner 提供的克隆缓存的快速解决方案：

var bmp = new createjs.Bitmap(shape.cacheCanvas)
bmp.cache(x,y,w,h);
var cache2 = bmp.cacheCanvas;

在这里讨论：https://github.com/CreateJS/EaselJS/issues/701#issuecomment-160349081

【讨论】：