클릭하면 캔버스에서 이미지가 제거됩니다.

Question

이 코드로 약간 놀았으니 드래그하여 DOM에서 캔버스로 여러 이미지를 기본적으로 추가합니다. 하지만 캔트에서 클릭/탭 이벤트 리스너에서 이미지를 제대로 제거하지 못하는 것 같습니다.

window.onload = function(){ 
var stage = new Kinetic.Stage({ 
    container : "cantainer", 
    width : 475, 
    height : 150 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer); 
var con = stage.getContainer();  
var dragSrcEl = null; 
//image 
document.getElementById("yoda").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 

}); 
document.getElementById("woman").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 

}); 
document.getElementById("nature").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 

}); 
document.getElementById("srce").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 

}); 
document.getElementById("game").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 

}); 
document.getElementById("dog").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 

}); 
document.getElementById("house").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 

}); 





con.addEventListener('dragover',function(e){ 
    e.preventDefault(); //@important 
}); 
//insert image to stage 
con.addEventListener('drop',function(e){ 
    var image = new Kinetic.Image({ 
     x: 30, 
     y: 20, 
     draggable : true 


    }); 
    layer.add(image); 
    imageObj = new Image(); 
    imageObj.src = dragSrcEl.src; 
    imageObj.onload = function(){ 
     image.setImage(imageObj) 
     layer.draw() 

    }; 

    }); 
} 

Answer 1

각 이미지 개체에 클릭 수신기를 추가하고 클릭 한 이미지를 제거 할 수 있습니다.

image.on("click",function(){ 
    this.remove(); // or this.destroy(); 
    layer.draw(); 
});