在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();
}