Element Transformation
JXG.Transformation
↳ Transformation
This element is used to provide projective transformations.
Defined in: transformation.js.
Extends
JXG.Transformation.
Constructor Attributes | Constructor Name and Description |
---|---|
A transformation consists of a 3x3 matrix, i.e.
|
- Methods borrowed from class JXG.Transformation:
- apply, applyOnce, bindTo, melt, setAttribute, setMatrix, setProperty, update
Element Detail
Transformation
A transformation consists of a 3x3 matrix, i.e. it is a projective transformation.
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "transformation".
- Possible parent array combinations are:
-
{numbers|functions} parameters
- The parameters depend on the transformation type, supplied as attribute 'type'.
Possible transformation types are
- 'translate'
- 'scale'
- 'reflect'
- 'rotate'
- 'shear'
- 'generic'
Translation matrix:
( 1 0 0) ( z ) ( a 1 0) * ( x ) ( b 0 1) ( y )
Scale matrix:
( 1 0 0) ( z ) ( 0 a 0) * ( x ) ( 0 0 b) ( y )
A rotation matrix with angle a (in Radians)
( 1 0 0 ) ( z ) ( 0 cos(a) -sin(a)) * ( x ) ( 0 sin(a) cos(a) ) ( y )
Shear matrix:
( 1 0 0) ( z ) ( 0 1 a) * ( x ) ( 0 b 1) ( y )
Generic transformation:
( a b c ) ( z ) ( d e f ) * ( x ) ( g h i ) ( y )
- Throws:
- {Exception}
- If the element cannot be constructed with the given parent objects an exception is thrown.
- Examples:
// The point B is determined by taking twice the vector A from the origin var p0 = board.create('point', [0, 3], {name: 'A'}), t = board.create('transform', [function(){ return p0.X(); }, "Y(A)"], {type: 'translate'}), p1 = board.create('point', [p0, t], {color: 'blue'});
// The point B is the result of scaling the point A with factor 2 in horizontal direction // and with factor 0.5 in vertical direction. var p1 = board.create('point', [1, 1]), t = board.create('transform', [2, 0.5], {type: 'scale'}), p2 = board.create('point', [p1, t], {color: 'blue'});
// The point B is rotated around C which gives point D. The angle is determined // by the vertical height of point A. var p0 = board.create('point', [0, 3], {name: 'A'}), p1 = board.create('point', [1, 1]), p2 = board.create('point', [2, 1], {name:'C', fixed: true}), // angle, rotation center: t = board.create('transform', ['Y(A)', p2], {type: 'rotate'}), p3 = board.create('point', [p1, t], {color: 'blue'});
// A concatenation of several transformations. var p1 = board.create('point', [1, 1]), t1 = board.create('transform', [-2, -1], {type: 'translate'}), t2 = board.create('transform', [Math.PI/4], {type: 'rotate'}), t3 = board.create('transform', [2, 1], {type: 'translate'}), p2 = board.create('point', [p1, [t1, t2, t3]], {color: 'blue'});
// Reflection of point A var p1 = board.create('point', [1, 1]), p2 = board.create('point', [1, 3]), p3 = board.create('point', [-2, 0]), l = board.create('line', [p2, p3]), t = board.create('transform', [l], {type: 'reflect'}), // Possible are l, l.id, l.name p4 = board.create('point', [p1, t], {color: 'blue'});
// One time application of a transform to points A, B var p1 = board.create('point', [1, 1]), p2 = board.create('point', [1, 1]), t = board.create('transform', [3, 2], {type: 'shear'}); t.applyOnce([p1, p2]);
// Construct a square of side length 2 with the // help of transformations var sq = [], right = board.create('transform', [2, 0], {type: 'translate'}), up = board.create('transform', [0, 2], {type: 'translate'}), pol, rot, p0; // The first point is free sq[0] = board.create('point', [0, 0], {name: 'Drag me'}), // Construct the other free points by transformations sq[1] = board.create('point', [sq[0], right]), sq[2] = board.create('point', [sq[0], [right, up]]), sq[3] = board.create('point', [sq[0], up]), // Polygon through these four points pol = board.create('polygon', sq, { fillColor:'blue', gradient:'radial', gradientsecondcolor:'white', gradientSecondOpacity:'0' }), p0 = board.create('point', [0, 3], {name: 'angle'}), // Rotate the square around point sq[0] by dragging A rot = board.create('transform', ['Y(angle)', sq[0]], {type: 'rotate'}); // Apply the rotation to all but the first point of the square rot.bindTo(sq.slice(1));
Attributes borrowed from other Elements
Fields borrowed from other Elements
Methods borrowed from other Elements
- Methods borrowed from class JXG.Transformation:
- apply, applyOnce, bindTo, melt, setAttribute, setMatrix, setProperty, update
Events borrowed from other Elements