1

我正在使用 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;

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

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

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

2 回答 2

4

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

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

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

于 2013-06-25T03:52:48.463 回答
2

您必须区分预加载Assets和实际createjs.Bitmaps- 一旦您创建了一个createjs.Bitmap它与预加载器无关，通过使用 preloadJS 和 id，您可以在想要创建新位图时简单地使用 id：

//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 使用资产来创建位图。
于 2013-06-24T10:01:33.647 回答