KineticJS-替换组内的图像

本文介绍了KineticJS-替换组内的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请参见链接

加载画布时，有2张图片:尤达(Yoda)和达斯·维达(Darth Vader).

When the canvas loads there are 2 images: Yoda and Darth Vader.

我希望能够单击Yoda(将其选中)，然后单击画布下的更改"按钮.单击此按钮应将Yoda替换为Darth Vader，并仍保持第2个" Darth Vader的选中状态.

I want to be able to click on Yoda (to select it) and then click on the "change" button under the canvas. This button click should replace Yoda with Darth Vader and still keep the "2nd" Darth Vader selected.

我的代码如下:

  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()进行尝试，然后手动添加图像，但它也不起作用-即

I tried it with selectedGroup.removeChildren() and then adding the image manually but it doesn't work either - ie

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

有人可以看到我在做什么错吗?

Can anyone see what I am doing wrong?

感谢您的帮助！

推荐答案

与其破坏Yoda对象并创建一个新的Vader对象，不如仅使用setImage用Vader图像替换Yoda图像?

Instead of destroying the Yoda object and creating a new Vader object, how about just using setImage to replace the Yoda Image with a Vader 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);

这篇关于KineticJS-替换组内的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Kineticjs