Images - Revision history

A WASSERMANN at 10:46, 9 March 2016

2016-03-09T10:46:02Z

← Older revision		Revision as of 10:46, 9 March 2016
Line 112:		Line 112:

	==Rotate image around its center==		==Rotate image around its center==
	Rotate image around its center. This has to be realized with transformations, see [Texts and Transformations II].		Rotate image around its center. This has to be realized with transformations, see [[Texts and Transformations II]].
	<jsxgraph with="500" height="500" box="box5">		<jsxgraph with="500" height="500" box="box5">
	(function(){		(function(){

A WASSERMANN at 10:43, 9 March 2016

2016-03-09T10:43:04Z

← Older revision		Revision as of 10:43, 9 March 2016
Line 164:		Line 164:
	var im1 = brd.create('image',		var im1 = brd.create('image',
	[urlImg1, [-3, 0], [3, 3]],		[urlImg1, [-3, 0], [3, 3]],
	{ opacity: 0.6 } ~~// rotate by 30°~~		{ opacity: 0.6 }
	);		);

Line 182:		Line 182:
	], {type: 'translate'});		], {type: 'translate'});
	var tRot = brd.create('transform', [		var tRot = brd.create('transform', [
	60 * Math.PI / 180.0		60 * Math.PI / 180.0 // Rotate by 60°
	], {type: 'rotate'});		], {type: 'rotate'});

A WASSERMANN at 10:42, 9 March 2016

2016-03-09T10:42:20Z

← Older revision		Revision as of 10:42, 9 March 2016
Line 96:		Line 96:
	})();		})();
	</jsxgraph>		</jsxgraph>

			===The JavaScript code===
			<source lang="javascript">
			var brd = JXG.JSXGraph.initBoard('box4', {boundingbox:[-5,5,5,-5],axis:true});
			var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
			var im = brd.create('image',
			[urlImg1, [0, 0], [3, 3]],
			{ opacity: 0.4 } // original position
			);
			var im1 = brd.create('image',
			[urlImg1, [0, 0], [3, 3]],
			{ opacity: 0.6, rotate: 30 } // rotate by 30°
			);
			</source>

	==Rotate image around its center==		==Rotate image around its center==
	Rotate image around its center.		Rotate image around its center. This has to be realized with transformations, see [Texts and Transformations II].
	<jsxgraph with="500" height="500" box="box5">		<jsxgraph with="500" height="500" box="box5">
	(function(){		(function(){
Line 127:		Line 141:
	], {type: 'translate'});		], {type: 'translate'});
	var tRot = brd.create('transform', [		var tRot = brd.create('transform', [
	30 * Math.PI / 180.0		60 * Math.PI / 180.0
	], {type: 'rotate'});		], {type: 'rotate'});



	tOff.bindTo(im1);		tOff.bindTo(im1); // Shift image to origin
	tRot.bindTo(im1);		tRot.bindTo(im1); // Rotate
	tOffInverse.bindTo(im1);		tOffInverse.bindTo(im1); // Shift image back

	brd.update();		brd.update();
	})();		})();
	</jsxgraph>		</jsxgraph>

			===The JavaScript code===
			<source lang="javascript">
			var brd = JXG.JSXGraph.initBoard('box5', {boundingbox:[-5,5,5,-5],axis:true});
			var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
			var im = brd.create('image',
			[urlImg1, [-3, 0], [3, 3]],
			{ opacity: 0.4 } // original position
			);
			var im1 = brd.create('image',
			[urlImg1, [-3, 0], [3, 3]],
			{ opacity: 0.6 } // rotate by 30°
			);

			var tOff = brd.create('transform', [
			function () {
			return -im1.X() - im1.W()*0.5;
			}, function () {
			return -im1.Y() - im1.H()*0.5;
			}
			], {type: 'translate'});
			var tOffInverse = brd.create('transform', [
			function () {
			return im1.X() + im1.W()*0.5;
			}, function () {
			return im1.Y() + im1.H()*0.5;
			}
			], {type: 'translate'});
			var tRot = brd.create('transform', [
			60 * Math.PI / 180.0
			], {type: 'rotate'});



			tOff.bindTo(im1); // Shift image to origin
			tRot.bindTo(im1); // Rotate
			tOffInverse.bindTo(im1); // Shift image back

			brd.update();
			</source>

	[[Category:Examples]]		[[Category:Examples]]

