Texts and Transformations: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
The same tarnsformation 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.
<jsxgraph with="500" height="500" box="box1">
<jsxgraph with="500" height="500" box="box1">
(function(){
(function(){
Line 24: Line 30:
                                         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 31: Line 36:
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;
    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);
</source>
</source>


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

Revision as of 21:47, 1 January 2011

The same tarnsformation 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('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);