在Kinetic.js中，如何在画布上一次加载一个图像的情况下加载多个图像

Question

I need generic code for whole images in the sources. It should still work even if image size increases. For loading I am using this code:

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];
    }
}

I don't know what to do next.

In the middle of the code, you can see image index and total index. These variables indicate the current image index and the total number of images in the source, respectively.

This is the first time I am posting any mistakes please excuse me.

Thank you for your help.

Answer 1

Try :

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