Name
CRC.transform() — performs an arbitrary transform
Synopsis
void transform(floata
, floatb
, floatc
, floatd
, floate
, floatf
)
Arguments
a
,
b
,
c
,
d
,
e
,
f
Six elements of a 3 × 3 affine transformation matrix
Description
The arguments to this method specify the six nontrivial elements
of a 3 × 3 affine transformation matrix T
:
a c e b d f 0 0 1
transform()
sets the current transformation
matrix to the product of the transformation matrix and the
T
:
CTM' = CTM × T
Translations, scales, and rotations can be implemented in terms of
this general-purpose transform()
method. For a
translation, call transform(1,0,0,1,dx,dy)
. For a
scale, call transform(sx,0,0,sy,0,0)
. For a clockwise
rotation around the origin by an angle x
, use:
transform(cos(x),sin(x),-sin(x), cos(x), 0, 0)
For a shear by a factor of k
parallel to the X
axis, call transform
(1,0,k,1,0,0)
. For a shear parallel to
the Y axis, call transform
(1,k,0,1,0,0)
.
Example
// Perform a shear transform function shear(c,kx,ky) { c.transform(1,ky,kx,1,0,0); } // Rotate clockwise by theta radians about the point (x,y) function rotateAbout(c, theta, x, y) { var ct = Math.cos(theta); var st = Math.sin(theta); c.transform(ct, -st, st, ct, -x*ct - y*st + x, x*st - y*ct + y); }
See Also
CRC.rotate(), CRC.scale(), CRC.setTransform(), CRC.translate()
Get Canvas Pocket Reference now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.