Texts and Transformations

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