Aligning text: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 29: | Line 29: | ||
===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,10,7,-1], axis:true, | var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,10,7,-1], axis:true, keepaspectratio:false}); | ||
brd.create('line', [-3, 1, 0], {strokeWidth:1, dash:2}); | // 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, 8, "Default"], {cssClass:'mytext'}); | ||
brd.create('text', [3, 7, "anchorX left"], {anchorX:'left', cssClass:'mytext'}); | brd.create('text', [3, 7, "anchorX left"], {anchorX:'left', cssClass:'mytext'}); | ||
Line 37: | Line 38: | ||
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 | |||
brd.create('line', [-2, 0, 1], {strokeWidth:1, dash: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', [1, 2, "Multiline text<br>default"], {cssClass:'mytext'}); | ||
Line 42: | Line 44: | ||
brd.create('text', [3.4, 2, "Multiline text<br>anchorY middle"], {anchorY:'middle', 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', [4.6, 2, "Multiline text<br>anchorY top"], {anchorY:'top', cssClass:'mytext'}); | ||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] |
Revision as of 07:56, 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'.
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'});