How to move copy image when original image dragend in Kineticjs

Biruntha · January 9, 2015

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>

Biruntha · January 9, 2015

<!DOCTYPE html>

<html>

<head>

<title>Prototype</title>

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

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

</body>

</html>

Notifications

Messages

How to move copy image when original image dragend in Kineticjs

Warning: Please note

Recommended Posts

Biruntha

Link to comment

Share on other sites

Biruntha

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members