KineticJS - 如何在按钮单击时更改图像 src答案

【问题标题】：KineticJS - How to Change Image src on Button ClickKineticJS - 如何在按钮单击时更改图像 src
【发布时间】：2013-08-15 07:38:04
【问题描述】：

我正在尝试通过单击按钮在我的 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 张正确地在后面，但另一个高于其他一切......

【问题讨论】：

标签： html image kineticjs src

【解决方案1】：

您可以使用 KineticJS setImage 函数并传入 Javascript 图像对象：http://kineticjs.com/docs/Kinetic.Image.html#setImage

我更新了您的 draw 函数，使其接受 id 和名称，以便我们稍后可以选择 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 函数中，以便我们确保在 mainImage 之后将 Monkey 添加到舞台：

// 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';

【讨论】：

【解决方案2】：

立即加载这两个图像，创建新的 Kinetic.Group，设置一个可见和另一个隐藏，而不是创建一个在点击时首先隐藏并显示第二个的函数，难道不是更容易吗？只是问因为我有类似的问题要处理，只是在我的情况下，应该根据用户可以更改的设置参数在 5 个不同的图标之间进行交换......

【讨论】：