Difference between revisions of "Texts and Transformations"

From JSXGraph Wiki
Jump to navigationJump to search
Line 16: Line 16:
 
     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:'30'});
+
     txt = brd.create('text',[0,0, 'Hello World'], {fontSize:'200%'});
  
 
     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'});  

Revision as of 10:37, 2 January 2011

The same transformation 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.

Note: In Mediawiki setting the fontSize property of a JSXGraph text with Firefox does not work. Therefore, the "Hello World" string may be displayed too small.

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('box1', {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);