Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Biruntha

How to move copy image when original image dragend in Kineticjs

Recommended Posts

Hi, 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>
Link to comment
Share on other sites


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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×