Texts and Transformations II: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 2: Line 2:
the y-axis have different scalings. To be precise, tha ratio of the two scalings is equal to 4.
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.
The result is that rotating the text and the image will also stretch these objects.
<jsxgraph with="500" height="500" box="box2">
<jsxgraph with="500" height="500" box="box1">
(function(){
(function(){
     var brd, txt, im, p0, p1;
     var brd, txt, im, p0, p1;
     JXG.Options.text.display = 'internal';
     JXG.Options.text.display = 'internal';
      
      
     brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true});
     brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true});
     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:64});
     txt = brd.create('text',[0,0, 'Hello'], {fontSize:64});
     im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5});
     im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5});


Line 17: Line 17:
     tOff.bindTo(im);
     tOff.bindTo(im);
     tOff.bindTo(p1);
     tOff.bindTo(p1);
     // Rotate text around point "offset" by dragging point "rotate+scale"
     // Rotate text around point "offset" by dragging point "rotate+scale"
     var tRot = brd.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'});  
Line 26: Line 27:


In order to avoid this effect, we have to do the following
In order to avoid this effect, we have to do the following
<jsxgraph with="500" height="500">
<jsxgraph with="500" height="500" box="box2">
(function(){
(function(){
     var brd, txt, p0, p1, p2, im;
     var brd, txt, p0, p1, p2, im;
     JXG.Options.text.display = 'internal';
     JXG.Options.text.display = 'internal';
      
      
     brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true});
     brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true});
     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 here'});  
     p1 = brd.create('point', [3,0], {style:5, name:'rotate here'});  

Revision as of 07:24, 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.