0

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

我有一个可拖动的图像（在本例中为 darth-vader）和顶部的静态图像（在本例中为猴子）。单击一个按钮，我希望能够用一个新的（尤达）替换可拖动的图像

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 张正确地在后面，但另一个高于其他一切......

4

2 回答 2

5

setImage您可以通过使用 KineticJS函数并传入 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 函数中，以便我们确保将 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';
于 2013-08-13T16:09:56.267 回答
1

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

于 2014-03-26T20:24:45.527 回答