A WASSERMANN at 10:38, 9 March 2016

2016-03-09T10:38:41Z

@@ Line 119: / Line 119: @@
+                     }
                  ], {type: 'translate'});
    tOff.bindTo(im1);
    brd.update();
 })();

A WASSERMANN at 10:36, 9 March 2016

2016-03-09T10:36:28Z

← Older revision		Revision as of 10:36, 9 March 2016
Line 104:		Line 104:
	var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";		var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
	var im = brd.create('image',		var im = brd.create('image',
	[urlImg1, [-1, 0], [3, 3]],		[urlImg1, [-3, 0], [3, 3]],
	{ opacity: 0.4 } // original position		{ opacity: 0.4 } // original position
	);		);
	var im1 = brd.create('image',		var im1 = brd.create('image',
	[urlImg1, [-1, 0], [3, 3]],		[urlImg1, [-3, 0], [3, 3]],
	{ opacity: 0.6 } // rotate by 30°		{ opacity: 0.6 } // rotate by 30°
	);		);

A WASSERMANN at 10:35, 9 March 2016

2016-03-09T10:35:44Z

@@ Line 96: / Line 96: @@
 })();
 </jsxgraph>
 [[Category:Examples]]

A WASSERMANN at 10:30, 9 March 2016

2016-03-09T10:30:27Z

← Older revision		Revision as of 10:30, 9 March 2016
Line 88:		Line 88:
	var im = brd.create('image',		var im = brd.create('image',
	[urlImg1, [0, 0], [3, 3]],		[urlImg1, [0, 0], [3, 3]],
	{ opacity: 0.2 } // original position		{ opacity: 0.4 } // original position
	);		);
	var im1 = brd.create('image',		var im1 = brd.create('image',
	[urlImg1, [0, 0], [3, 3]],		[urlImg1, [0, 0], [3, 3]],
	{ rotate: 30 } // rotate by 30°		{ opacity: 0.6, rotate: 30 } // rotate by 30°
	);		);
	})();		})();

A WASSERMANN at 10:29, 9 March 2016

2016-03-09T10:29:52Z

← Older revision		Revision as of 10:29, 9 March 2016
Line 87:		Line 87:
	var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";		var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
	var im = brd.create('image',		var im = brd.create('image',
			[urlImg1, [0, 0], [3, 3]],
			{ opacity: 0.2 } // original position
			);
			var im1 = brd.create('image',
	[urlImg1, [0, 0], [3, 3]],		[urlImg1, [0, 0], [3, 3]],
	{ rotate: 30 } // rotate by 30°		{ rotate: 30 } // rotate by 30°

A WASSERMANN at 10:28, 9 March 2016

2016-03-09T10:28:39Z

← Older revision		Revision as of 10:28, 9 March 2016
Line 85:		Line 85:
	(function(){		(function(){
	var brd = JXG.JSXGraph.initBoard('box4', {boundingbox:[-5,5,5,-5],axis:true});		var brd = JXG.JSXGraph.initBoard('box4', {boundingbox:[-5,5,5,-5],axis:true});
	var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/~~fagiolo~~.jpg";		var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
	var im = brd.create('image',		var im = brd.create('image',
	[urlImg1, 0, 0],		[urlImg1, [0, 0], [3, 3]],
	{ rotate: 30 } // rotate by 30°		{ rotate: 30 } // rotate by 30°
	);		);

A WASSERMANN at 10:27, 9 March 2016

2016-03-09T10:27:11Z

@@ Line 79: / Line 79: @@
            );
 </source>
 [[Category:Examples]]