Проблема с событием мыши KineticJS

Question

Я пытаюсь сделать какую-то интерактивную карту с KineticJS, где зависшие места заставляют загружать другие изображения. Но я не могу правильно работать с событиями мыши. Дело в том, что все работает нормально , но только с первой попытки наведения мыши, и когда я зависать во второй раз, MouseOut триггер не работает :(

т.е. Когда я делать «MouseOut» во второй раз, я хочу карту часть будет светло-голубой снова (n_amer изображения), но remeins темно-синий (n_amer_sel изображение)

Вот ссылка, где вы можете увидеть эту ошибку:. http://kinlibtst.elitno.net/

Я был бы очень благодарен за помощь !

Код:

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

Вместо того, чтобы использовать новый объект изображения, изменить изображение на существующий объекте:

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

Попробуйте добавить оба обработчиков неактивных изображений, например:

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

Это действительно странное поведение ... может быть что-то делать с imagebuffers вам ... может попытаться перерисовать буферы внутри слушателей.

В любом случае, я бы предложил добавить оба изображения и использовать show() и hide(). Эти операции обычно быстрее, чем добавление/удаление дочерних элементов.

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

Вы можете видеть это работает (кроме испорченного вопроса холста) в этом fiddle