KineticJS - 如何在按钮上更改图像src单击

Question

我试图通过点击按钮在我的kineticjs阶段更改图像的src.

我有一个可拖动的图像(在这种情况下是darth-vader)和顶部的静态图像(在这种情况下是猴子).单击一个按钮,我希望能够用新的替换可拖动的图像(yoda)

JSFiddle可以在这里看到:

http://jsfiddle.net/SkVJu/33/

我想到了以下几点:

btn.addEventListener("click", function (event) {
    mainImage.src = path+'yoda.jpg';
    layer.removeChildren();
    draw(mainImage,true);
    draw(foregroundImage,true);

});

将完成它:首先通过更新src,然后删除所有对象并以正确的顺序重新绘制它们.

出于某种原因,虽然我得到了2张yoda图像放在舞台上 - 1正确落后但另一个高于其他一切......

Answer 1

您可以使用KineticJS setImage函数轻松交换图像源,并传入Javascript图像对象,而不是删除所有子项并将其添加回来:http://kineticjs.com/docs/Kinetic.Image.html#setImage

我更新了你的draw函数,它需要一个id和name,以便我们以后可以选择Kinetic Image对象:

// Draw function
function draw(image,drag,id,name){
    if (typeof id == 'undefined') id = '';
   if (typeof name == 'undefined') name = '';
   var img = new Kinetic.Image({
        image: image,
        draggable: drag,
       id: id,
       name: name
    });
    layer.add(img);
    layer.draw(); 

    return img;
}

然后这是你的更新点击功能:

// Change draggable Image
btn.addEventListener("click", function (event) {
    layer.get('#mainImageId')[0].setImage(mainImage2); //get the object with id "mainImageId"
    layer.draw();
});

的jsfiddle

另外,我foregroundImage在mainImage onload函数中移动了你的load函数,这样我们就可以确保在以下代码之后将Monkey添加到舞台mainImage:

// Define draggable image
var mainImage = new Image();
mainImage.onload = function () {
    draw(mainImage,true, 'mainImageId');
    // Define foreground image
    var foregroundImage = new Image();
    foregroundImage.onload = function () {
        draw(foregroundImage,false);
    };
    foregroundImage.src = path+'monkey.png';
};
mainImage.src = path+'darth-vader.jpg';