How to move copy image when original image dragend in Kineticjs

Biruntha · January 8, 2015

After image is drop into container , I want to move copy of the original image to be move when original image dragend within container. I tried but it display copy image each time when original image dragend. can anyone help me?

 <!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
            }
        }        
        
	   });
			image.on("dragend", function(e) {
			   var points = image.getPosition();
			   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(){});

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

Edited January 8, 2015 by Biruntha

Biruntha · January 9, 2015



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

Sign In

How to move copy image when original image dragend in Kineticjs

Recommended Posts

Biruntha

Link to comment

Share on other sites

Biruntha

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information