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