好的，所以我一直在玩这个代码，它基本上通过拖动将多个图像从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()
};
});
}
1 回答
您可以在每个图像对象上添加单击侦听器，并删除任何单击的图像 .