从画布上单击删除图像

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