KineticJS -替换组内的图像

Question

请参阅此Link

当画布加载时，有两个图像:尤达和达斯·维德。

我希望能够点击Yoda (选择它)，然后点击画布下的"change“按钮。点击这个按钮应该会用达斯·维德替换尤达，并且仍然保持选择“第二个”达斯·维德。

我的代码如下：

  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);