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

从画布上单击删除图像

1 个答案: