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

Question

我想在 jsfiddle.net/LuZbV/23/ 中，当在容器内拖动图像时，我想在垂直 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>

Answer 1

 <!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>

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

print copy of image when drag the original image

javascript

draggable

kineticjs