Search code examples
javascriptkineticjsdraggable

print copy of image when drag the original image


In jsfiddle.net/LuZbV/23/ i want, when dragging the image within the container i want to print a copy of image at perticular x,y coordinate and previous drawn image should be erase how can i do this?please help me...

JS Code

       $(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 Code

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

Solution

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