JSXGraph
JSXGraph share

Share

Texts and Transformations
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.org/share/iframe/texts-and-transformations" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Texts and Transformations" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID = BOARDID0;

    var board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: true, showCopyright: true, keepaspectratio: true
    });
    
    var txt = board.create('text', [-2, -1, 'Hello World'], { fontSize: 30 });
    
    // Rotate text around the lower-left corner (-2,-1) by 30 degrees
    var tRot = board.create('transform', [30.0 * Math.PI / 180.0, -2, -1], { type: 'rotate' });
    tRot.bindTo(txt);
    
    board.update();
    
    
    var board1 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: true, showCopyright: true, keepaspectratio: true
    });
    
    var p0 = board1.create('point', [0, 0], { style: 5, name: 'offset' });
    var p1 = board1.create('point', [3, 0], { style: 5, name: 'rotate+scale' });
    var txt = board1.create('text', [0, 0, 'Hello World'], { fontSize: 30 });
    
    // Translate text by dragging "offset" point
    var tOff = board1.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 "rotate+scale"
    var tRot = board1.create('transform', [
        function() { return Math.atan2(p1.Y() - p0.Y(), p1.X() - p0.X()); },
        p0
    ], { type: 'rotate' });
    tRot.bindTo(txt);
    
    // Scale text by dragging "rotate+scale"
    var tOffInv = board1.create('transform', [
        function() { return -p0.X(); },
        function() { return -p0.Y(); }
    ], { type: 'translate' });
    
    var tScale = board1.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);
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!

var board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: true, showCopyright: true, keepaspectratio: true
});

var txt = board.create('text', [-2, -1, 'Hello World'], { fontSize: 30 });

// Rotate text around the lower-left corner (-2,-1) by 30 degrees
var tRot = board.create('transform', [30.0 * Math.PI / 180.0, -2, -1], { type: 'rotate' });
tRot.bindTo(txt);

board.update();


var board1 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: true, showCopyright: true, keepaspectratio: true
});

var p0 = board1.create('point', [0, 0], { style: 5, name: 'offset' });
var p1 = board1.create('point', [3, 0], { style: 5, name: 'rotate+scale' });
var txt = board1.create('text', [0, 0, 'Hello World'], { fontSize: 30 });

// Translate text by dragging "offset" point
var tOff = board1.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 "rotate+scale"
var tRot = board1.create('transform', [
    function() { return Math.atan2(p1.Y() - p0.Y(), p1.X() - p0.X()); },
    p0
], { type: 'rotate' });
tRot.bindTo(txt);

// Scale text by dragging "rotate+scale"
var tOffInv = board1.create('transform', [
    function() { return -p0.X(); },
    function() { return -p0.Y(); }
], { type: 'translate' });

var tScale = board1.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);
<jsxgraph width="100%, 100%" aspect-ratio="1 / 1, 1 / 1" numberOfBoards="2" title="Texts and Transformations" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   var board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: true, showCopyright: true, keepaspectratio: true
   });
   
   var txt = board.create('text', [-2, -1, 'Hello World'], { fontSize: 30 });
   
   // Rotate text around the lower-left corner (-2,-1) by 30 degrees
   var tRot = board.create('transform', [30.0 * Math.PI / 180.0, -2, -1], { type: 'rotate' });
   tRot.bindTo(txt);
   
   board.update();
   
   
   var board1 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: true, showCopyright: true, keepaspectratio: true
   });
   
   var p0 = board1.create('point', [0, 0], { style: 5, name: 'offset' });
   var p1 = board1.create('point', [3, 0], { style: 5, name: 'rotate+scale' });
   var txt = board1.create('text', [0, 0, 'Hello World'], { fontSize: 30 });
   
   // Translate text by dragging "offset" point
   var tOff = board1.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 "rotate+scale"
   var tRot = board1.create('transform', [
       function() { return Math.atan2(p1.Y() - p0.Y(), p1.X() - p0.X()); },
       p0
   ], { type: 'rotate' });
   tRot.bindTo(txt);
   
   // Scale text by dragging "rotate+scale"
   var tOffInv = board1.create('transform', [
       function() { return -p0.X(); },
       function() { return -p0.Y(); }
   ], { type: 'translate' });
   
   var tScale = board1.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);
</jsxgraph>

Texts and Transformations

Texts
The first example shows a simple text rotation. Rotate the text "Hello World" by 30° around its lower left corner. Don't forget to update the board at the end, otherwise the transformations is not applied. The second board shows a more complex example. The same transformations we applied to images in [[Images and Transformations]] can be applied to texts, too. 
// Define the ids of your boards in BOARDID0, BOARDID1,...

var board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: true, showCopyright: true, keepaspectratio: true
});

var txt = board.create('text', [-2, -1, 'Hello World'], { fontSize: 30 });

// Rotate text around the lower-left corner (-2,-1) by 30 degrees
var tRot = board.create('transform', [30.0 * Math.PI / 180.0, -2, -1], { type: 'rotate' });
tRot.bindTo(txt);

board.update();


var board1 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: true, showCopyright: true, keepaspectratio: true
});

var p0 = board1.create('point', [0, 0], { style: 5, name: 'offset' });
var p1 = board1.create('point', [3, 0], { style: 5, name: 'rotate+scale' });
var txt = board1.create('text', [0, 0, 'Hello World'], { fontSize: 30 });

// Translate text by dragging "offset" point
var tOff = board1.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 "rotate+scale"
var tRot = board1.create('transform', [
    function() { return Math.atan2(p1.Y() - p0.Y(), p1.X() - p0.X()); },
    p0
], { type: 'rotate' });
tRot.bindTo(txt);

// Scale text by dragging "rotate+scale"
var tOffInv = board1.create('transform', [
    function() { return -p0.X(); },
    function() { return -p0.Y(); }
], { type: 'translate' });

var tScale = board1.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);

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.