我有一个EaselJS Shape对象,其中包含缓存的图形指令,这确实很昂贵。我使用myShape.updateCache("source-overlay");在每一帧中将更多图形绘制到缓存中,因此无需在下一帧重新绘制它们。

但是我想在1秒后删除最旧的缓存图形,所以我考虑创建一个buffer位图对象,将缓存从myShape复制到bufferimage属性,清除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的源映像。为什么?

最佳答案

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

10-06 13:26