Question

我正试图通过点击按钮更改kineticjs阶段中图像的src。

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

JSFiddle可以在这里看到：

我想到了以下内容：

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和名称，以便我们以后可以选择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

此外，我在mainImage onload函数中移动了foregroundImage加载函数，以便确保在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';

Answer 2

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

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

2 个答案: