Images and Transformations: Difference between revisions

From JSXGraph Wiki
(New page: Here is an example where images are combined with transformations. <jsxgraph with="500" height="500" box="box1"> (function(){ var brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,...)
 
No edit summary
Line 2: Line 2:
<jsxgraph with="500" height="500" box="box1">
<jsxgraph with="500" height="500" box="box1">
(function(){
(function(){
   var brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5],axis:true});
   var brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true});
   var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
   var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";


   var p0 = board.create('point', [0,0], {style:5, name:'offset'});  
   var p0 = brd.create('point', [0,0], {style:5, name:'offset'});  
   var p1 = board.create('point', [3,0], {style:5, name:'rotate+scale'});  
   var p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});  
   var li = board.create('line', [p0,p1]);  
   var li = brd.create('line', [p0,p1]);  
   var im = board.create('image',[urlImg, [0,0], [3,3]]);
   var im = brd.create('image',[urlImg, [0,0], [3,3]]);
   //  
   //  
   // Translate image and point "rot+scale" by freagging point "offset"
   // Translate image and point "rot+scale" by freagging point "offset"
   var tOff = board.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});  
   var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});  
   tOff.bindTo(im);
   tOff.bindTo(im);
   tOff.bindTo(p1);
   tOff.bindTo(p1);
          
          
   // Rotate image around point "offset" by dragging point "rot+scale"
   // Rotate image around point "offset" by dragging point "rot+scale"
   var tRot = board.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'});  
   var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'});  
   tRot.bindTo(im);
   tRot.bindTo(im);
          
          
Line 23: Line 23:
   // then scale the image (because scaling "starts from (0,0))
   // then scale the image (because scaling "starts from (0,0))
   // Finally, we move the image back to point "Offset"
   // Finally, we move the image back to point "Offset"
   var tOffInv = board.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});  
   var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});  
   var tScale = board.create('transform', [function(){return p1.Dist(p0)/3;},
   var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},
                                          function(){return p1.Dist(p0)/3;}], {type:'scale'});  
                                        function(){return p1.Dist(p0)/3;}], {type:'scale'});  
   tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
   tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
})();
})();

Revision as of 21:15, 1 January 2011

Here is an example where images are combined with transformations.

The JavaScript code

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Images_and_Transformations&oldid=4783"