0

请看这个链接

当画布加载时，有 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);                  
  }

谁能看到我做错了什么？

谢谢你的帮助！

4

1 回答 1

1

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

就像是：

// 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);
于 2013-07-17T16:58:12.747 回答