Difference between revisions of "Images and Transformations"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
| 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 | ||
| − | |||
// | // | ||
| − | // Translate image and point "rot+scale" by | + | // 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 23: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".
