Aligning text: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 20: Line 20:
     brd.create('text', [3, 5, "anchorX right"], {anchorX:'right', cssClass:'mytext'});
     brd.create('text', [3, 5, "anchorX right"], {anchorX:'right', cssClass:'mytext'});


     // Horizontal line at y=2
     // Horizontal line at y=3
     brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2});
     brd.create('line', [-3, 0, 1], {strokeWidth:1, dash:2});
     brd.create('text', [1, 2, "Multiline text<br>default"], {cssClass:'mytext'});
     brd.create('text', [1, 3, "Multiline text<br>default"], {cssClass:'mytext'});
     brd.create('text', [2.2, 2, "Multiline text<br>anchorY bottom"], {anchorY:'bottom', cssClass:'mytext'});
     brd.create('text', [2.2, 3, "Multiline text<br>anchorY bottom"], {anchorY:'bottom', cssClass:'mytext'});
     brd.create('text', [3.4, 2, "Multiline text<br>anchorY middle"], {anchorY:'middle', cssClass:'mytext'});
     brd.create('text', [3.4, 3, "Multiline text<br>anchorY middle"], {anchorY:'middle', cssClass:'mytext'});
     brd.create('text', [4.6, 2, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'});
     brd.create('text', [4.6, 3, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'});
 
    brd.create('text', [2.2, 2, "Multiline text<br>anchorY top<br>anchorX right"], {anchorX:'right', anchorY:'bottom', cssClass:'mytext'});


     brd.create('text', [0.0,0.0,'Rotate'], {display:'internal', rotate:30});
     brd.create('text', [0.0,0.0,'Rotate'], {display:'internal', rotate:30});

Revision as of 08:09, 19 October 2012

Texts can be aligned with the attributes anchorX and anchorY. Possible values for anchorX are 'left', 'middle', right'. Possible values for anchorY are 'bottom', 'middle', 'top'.

Text can be rotated if it is declared as display:"internal". For SVG this means, instead of an HTML div the SVG text is taken as text node.

The underlying JavaScript code

    var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,10,7,-1], axis:true, keepaspectratio:false});

    // Vertical line at x=3
    brd.create('line', [-3, 1, 0], {strokeWidth:1, dash:2});  
    brd.create('text', [3, 8, "Default"], {cssClass:'mytext'});
    brd.create('text', [3, 7, "anchorX left"], {anchorX:'left', cssClass:'mytext'});
    brd.create('text', [3, 6, "anchorX middle"], {anchorX:'middle', cssClass:'mytext'});
    brd.create('text', [3, 5, "anchorX right"], {anchorX:'right', cssClass:'mytext'});

    // Horizontal line at y=2
    brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2});
    brd.create('text', [1, 2, "Multiline text<br>default"], {cssClass:'mytext'});
    brd.create('text', [2.2, 2, "Multiline text<br>anchorY bottom"], {anchorY:'bottom', cssClass:'mytext'});
    brd.create('text', [3.4, 2, "Multiline text<br>anchorY middle"], {anchorY:'middle', cssClass:'mytext'});
    brd.create('text', [4.6, 2, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'});

    brd.create('text', [0.0,0.0,'Rotate'], {display:'internal', rotate:30});