Aligning text: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 7: | Line 7: | ||
</style> | </style> | ||
</html> | </html> | ||
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'. | |||
<jsxgraph width="600" height="600"> | <jsxgraph width="600" height="600"> | ||
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,10,7,-1], axis:true, keepAspectRatio:false}); | var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,10,7,-1], axis:true, keepAspectRatio:false}); | ||
Line 15: | Line 16: | ||
brd.create('text', [3, 6, "anchorX middle"], {anchorX:'middle', cssClass:'mytext'}); | brd.create('text', [3, 6, "anchorX middle"], {anchorX:'middle', cssClass:'mytext'}); | ||
brd.create('text', [3, 5, "anchorX right"], {anchorX:'right', cssClass:'mytext'}); | brd.create('text', [3, 5, "anchorX right"], {anchorX:'right', cssClass:'mytext'}); | ||
brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2}); | brd.create('line', [-2, 0, 1], {strokeWidth:1, dash:2}); | ||
Line 27: | Line 27: | ||
===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, keepAspectRatio:false}); | |||
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'}); | |||
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'}); | |||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] |
Revision as of 07:53, 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});
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'});
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'});