Javascript 拖动原始图像时打印图像副本

在“我想要”中，当在容器中拖动图像时，我想要在垂直的x、y坐标处打印图像副本，并且之前绘制的图像应该被擦除。我如何才能做到这一点？请帮助我

JS代码

       $(function(){
       var $house=$("#house");
       $house.hide();
       var $stageContainer=$("#container");
       var stageOffset=$stageContainer.offset();
       var offsetX=stageOffset.left;
       var offsetY=stageOffset.top;

      var stage = new Kinetic.Stage({
      container: 'container',
      width: 350,
      height: 350
     });
     var layer = new Kinetic.Layer();
     stage.add(layer);

       var image1=new Image();
       image1.onload=function(){
             $house.show();
        }
        image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157";

         // make the toolbar image draggable
        $house.draggable({
               helper:'clone',
        });

         $house.data("url","house.png"); // key-value pair
         $house.data("width","32"); // key-value pair
         $house.data("height","33"); // key-value pair
         $house.data("image",image1); // key-value pair

          $stageContainer.droppable({
                    drop:dragDrop,
          });

          function dragDrop(e,ui){

             var x=parseInt(ui.offset.left-offsetX);
             var y=parseInt(ui.offset.top-offsetY);

             var element=ui.draggable;
             var data=element.data("url");
             var theImage=element.data("image");

             var image = new Kinetic.Image({
                name:data,
                 x:x,
                 y:y,
                 image:theImage,
                 draggable: true,

               dragBoundFunc: function(pos) {
               return {
                  x: pos.x,
                  y: this.getAbsolutePosition().y
               }
               }        

             });

              image.on("dragend", function() {
               var points = image.getPosition();
           //alert(points.x + ',' + points.y);
               var image1 = new Kinetic.Image({
                   name: data,
                   id: "imageantry",
                   x: points.x+65,
                   y: points.y,
                   image: theImage,
                   draggable: false
               });
               layer.add(image1);
               layer.draw();
             });
           image.on('dblclick', function() {
           image.remove();
           layer.draw();
         });
         layer.add(image);
         layer.draw();
       }

      }); // end $(function(){});

HTML代码

     <div id="toolbar">
     <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br>
      </div>
      <div id="container"></div>

原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
#工具栏{
宽度：350px；
高度：35px；
边框：纯色1px蓝色；
}
$（函数（）{
var$house=$（“#house”）；
$house.hide（）；
变量$stageContainer=$（“#容器”）；
var stageOffset=$stageContainer.offset（）；
var offsetX=stageOffset.left；
var offsetY=stageOffset.top；
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
var image1=新图像（）；
image1.onload=函数（）{
$house.show（）；
}
图1.src=”http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157";
$house.draggable({
助手：'clone'，
});
$house.data（“url”、“house.png”）；//键值对
$house.data（“宽度”，“32”）；//键值对
$house.data（“height”，“33”）；//键值对
$house.data（“image”，image1）；//键值对
$stageContainer.droppable({
下降：dragDrop，
});
函数dragDrop（e，ui）{
var x=parseInt（ui.offset.left offsetX）；
var y=parseInt（ui.offset.top-offsetY）；
var元素=ui.draggable；
var数据=元素数据（“url”）；
var theImage=element.data（“图像”）；
var image=新的动能图像({
名称:数据,，
x:x，
y:y，
图片：theImage，
真的，
dragBoundFunc:函数（位置）{
返回{
x:pos.x，
y:this.getAbsolutePosition（）.y
}
}        
});
//获取图像位置。
var w=0；
var-obj；
图像.on（“Draged”，函数（e）{
w=w+1；
var points=image.getPosition（）；
如果（w>1）{
obj=stage.get（“#imagentry”）
obj.remove（）；
}
var image2=新的动力学图像({
名称:数据,，
id:“图像”，
x：点数。x+75，
y:积分，y，
图片：theImage，
可拖动：错误
});
添加图层（图2）；
layer.draw（）；
});
on（'dblclick'，function（））{
image.remove（）；
layer.draw（）；
});
图层。添加（图像）；
layer.draw（）；
}
}); // end$（函数（）{}）；

你的小提琴不就是这么做的吗？这对我有用@DanielB我用小提琴试过了，但没用…我想抹掉以前画的副本image@DanielB将图像放入容器后，当我在容器中拖动图像时，我希望删除以前绘制的副本图像

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Prototype</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
 <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"> </script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
#toolbar{
  width:350px;
  height:35px;
  border:solid 1px blue;
}
</style>        
<script>
  $(function(){
  var $house=$("#house");
  $house.hide();

  var $stageContainer=$("#container");
  var stageOffset=$stageContainer.offset();
  var offsetX=stageOffset.left;
  var offsetY=stageOffset.top;

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
  });
  var layer = new Kinetic.Layer();
  stage.add(layer);

  var image1=new Image();
  image1.onload=function(){
    $house.show();
  }
  image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157";

  $house.draggable({
    helper:'clone',
  });

  $house.data("url","house.png"); // key-value pair
  $house.data("width","32"); // key-value pair
  $house.data("height","33"); // key-value pair
  $house.data("image",image1); // key-value pair

  $stageContainer.droppable({
    drop:dragDrop,
  });

  function dragDrop(e,ui){

    var x=parseInt(ui.offset.left-offsetX);
    var y=parseInt(ui.offset.top-offsetY);

    var element=ui.draggable;
    var data=element.data("url");
    var theImage=element.data("image");

    var image = new Kinetic.Image({
        name:data,
        x:x,
        y:y,
        image:theImage,
        draggable: true,

    dragBoundFunc: function(pos) {
        return {
          x: pos.x,
          y: this.getAbsolutePosition().y
        }
    }        

   });

   //get image position.
   var w=0;
   var obj;
        image.on("dragend", function(e) {
        w=w+1;
           var points = image.getPosition();
               if(w>1){
                    obj = stage.get('#imageantry')
                    obj.remove();
               }
               var image2 = new Kinetic.Image({
                    name: data,
                    id: "imageantry",
                    x: points.x+75,
                    y: points.y,
                    image: theImage,
                    draggable: false
                });
                layer.add(image2);
                layer.draw();
        });
    image.on('dblclick', function() {
        image.remove();
        layer.draw();
    });
    layer.add(image);
    layer.draw();
}

}); // end $(function(){});

</script>       
</head>
<body>
<div id="toolbar">
    <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br>
</div>
<div id="container"></div>
</body>
</html>