Images and Transformations: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
Here is an example where images are combined with transformations.
Here is an example where images are combined with transformations.
The point "offset" determines the lower left corner of the image.
Additionally the point "offset" determines the position of the point "rot+scale".
<jsxgraph with="500" height="500" box="box1">
<jsxgraph with="500" height="500" box="box1">
(function(){
(function(){
Line 6: Line 8:


   var p0 = brd.create('point', [-2,-1], {size:8, name:'offset', opacity:0.3});  
   var p0 = brd.create('point', [-2,-1], {size:8, name:'offset', opacity:0.3});  
  // Initially we put the lower left corner of the image to (0,0) and
  // p1 to (3,0)
  // After applying the transformation tOff to the image and the point p1, they are moved to
  // (-2,-1) and (1,-1), respectively.
  var im = brd.create('image',[urlImg, [0,0], [3,3]]);
   var p1 = brd.create('point', [3,0], {size:8, name:'rotate+scale', opacity:0.3});  
   var p1 = brd.create('point', [3,0], {size:8, name:'rotate+scale', opacity:0.3});  
   var li = brd.create('segment', [p0,p1], {dash:2});          // Just for illustration
   var li = brd.create('segment', [p0,p1], {dash:2});          // Just for illustration
  var im = brd.create('image',[urlImg, [0,0], [3,3]]);
   //  
   //  
   // Translate image and point "rot+scale" by freagging point "offset"
   // Translate image and point "rot+scale" by dragging point "offset"
   var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});  
   var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});  
   tOff.bindTo(im);
   tOff.bindTo(im);

Revision as of 21:24, 1 January 2011

Here is an example where images are combined with transformations. The point "offset" determines the lower left corner of the image. Additionally the point "offset" determines the position of the point "rot+scale".

The JavaScript code