Texts and Transformations: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 2: Line 2:
<jsxgraph with="500" height="500" box="box1">
<jsxgraph with="500" height="500" box="box1">
(function(){
(function(){
     var brd, txt, p0, p1;
     var brd, txt;
     JXG.Options.text.defaultDisplay = 'internal';
     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('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
    //p0 = brd.create('point', [-2,-1], {size:15, name:'offset'});
     txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:'30px'});
     txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:'30px'});


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

Revision as of 12:08, 2 January 2011

A simple text rotation

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.defaultDisplay = '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:'30px'});

    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);