Difference between revisions of "Texts and Transformations II"

From JSXGraph Wiki
Jump to navigationJump to search
Line 10: Line 10:
 
     p0 = brd.create('point', [0,0], {style:5, name:'offset'});  
 
     p0 = brd.create('point', [0,0], {style:5, name:'offset'});  
 
     p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});  
 
     p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});  
     txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30});
+
     txt = brd.create('text',[0,0, 'Hello World'], {fontSize:64});
     im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,3]], {opacity:0.5});
+
     im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5});
  
 
     var tOff = brd.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'});  
Line 36: Line 36:
 
     p2 = brd.create('point', [0,4], {color:'blue', trace:true});  
 
     p2 = brd.create('point', [0,4], {color:'blue', trace:true});  
 
     txt = brd.create('text',[0, 0, JXG.JSXGraph.rendererType], {fontSize:'64'});
 
     txt = brd.create('text',[0, 0, JXG.JSXGraph.rendererType], {fontSize:'64'});
     im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,10]], {opacity:0.5});
+
     im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5});
  
 
     var tOffInv = brd.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'});  
Line 52: Line 52:
 
     var tRot = brd.create('transform', [function(){return Math.atan2((p1.Y()-p0.Y())/ratio, p1.X()-p0.X());}], {type:'rotate'});  
 
     var tRot = brd.create('transform', [function(){return Math.atan2((p1.Y()-p0.Y())/ratio, p1.X()-p0.X());}], {type:'rotate'});  
  
     // Rotate text around point "offset" by dragging point "rot+scale"
+
     // Rotate text around point "offset" by dragging point "rotate"
 
     tOffInv.bindTo(txt); ts1.bindTo(txt); tRot.bindTo(txt); ts2.bindTo(txt); tOff.bindTo(txt);
 
     tOffInv.bindTo(txt); ts1.bindTo(txt); tRot.bindTo(txt); ts2.bindTo(txt); tOff.bindTo(txt);
 
     tOffInv.bindTo(im); ts1.bindTo(im); tRot.bindTo(im); ts2.bindTo(im); tOff.bindTo(im);
 
     tOffInv.bindTo(im); ts1.bindTo(im); tRot.bindTo(im); ts2.bindTo(im); tOff.bindTo(im);

Revision as of 08:23, 1 August 2011

This example is similar to the one Text and Transformations, beside that the x-axis and the y-axis have different scalings. To be precise, tha ratio of the two scalings is equal to 4. The result is that rotating the text and the image will also stretch these objects.

In order to avoid this effect, we have to do the following

The JavaScript code

Here is the complete code to accomplish this behaviour.