KineticJS - 在组内替换图像

Question

请看这个Link

当画布加载时，有 2 个图像：Yoda 和 Darth Vader。

我希望能够单击 Yoda（选择它），然后单击画布下的“更改”按钮。此按钮单击应将 Yoda 替换为 Darth Vader，并且仍保持选中“第二个”Darth Vader。

我的代码如下：

  function replaceImage(i, callback) {

      selectedGroup.destroy();

      var images = {};
      images[i] = new Image();
      images[i].onload = function() {
          callback(i,images);
      };
      images[i].src = sources[i].path;    
  }  

我用 selectedGroup.removeChildren() 尝试过，然后手动添加图像，但它也不起作用 - 即

function replaceImage(i) {

      selectedGroup.removeChildren();

      var image = new Image();

        var newImage = new Kinetic.Image({
            id: i,
            image: image,
            x: 0,
            y: 0,
            width: sources[i].width,
            height: sources[i].height,
            name: 'image',
            stroke: 'red',
            strokeWidth: 2,
            strokeEnabled: false        
          });

        newImage.src = sources[i].path;
        selectedGroup.add(newImage);                  
  }  

谁能看出我做错了什么？

感谢您的帮助！

Answer 1

与其销毁 Yoda 对象并创建一个新的 Vader 对象，不如使用 setImage 将 Yoda Image 替换为 Vader 图像怎么样？

类似：

// get the image object from the selected group
var ImageObjects = selectedGroup.get("Image");
var ImageObject=ImageObjects.toArray()[0];

// keep the Kinetic.Image object
// but replace its image
ImageObject.setImage(myNewImage);