Question

我正在使用PreloadJS预加载我的图像，之后将它们作为HTML5 Canvas中容器的子项输出（没有DOM可访问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

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

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

正如@olsn正确提到的那样，您不必等待图像加载 - 您也可以只传入一个路径，并且只要您更新阶段（在刻度线中，或者一旦预载为完成），将显示图像。

Answer 2

您必须区分预先加载的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的基本（非常基础）工作流程是：

您创建一个队列
您加载清单
您等待完成事件（但仅限于其他应用程序代码）
您可以从所有应用程序代码开始，并在需要时使用Assets via ID创建位图。

如何引用PreloadJS中预装的图像

2 个答案: