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

Question

我有一个 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 的源图像。为什么？

Answer 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

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

Copy Shape cache as Bitmap source image

javascript

caching

html5-canvas

easeljs

createjs