如何缓存图像并稍后在 EaselJS 中使用？

Question

我有一个非常基本的精灵动画。如何缓存图像并在精灵表创建的“图像”部分使用它？ 我试过了：

Image1= new Image(2779,1135)
Image1.src = "img/contur.png"   

但我不知道如何在“图片”部分包含图片 1。

stage = new createjs.Stage(document.getElementById("testCanvas")); stage.clear();

var ss = new createjs.SpriteSheet({
    "animations": {"run": [0, 50]},
    "images": ["img/contur.png"],
    "frames":
        {
        "height": 140,
        "width": 231,
        "regX": 0,
        "regY": 0,
        "count": 51
        }
    });

var grant = new createjs.Sprite(ss, "run");

stage.addChild(grant);
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);

Answer 1

如果我对您的问题的理解正确，您希望在图片在 spritesheet 中使用之前加载它。

您有两种方法可以做到这一点：

1. 在img.load上添加回调：

   img = new Image();
   img.src = "img/contur.png";
   img.onload = function(event) {
       // you can create spritesheet here
   }
   

2. 使用 PreloadJS（推荐）：

   loader   = new createjs.LoadQueue(true);
   loader.on('complete', function(event) {
       // you can create spritesheet here
   });
   loader.loadManifest([{id:'imageX', src:'img/contur.png'}]);
   

   如果是这样的话，你还需要运行一个web服务器（例如，使用python：python -m SimpleHTTPServer 8088）

对于这两个选项，您只需要使用图像的路径（浏览器会自动获取预加载的图像）：

var ss = new createjs.SpriteSheet({
    "animations": {"run": [0, 50]},
    "images": ["img/contur.png"],
    "frames": {
        "height": 140,
        "width": 231,
        "regX": 0,
        "regY": 0,
        "count": 51
    }
});

如果您使用的是 PreloadJS，您可以通过别名（定义在清单上）指定加载的图像对象：

"images": [loader.getResult('imageX')],
...

注意：记得在向舞台添加东西或动画帧后调用stage.update()，否则它只会显示空白画布或静态图像。