KineticJS - 更換一個組內的圖像

Question

請參閱本Link

當畫布負載有2張圖片：尤達和達斯維達。

我希望能夠點擊尤達（選擇它），然後點擊畫布下的「更改」按鈕。這個按鈕點擊應該替換達達維達的尤達，並保持選擇「第二」達斯維達。

我的代碼如下：

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用Vader圖像替換Yoda圖像？

喜歡的東西：

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