Jump to content
Search Community

Biruntha

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by Biruntha

    How to move copy image when original image dragend in Kineticjs

    in GSAP

    Posted 

    

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

    

    

						
    
					
    
					
						
    
							

	
    	
		
    
			
				
				
    
					
				
    
			
			
			
		
    
	
    

						
    
					
				
    		
			
    
		
    
	
    2. 

	
	
  2. 
		
    

			

			
    	
				
    
					
    
						
						
      
							
							
						
    
					
    
					



    
	
    
		
			
		
			How to move copy image when original image dragend in Kineticjs
		
	
    
	
    in GSAP
    

    
				
    
				
				
    
					
    
						
						
    
							Posted 
							
														
						
    
						

						
    
							
							

    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>

    

						
    
					
    
					
						
    
							

	
    	
		
    
			
				
				
    
					
				
    
			
			
			
		
    
	
    

						
    
					
				
    		
			
    
		
    
	
    3. 

			

		

	
	

		


	





			

		


	




						


					
 

					


					

				

			

			
      
      
      

		 
 

		



	

		×
		


    
	





			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •