在Kinetic.js中，如何加載多個圖像，同時在畫布上加載一個圖像

Question

我需要源代碼中整個圖像的通用代碼。即使圖像尺寸增加，它仍然可以工作。 對於裝載我使用這個代碼：

var loadImages = function(sources, callback) { 
    var images = {}; 
    var loadedImages = 0; 
    var numImages = 0; 
    for(var src in sources) { 
     numImages++; 
    } 
    //document.getElementById('ImageIndex').value 
    document.getElementById('TotalIndex').value="/"+numImages; 
    for(var src in sources) { 
     alert(src); 
     images[src] = new Image(); 
     images[src].onload = function() { 
     if(++loadedImages >= numImages) { 
      callback(images); 
     } 
     }; 
    images[src].src = sources[src]; 
    } 
} 

我不知道下一步該怎麼做。

在代碼中間，您可以看到圖像索引和總索引。這些變量分別指示當前圖像索引和源中圖像的總數。

這是我第一次發佈任何錯誤，請原諒我。

謝謝你的幫助。

Answer 1

嘗試：

var loadImages = function(sources, callback) { 
var images = {}; 

//A second array for storing Kinetic Objects 
var images2 = new Array(); 

var loadedImages = 0; 
var numImages = 0; 
for(var src in sources) { 
    numImages++; 
} 
//document.getElementById('ImageIndex').value 
document.getElementById('TotalIndex').value="/"+numImages; 
for(var src in sources) { 
    alert(src); 
    images[src] = new Image(); 

    images2[src] = new Kinetic.Image({ 
     //your config and source here 
    }); 

    images[src].onload = function() { 
    if(++loadedImages >= numImages) { 
     callback(images); 
    } 
    }; 
images[src].src = sources[src]; 
} 

//Then draw each image, one at a time: 
for(var src in sources){ 
    layer.add(images2[src]); 
    layer.draw(); //this draws each picture one at a time 
} 
// or you could just redraw the whole stage after adding all the items to the layer. 
stage.draw(); 
}