如何引用 PreloadJS 中预加载的图像

Question

我正在使用 PreloadJS 预加载我的图像，然后将它们作为 HTML5 Canvas 中容器的子级输出（没有一个是 DOM 可访问的）。我现在想知道的是以后如何检索这些位图？

var preload = new createjs.LoadQueue(true, 'img/');
var manifest = [
    {src: 'fred.png', id: 'pri', type: 'sprite', x: 400, y: 500},
    {src: 'banana.png', id: 'door', type: 'sprite', x: 300, y: 500},
]
preload.addEventListener('progress', handleProgress);
preload.addEventListener('complete', handleComplete);
preload.addEventListener('fileload', handleFileLoad);
preload.loadManifest(manifest);

var image = [];
function handleProgress(event) {

}
function handleComplete(event) {
    for(var i = 0; i < image.length; i++) {
        var item = image[i];
        bg = new createjs.Bitmap('img/'+item.src).set({
            x: item.x,
            y: item.y
        });
        world.addChild(bg);
    }
    canvas.update();    
}
function handleFileLoad(event) {
    image.push(event.item);
}

我尝试过的方法不起作用 preload.getItem('door').visible = false; preload.getResult('door').visible = false; preload.getResult('door', true).visible = false;

我曾假设我可以通过这种方式引用实例并更改它们的值。是我应该在预加载段中添加的东西还是我以错误的方式引用图像？如果我执行console.log(preload.getResult('door'))，我会得到很多奇怪的字符，我认为这是正在解析的图像文件（？）

另一种方法是将id 设置为预加载位中的属性，以便我以后可以通过bg[0] 或bg[1] 等访问它，但我想PreloadJS 中必须已经内置了一个方法让我这样做。

bg = new createjs.Bitmap('img/'+item.src).set({
            x: item.x,
            y: item.y,
            id: item.id
});

Answer 1

你必须区分预加载的 Assets 和实际的 createjs.Bitmaps - 一旦你创建了一个 createjs.Bitmap 它就不再与预加载器有任何关系，通过使用 preloadJS 和一个 id，你可以简单地使用id WHENEVER 你想创建一个新的位图：

//update: as Lanny pointed out correctly, first retrieve the image:
var image = preload.getResult("pri");
var myBitmap = new createjs.Bitmap(image);  //or use the url
// now "myBitmap" is the reference to that bitmap,
// and can be altered as you wish, alpha, visibility ect...

立即为每个加载的资产创建位图的步骤不是必要的（除非您想立即显示每个加载的图像），PreloadJS 会处理所有这些。同样在清单中定义 x 和 y 也必须生效，PreloadJS 只是用于加载，而不是用于实例化。使用 PreloadJS 的基本（非常基本）工作流程是：

1. 您创建一个队列
2. 您加载清单
3. 您等待完成事件（但只是为了启动您的其他应用程序代码）
4. 您从所有应用程序代码开始，并在需要时通过 ID 使用资产来创建位图。

Answer 2

@Olsn 的回答基本正确。但是，您必须将图像或图像路径传递给任何位图。 ID 仅用于从 LoadQueue 中查找结果（虽然这不是一个坏主意，也许它应该这样工作）

var image = preload.getResult("pri");
var bitmap = new createjs.Bitmap(image);

正如@olsn 正确提到的那样，您不必等待图像加载 - 您也可以只传递一个路径，只要您更新阶段（在一个滴答声中，或者一旦预加载完成），图像将被显示出来。