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