Texts and Transformations: Difference between revisions

From JSXGraph Wiki
(New page: <jsxgraph with="500" height="500" box="box1"> (function(){ var brd, txt, p0, p1; JXG.Options.text.defaultDisplay = 'internal'; brd = JXG.JSXGraph.initBoard('box1', {boundi...)
 
No edit summary
 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
==A simple text rotation==
Rotate the text "Hello World" by 30° around its lower left corner. Don't forget to update the board at the end, otherwise the transformations is not applied.
<jsxgraph with="500" height="500" box="box1">
<jsxgraph with="500" height="500" box="box1">
(function(){
    var brd, txt;
   
    brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
    txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});
    // Rotate text around the lower left corner (-2,-1) by 30 degrees.
    var tRot = brd.create('transform', [30.0*Math.PI/180.0, -2,-1], {type:'rotate'});
    tRot.bindTo(txt);
    brd.update();
})();
</jsxgraph>
===The JavaScript code===
<source lang="javascript">
    var brd, txt;
   
    brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
    txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});
    // Rotate text around the lower left corner (-2,-1) by 30 degrees.
    var tRot = brd.create('transform', [30.0*Math.PI/180.0, -2,-1], {type:'rotate'});
    tRot.bindTo(txt);
    brd.update();
</source>
==A more complex example==
The same transformations we applied to images in [[Images and Transformations]] can be applied to texts, too.
<jsxgraph with="500" height="500" box="box2">
(function(){
(function(){
     var brd, txt, p0, p1;
     var brd, txt, p0, p1;
    JXG.Options.text.defaultDisplay = 'internal';
      
      
     brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
     brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], 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:40});
     txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30});


     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 31: Line 61:
Here is the complete code to accomplish this behaviour.
Here is the complete code to accomplish this behaviour.
<source lang="javascript">
<source lang="javascript">
    var brd, txt, p0, p1;
   
    brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
    p0 = brd.create('point', [0,0], {style:5, name:'offset'});
    p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});
    txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30});
    var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});
    tOff.bindTo(txt);
    tOff.bindTo(p1);
    // 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'});
    tRot.bindTo(txt);
       
    // Scale text by dragging point "rot+scale"
    // We do this by moving the text back to the origin (inverse of transformation tOff),
    // then scale the text (because scaling "starts from (0,0))
    // Finally, we move the text back to point "Offset"
    var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});
    var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},
                                        function(){return p1.Dist(p0)/3;}], {type:'scale'});
    tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Text]]

Latest revision as of 15:55, 9 August 2023

A simple text rotation

Rotate the text "Hello World" by 30° around its lower left corner. Don't forget to update the board at the end, otherwise the transformations is not applied.

The JavaScript code

    var brd, txt;
    
    brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
    txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});

    // Rotate text around the lower left corner (-2,-1) by 30 degrees.
    var tRot = brd.create('transform', [30.0*Math.PI/180.0, -2,-1], {type:'rotate'}); 
    tRot.bindTo(txt);
    brd.update();

A more complex example

The same transformations we applied to images in Images and Transformations can be applied to texts, too.

The JavaScript code

Here is the complete code to accomplish this behaviour.

    var brd, txt, p0, p1;
    
    brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
    p0 = brd.create('point', [0,0], {style:5, name:'offset'}); 
    p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'}); 
    txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30});

    var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); 
    tOff.bindTo(txt);
    tOff.bindTo(p1);
    // 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'}); 
    tRot.bindTo(txt);
        
    // Scale text by dragging point "rot+scale"
    // We do this by moving the text back to the origin (inverse of transformation tOff),
    // then scale the text (because scaling "starts from (0,0))
    // Finally, we move the text back to point "Offset"
    var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); 
    var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},
                                        function(){return p1.Dist(p0)/3;}], {type:'scale'}); 
    tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);