Texts and Transformations - Revision history

A WASSERMANN at 15:55, 9 August 2023

2023-08-09T15:55:48Z

← Older revision		Revision as of 15:55, 9 August 2023
Line 4:		Line 4:
	(function(){		(function(){
	var brd, txt;		var brd, txt;
	~~JXG.Options.text.display = 'internal';~~

	brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
Line 18:		Line 17:
	<source lang="javascript">		<source lang="javascript">
	var brd, txt;		var brd, txt;
	~~JXG.Options.text.display = 'internal';~~

	brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
Line 35:		Line 33:
	(function(){		(function(){
	var brd, txt, p0, p1;		var brd, txt, p0, p1;
	~~JXG.Options.text.display = 'internal';~~

	brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
Line 65:		Line 62:
	<source lang="javascript">		<source lang="javascript">
	var brd, txt, p0, p1;		var brd, txt, p0, p1;
	~~JXG.Options.text.display = 'internal';~~

	brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});

2023-08-09T15:53:20Z

← Older revision		Revision as of 15:53, 9 August 2023
Line 1:		Line 1:
	==A simple text rotation==		==A simple text rotation==
	Rotate the text "Hello World" by 30° around its lower left corner~~. To make this example work on Firefox and Webkit browsers, we have to use display type 'internal'~~. Don't forget to update the board at the end, ~~other wise~~ the transformations is not applied.		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.
	<jsxgraph with="500" height="500" box="box1">		<jsxgraph with="500" height="500" box="box1">
	(function(){		(function(){
Line 32:		Line 32:
	The same transformations we applied to images in [[Images and Transformations]] can be applied to texts, too.		The same transformations 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="box2">		<jsxgraph with="500" height="500" box="box2">
	(function(){		(function(){

2013-01-10T16:31:39Z

2012-11-05T18:44:28Z

A more complex example

← Older revision		Revision as of 18:44, 5 November 2012
Line 61:		Line 61:
	tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);		tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);

	~~p0.label.content.addRotation(30);~~
	})();		})();
	</jsxgraph>		</jsxgraph>

2012-11-05T18:43:41Z

A more complex example

← Older revision		Revision as of 18:43, 5 November 2012
Line 61:		Line 61:
	tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);		tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);

	p0.label.content.~~setProperty~~(~~{rotate:~~30});		p0.label.content.addRotation(30);
	})();		})();
	</jsxgraph>		</jsxgraph>

2012-11-05T18:41:55Z

A more complex example

← Older revision		Revision as of 18:41, 5 November 2012
Line 60:		Line 60:
	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);

			p0.label.content.setProperty({rotate:30});
	})();		})();
	</jsxgraph>		</jsxgraph>

2011-07-29T15:56:36Z

A more complex example

← Older revision		Revision as of 15:56, 29 July 2011
Line 40:		Line 40:
	JXG.Options.text.display = 'internal';		JXG.Options.text.display = 'internal';

	brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,25,5,-25], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
	p0 = brd.create('point', [0,0], {style:5, name:'offset'});		p0 = brd.create('point', [0,0], {style:5, name:'offset'});
	p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});		p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});

2011-07-29T15:55:20Z

A more complex example

← Older revision		Revision as of 15:55, 29 July 2011
Line 40:		Line 40:
	JXG.Options.text.display = 'internal';		JXG.Options.text.display = 'internal';

	brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,25,5,-25], axis:true, showNavigation:true, showCopyright:true});
	p0 = brd.create('point', [0,0], {style:5, name:'offset'});		p0 = brd.create('point', [0,0], {style:5, name:'offset'});
	p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});		p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'});

2011-03-25T10:49:45Z

← Older revision		Revision as of 10:49, 25 March 2011
Line 4:		Line 4:
	(function(){		(function(){
	var brd, txt;		var brd, txt;
	JXG.Options.text.display = '~~html~~';		JXG.Options.text.display = 'internal';

	brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
Line 38:		Line 38:
	(function(){		(function(){
	var brd, txt, p0, p1;		var brd, txt, p0, p1;
	JXG.Options.text.display = '~~html~~';		JXG.Options.text.display = 'internal';

	brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});

2011-03-25T10:49:18Z

← Older revision		Revision as of 10:49, 25 March 2011
Line 38:		Line 38:
	(function(){		(function(){
	var brd, txt, p0, p1;		var brd, txt, p0, p1;
	JXG.Options.text.display = '~~internal~~';		JXG.Options.text.display = 'html';

	brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});		brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});