Difference between revisions of "Texts and Transformations"

From JSXGraph Wiki
Jump to navigationJump to search
 
(13 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
(function(){
 
(function(){
 
     var brd, txt;
 
     var brd, txt;
     JXG.Options.text.defaultDisplay = 'internal';
+
     JXG.Options.text.display = 'internal';
 
      
 
      
 
     brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
 
     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:'30px'});
+
     txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});
  
 
     // Rotate text around the lower left corner (-2,-1) by 30 degrees.
 
     // Rotate text around the lower left corner (-2,-1) by 30 degrees.
Line 15: Line 15:
 
})();
 
})();
 
</jsxgraph>
 
</jsxgraph>
 +
===The JavaScript code===
 +
<source lang="javascript">
 +
    var brd, txt;
 +
    JXG.Options.text.display = 'internal';
 +
   
 +
    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==
 
==A more complex example==
 
The same transformations we applied to images in [[Images and Transformations]] can be applied to texts, too.  
 
The same transformations we applied to images in [[Images and Transformations]] can be applied to texts, too.  
Line 24: Line 38:
 
(function(){
 
(function(){
 
     var brd, txt, p0, p1;
 
     var brd, txt, p0, p1;
     JXG.Options.text.defaultDisplay = 'internal';
+
     JXG.Options.text.display = 'internal';
 
      
 
      
 
     brd = JXG.JSXGraph.initBoard('box2', {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:'30px'});
+
     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 46: Line 60:
 
                                         function(){return p1.Dist(p0)/3;}], {type:'scale'});  
 
                                         function(){return p1.Dist(p0)/3;}], {type:'scale'});  
 
     tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);
 
     tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);
 +
 
})();
 
})();
 
</jsxgraph>
 
</jsxgraph>
Line 53: Line 68:
 
<source lang="javascript">
 
<source lang="javascript">
 
     var brd, txt, p0, p1;
 
     var brd, txt, p0, p1;
     JXG.Options.text.defaultDisplay = 'internal';
+
     JXG.Options.text.display = 'internal';
 
      
 
      
 
     brd = JXG.JSXGraph.initBoard('box2', {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:'30px'});
+
     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 78: Line 93:
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Text]]

Latest revision as of 17:31, 10 January 2013

A simple text rotation

Rotate the text "Hello World" by 30° around its lower left corner. To make this example work on Firefox and Webkit browsers, we have to use display type 'internal'. Don't forget to update the board at the end, other wise the transformations is not applied.

The JavaScript code

    var brd, txt;
    JXG.Options.text.display = 'internal';
    
    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.

There are only a few exceptions:

  • On Firefox and Webkit browsers the display type of text has to be set to 'internal'.
  • To work correctly on Internet Explorer the size of the text box has to be estimated. So, the result may look a little bit different from other browsers.

The JavaScript code

Here is the complete code to accomplish this behaviour.

    var brd, txt, p0, p1;
    JXG.Options.text.display = 'internal';
    
    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);