Javascript KineticJS鼠标事件问题

我正在尝试使用KineticJS制作某种交互式地图，其中悬停的位置会生成其他要加载的图像。但我无法使鼠标事件正常工作。事情是，一切正常但只有在第一次鼠标悬停时，当我第二次悬停时，mouseout触发器不起作用：(

即，当我第二次执行“mouseout”时，我希望贴图部分再次为浅蓝色（n\u amer\u sel image），但它仍然为深蓝色（n\u amer\u sel image）。

以下是您可以看到此错误的链接：

我将非常感谢你的帮助

代码：

---

尝试在未选择的图像上添加两个处理程序，例如：

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

---

这是一个非常奇怪的行为…可能与imagebuffers有关…您可以尝试在侦听器中重新绘制缓冲区

在任何情况下，我都建议添加这两个图像并使用

show（）

和

hide（）

。此操作通常比添加/删除child更快

---

您可以看到它正在工作（除了受污染的画布问题），在此

更改现有对象上的图像，而不是使用新的图像对象：

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

---

切换到显示/隐藏而不是像其他响应者提到的那样添加/删除可能仍然是一个好主意。最终，您的想法是最好的：）但是有一个透明性错误（createImageBuffer（）），但幸运的是它没有破坏任何东西。谢谢！

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

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