Difference between revisions of "Images and Transformations"

From JSXGraph Wiki
Jump to navigationJump to search
(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,...)
 
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 23:15, 1 January 2011

Here is an example where images are combined with transformations.

The JavaScript code