如何在PreloadJS中預加載引用圖像

我使用PreloadJS預加載圖像，然後將它們作爲HTML5 Canvas中的容器的子代輸出（其中任何一個都不可用DOM）。我現在想知道的是我以後如何檢索這些位圖？如何在PreloadJS中預加載引用圖像

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（ '門'）可見=假。 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 
});

來源

2013-06-24 AKG

有趣的是'preload.getResult（'door'）'不起作用......它應該返回給你一個圖像引用。 – Lanny

你有預裝的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...

每一個加載的資產創建位圖馬上就是不 neccessary（除非你想顯示每一個加載圖像的時候了）的步驟，PreloadJS會照顧所有這一切。同時在清單中定義x和y也必須生效，PreloadJS僅用於加載，而不用於實例化。使用PreloadJS的基本的（很基本的）工作流程是：

您創建隊列
您加載清單
您等待完整的事件（但只踢你的其他應用程序代碼）
您可以從所有應用程序代碼開始，並通過ID使用資產在需要時創建位圖。

來源

2013-06-24 10:01:33 olsn

這是不正確的。您不能使用已加載圖像的ID作爲位圖的源。您可以使用ID從LoadQueue中查找圖像，並將其作爲源代碼傳遞。其餘是正確的。 – Lanny

對，我把它和聲音混合起來 – olsn

@奧爾森的回答大多是正確的。但是，您必須將圖像或圖像的路徑傳遞到任何位圖。該ID是唯一從LoadQueue查找結果（雖然它不是一個壞主意，也許它應該工作方式）

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

由於@olsn正確提到的是有用的，你不必等待圖像加載 - 您也可以傳遞路徑，只要您更新舞臺（無論是在勾號中，還是預加載完成後），圖像都會顯示出來。

來源

2013-06-25 03:52:48 Lanny

我接受了他的回答，因爲它是唯一給出的答案:)在我自己發佈這個問題後，我實際上已經想出了它，但是我忘了我發佈了這個題。謝謝@Lanny :) – AKG

如何在PreloadJS中預加載引用圖像

回答

相關問題