Question

我有一个非常基本的精灵动画。如何缓存图像并在＆＃34;图像中使用它＆＃34;精灵表创建的一部分？我尝试过：

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

但我不知道如何在＆＃34;图像＆＃34;中包含图像1。部分。

stage = new createjs.Stage（document.getElementById（＆＃34; testCanvas＆＃34;））; 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中使用之前加载图像。

您有两种方法可以执行此操作：

在img.load上添加回调：

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

使用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()，否则只会显示空白画布或静态图像。

如何缓存图像并在以后的EaselJS中使用它？

1 个答案: