KineticJS mouse event issue

Question

I am trying to make some kind of interactive map with KineticJS, where freezing places make other images load. But I can not work correctly with mouse events. The fact is that everything works fine , but only with the first mouse attempt , and when I find the second time, the mouseout trigger does not work :(

i.e. When I do a "mouseout" a second time, I want the part of the map to be light blue again (image n_amer), but it restores dark blue (image n_amer_sel).

Here is a link where you can see this error: http://kinlibtst.elitno.net/

I will be very grateful for your help!

code:

function loadImages(sources, callback) { var assetDir = 'PROJECT/'; var images = {}; var loadedImages = 0; var numImages = 0; for(var src in sources) { numImages++; } for(var src in sources) { images[src] = new Image(); images[src].onload = function() { if(++loadedImages >= numImages) { callback(images); } }; images[src].src = assetDir + sources[src]; } } function initStage(images) { var stage = new Kinetic.Stage({ container: 'container', width: 900, height: 452 }); var imagesLayer = new Kinetic.Layer(); // img vars var n_amer = new Kinetic.Image({ image: images.n_amer, x: 0, y: 0 }); var n_amer_sel = new Kinetic.Image({ image: images.n_amer_sel, x: 0, y: 0 }); // mouse events n_amer.on('mouseover', function() { imagesLayer.add(n_amer_sel) stage.draw(); }); n_amer_sel.on('mouseout', function() { imagesLayer.remove(n_amer_sel); stage.draw(); }); // imageBuffer for transparent pixels n_amer.createImageBuffer(function() { imagesLayer.drawBuffer(); }); n_amer_sel.createImageBuffer(function() { imagesLayer.drawBuffer(); }); // add to stage imagesLayer.add(n_amer); stage.add(imagesLayer); } window.onload = function() { var sources = { n_amer: 'N-Amer.png', n_amer_sel: 'N-Amer_sel.png' }; loadImages(sources, initStage); }; 

Answer 1

Instead of using a new image object, change the image to an existing object:

 function loadImages(sources, callback) { var assetDir = 'http://kinlibtst.elitno.net/PROJECT/'; var images = {}; var loadedImages = 0; var numImages = 0; for (var src in sources) { numImages++; } for (var src in sources) { images[src] = new Image(); images[src].onload = function() { if (++loadedImages >= numImages) { callback(images); } }; images[src].src = assetDir + sources[src]; } } function initStage(images) { var stage = new Kinetic.Stage({ container: 'container', width: 900, height: 1000 }); var imagesLayer = new Kinetic.Layer(); // img vars var n_amer = new Kinetic.Image({ image: images.n_amer, x: 0, y: 0 }); // mouse events n_amer.on('mouseover', function() { this.setImage(images.n_amer_sel); stage.draw(); }); n_amer.on('mouseout', function() { this.setImage(images.n_amer); stage.draw(); }); // imageBuffer for transparent pixels n_amer.createImageBuffer(function() { imagesLayer.drawBuffer(); }); // add to stage imagesLayer.add(n_amer); stage.add(imagesLayer); } window.onload = function() { var sources = { n_amer: 'N-Amer.png', n_amer_sel: 'N-Amer_sel.png' }; loadImages(sources, initStage); };​ 

Answer 2

Try adding both handlers to an unselected image, for example:

 n_amer.on('mouseover', function() { imagesLayer.add(n_amer_sel) stage.draw(); }); n_amer.on('mouseout', function() { imagesLayer.remove(n_amer_sel); stage.draw(); }); 

Answer 3

This is really strange behavior ... maybe something in common with buffer files ... you might try redrawing the buffers inside the listeners.

In any case, I would suggest adding both images and using show() and hide() . These operations are usually faster than adding / removing children.

 var n_amer_sel = new Kinetic.Image({ image: images.n_amer_sel, x: 0, y: 0, visible: false }); 

 n_amer.on('mouseover', function() { n_amer_sel.show(); stage.draw(); }); n_amer_sel.on('mouseout', function() { n_amer_sel.hide(); stage.draw(); }); // add to stage imagesLayer.add(n_amer); imagesLayer.add(n_amer_sel); stage.add(imagesLayer); 

You can see how it works (except for a problem with a damaged canvas) in this fiddle