CODEWITHSUNDEEP
javascripthtml5-canvaskineticjs
riyuk
riyuk

Reputation: 174

KineticJS Multiple Images

I got a strange problem with KineticJS. I'm trying to load multiple Images and simply draw them on Canvas.

JSFiddle is here: http://jsfiddle.net/riyuk/DbHuV/

The weird thing is, that Kinetic only loads one Image (always the last one in the array). If I uncomment the Code and do the same with Kinetic.Rect everything works fine.

var obj = new Kinetic.Rect({
                        x: opts.x,
                        y: opts.y,
                        width: opts.width,
                        height: opts.height,
                        fill: 'green',
                        stroke: 'black',
                        strokeWidth: 4
                    });
                    cb(obj);

Any - working - suggestions?

Greetings

Upvotes: 0

Views: 589

Answers (1)

markE
markE

Reputation: 105015

Here's an alternate image loader:

This loads all images that were pushed into the imageURLs array.

After all images are fully loaded, the start() function is called.

In start, the imgs[] array holds the images in the same order as imageURLs[]

// image loader

var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}

Upvotes: 1

Related Questions