Difference between revisions of "Reflect images"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) (Created page with "<jsxgraph width="500" height="600"> (function(){ var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-6,6,12,-6], axis:true}); })(); </jsxgraph> ===The JavaScript code==...") |
A WASSERMANN (talk | contribs) |
||
| Line 1: | Line 1: | ||
| − | <jsxgraph width=" | + | <jsxgraph width="600" height="500"> |
(function(){ | (function(){ | ||
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-6,6,12,-6], axis:true}); | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-6,6,12,-6], axis:true}); | ||
| + | var p0, p1, p2, p3, p4, p5 | ||
| + | l1, l2, | ||
| + | im1, im2, im3, | ||
| + | t1, t2, | ||
| + | imurl = "/distrib/images/uccellino.jpg", | ||
| + | X, Y, W, H; // Functions defining the position, width and height of the original image. | ||
| + | |||
| + | // Define two line through four points | ||
| + | p0 = board.createElement('point', [0,3]); | ||
| + | p1 = board.createElement('point', [1,1]); | ||
| + | p2 = board.createElement('point', [-3,4]); | ||
| + | p3 = board.createElement('point', [10,4]); | ||
| + | |||
| + | l1 = board.createElement('line', [p0, p1]); | ||
| + | l2 = board.createElement('line', [p2, p3]); | ||
| + | |||
| + | p4 = board.createElement('point', [-2,-2]); | ||
| + | p5 = board.createElement('point', [1,0]); | ||
| + | |||
| + | X = function(){ return Math.min(p4.X(), p5.X()); }; | ||
| + | Y = function(){ return Math.min(p4.Y(), p5.Y()); }; | ||
| + | W = function(){ return Math.abs(p5.X() -p4.X()); }; | ||
| + | H = function(){ return Math.abs(p5.Y() -p4.Y()); }; | ||
| + | |||
| + | im1 = board.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7}); | ||
| + | im2 = board.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7}); | ||
| + | im3 = board.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7}); | ||
| + | |||
| + | t1 = board.createElement('transform', [l1], {type:'reflect'}); | ||
| + | t2 = board.createElement('transform', [l2], {type:'reflect'}); | ||
| + | |||
| + | // Reflect im2 on l1 | ||
| + | t1.bindTo(im2); | ||
| + | |||
| + | // Reflect im2 on l1 and on l2 | ||
| + | t1.bindTo(im3); | ||
| + | t2.bindTo(im3); | ||
| + | |||
| + | board.update(); | ||
})(); | })(); | ||
Revision as of 13:50, 29 July 2011
The JavaScript code
Here is the complete code to accomplish this behaviour.
