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

如果只使用setImage将Yoda图像替换为Vader图像，而不是销毁Yoda对象并创建新的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);

KineticJS - 替换组内的图像

1 个答案: