transform - method of the CanvasCtx object
Description:
Replaces the current transformation matrix with another.
Syntax:
Object transform(Long a, Long b, Long c, Long d, Long e, Long f)
Parameters:
| a | (Long) (default 1) Horizontal drawing ratio |
|---|
| b | (Long) (default 0) Horizontal drawing skew |
|---|
| c | (Long) (default 0) Vertical drawing skew |
|---|
| d | (Long) (default 1) Vertical drawing ratio |
|---|
| e | (Long) (default 0) Horizontal drawing shift |
|---|
| f | (Long) (default 0) Vertical drawing shift |
|---|
Note:
The transformations allow to map the positions from one co-ordinate system to another. It can be used for drawing a shape into a magnified/reduced, rotated, shifted, mirrored 2D space. It is easier to transform the 2D space coordinates than recalculating the coordinates of all objects. All position transformations are defined by 6 variables
a, b, c, d, e, f (out of 9) of the 2D space transformation matrix. The default value of non-transformed 2D space is
1, 0, 0, 1, 0, 0 (so-called unit matrix). The transformation matrix is a part of the drawing area. The
save and
restore methods can save this matrix.
The transformation methods
transform,
translate,
scale or
rotate modify some (or all) values of the transformation matrix.
Each method saves the current state of the transformation matrix and then applies the modification(s). It means that these modifications are cumulative.
By contrast, the
setTransform transformation method
first sets the currently valid transformation matrix to the default value and then executes the transform transformation. This makes it the only transformation method that allows reset all cumulated transformations and set new transformation that is not cumulated.
This method is also functional in
Web panels.
Graphical transformation examples on wikimedia.org:
https://commons.wikimedia.org/wiki/File:2D_affine_transformation_matrix.svgExample1:
The
ctx variable represents the drawing canvas (
CanvasCtx). The setup is done on the "
Draw" tab at the beginning of the script of drawing event
onDraw as follows:
var ctx =
pEvent.
GetCtx(1);
JavaScriptSelect and copy to clipboard
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);do not rotate:
JavaScriptSelect and copy to clipboard
ctx.transform(1, 0, 0, 1, 0, 0);left:
JavaScriptSelect and copy to clipboard
ctx.transform(0, -1, 1, 0, 0, dy);down:
JavaScriptSelect and copy to clipboard
ctx.transform(-1, 0, 0, -1, dx, dy);right:
JavaScriptSelect and copy to clipboard
ctx.transform(0, 1, -1, 0, dx, 0);flip:
JavaScriptSelect and copy to clipboard
ctx.transform(-1, 0, 0, 1, dx, 0);left and flip:
JavaScriptSelect and copy to clipboard
ctx.transform(0, 1, 1, 0, 0, 0);down and flip:
JavaScriptSelect and copy to clipboard
ctx.transform(1, 0, 0, -1, 0, dy);right and flip:
JavaScriptSelect and copy to clipboard
ctx.transform(0, -1, -1, 0, dx, dy);