Class: Transform
Defined in: index.ts:1207
Transform represents 2D affine and perspective transformations using a 3x3 matrix.
Remarks
All operations are immutable and return new Transform instances. Transforms can be combined using the merge() method.
Example
// translate by (100, 200)
const translate = Transform.translate(new Vec2(100, 200))
// 2x scale
const scale = Transform.scale(new Vec2(2))
// rotate 45 degrees
const rotate = Transform.rotate(Math.PI / 4)
// translate then scale then rotate
const transform = translate.merge(scale).merge(rotate)
Constructors
Constructor
new Transform(
m00
,m01
,m02
,m10
,m11
,m12
,m20
,m21
,m22
):Transform
Defined in: index.ts:1228
Creates a new Transform instance.
Matrix layout:
|x'| | m00 m10 m20 | |x|
|y'| = | m01 m11 m21 | |y|
|z'| | m02 m12 m22 | |z|
Parameters
m00
number
= 1
Matrix element at row 0, column 0
m01
number
= 0
Matrix element at row 1, column 0
m02
number
= 0
Matrix element at row 2, column 0
m10
number
= 0
Matrix element at row 0, column 1
m11
number
= 1
Matrix element at row 1, column 1
m12
number
= 0
Matrix element at row 2, column 1
m20
number
= 0
Matrix element at row 0, column 2
m21
number
= 0
Matrix element at row 1, column 2
m22
number
= 1
Matrix element at row 2, column 2
Returns
Transform
Properties
m00
m00:
number
=1
Defined in: index.ts:1229
Matrix element at row 0, column 0
m01
m01:
number
=0
Defined in: index.ts:1230
Matrix element at row 1, column 0
m02
m02:
number
=0
Defined in: index.ts:1231
Matrix element at row 2, column 0
m10
m10:
number
=0
Defined in: index.ts:1232
Matrix element at row 0, column 1
m11
m11:
number
=1
Defined in: index.ts:1233
Matrix element at row 1, column 1
m12
m12:
number
=0
Defined in: index.ts:1234
Matrix element at row 2, column 1
m20
m20:
number
=0
Defined in: index.ts:1235
Matrix element at row 0, column 2
m21
m21:
number
=0
Defined in: index.ts:1236
Matrix element at row 1, column 2
m22
m22:
number
=1
Defined in: index.ts:1237
Matrix element at row 2, column 2
identity
readonly
static
identity:Transform
Defined in: index.ts:1574
Identity transform (no transformation).
Accessors
isAffine
Get Signature
get isAffine():
boolean
Defined in: index.ts:1340
Checks if this is an affine transform (no perspective).
Returns
boolean
True if the transform has no perspective distortion
isTranslation
Get Signature
get isTranslation():
boolean
Defined in: index.ts:1348
Checks if this is a translation-only transform.
Returns
boolean
True if only translation is applied
withoutTranslation
Get Signature
get withoutTranslation():
Transform
Defined in: index.ts:1362
Gets this transform without translation components.
Returns
Transform
A new Transform with translation removed
meanScale
Get Signature
get meanScale():
number
Defined in: index.ts:1381
Gets the mean scale factor of this transform.
Remarks
This is the square root of the determinant of the upper 2x2 matrix
Returns
number
The geometric mean of the x and y scale factors
members
Get Signature
get members():
number
[]
Defined in: index.ts:1389
Converts this transform to an array.
Returns
number
[]
An array of matrix elements [m00, m01, m02, ..., m22]
isIdentity
Get Signature
get isIdentity():
boolean
Defined in: index.ts:1580
Checks if this is the identity transform.
Returns
boolean
True if this transform does nothing
cssMatrix
Get Signature
get cssMatrix():
object
Defined in: index.ts:1615
Gets the matrix values in CSS order.
Returns
object
An object with a, b, c, d, e, f properties
a
a:
number
b
b:
number
c
c:
number
d
d:
number
e
e:
number
f
f:
number
Methods
equals()
equals(
other
):boolean
Defined in: index.ts:1245
Checks if this transform equals another transform.
Parameters
other
Transform
The transform to compare with
Returns
boolean
True if all matrix elements are equal
merge()
merge(
other
):Transform
Defined in: index.ts:1265
Combines this transform with another transform.
Parameters
other
Transform
The transform to apply after this transform
Returns
Transform
A new Transform representing the combined transformation
Remarks
The order matters: this.merge(other) means "apply this, then other"
invert()
invert():
undefined
|Transform
Defined in: index.ts:1303
Inverts this transform.
Returns
undefined
| Transform
The inverse transform, or undefined if not invertible
toString()
toString():
string
Defined in: index.ts:1407
Returns a string representation of this transform.
Returns
string
A string with all matrix values
toCSSMatrixString()
toCSSMatrixString():
string
Defined in: index.ts:1415
Converts to CSS matrix() string for 2D transforms.
Returns
string
A CSS matrix() function string
toCSSMatrix3DString()
toCSSMatrix3DString():
string
Defined in: index.ts:1424
Converts to CSS matrix3d() string for perspective transforms.
Returns
string
A CSS matrix3d() function string
scale()
scale(
scale
):Transform
Defined in: index.ts:1441
Scales from the current transform.
Parameters
scale
The scale factors
Returns
Transform
A new scaled Transform
translate()
translate(
offset
):Transform
Defined in: index.ts:1450
Translates from the current transform.
Parameters
offset
The translation offset
Returns
Transform
A new translated Transform
rotate()
rotate(
angle
):Transform
Defined in: index.ts:1459
Rotates from the current transform.
Parameters
angle
number
The rotation angle in radians
Returns
Transform
A new rotated Transform
scale()
static
scale(scale
):Transform
Defined in: index.ts:1468
Creates a scaling transform.
Parameters
scale
The scale factors for x and y
Returns
Transform
A new scaling Transform
rotate()
static
rotate(angle
):Transform
Defined in: index.ts:1477
Creates a rotation transform.
Parameters
angle
number
The rotation angle in radians
Returns
Transform
A new rotation Transform
translate()
static
translate(translation
):Transform
Defined in: index.ts:1488
Creates a translation transform.
Parameters
translation
The translation vector
Returns
Transform
A new translation Transform
unitToQuad()
static
unitToQuad(quad
):undefined
|Transform
Defined in: index.ts:1498
Creates a perspective transform from unit square to a quadrilateral.
Parameters
quad
Four corner points of the destination quadrilateral
Returns
undefined
| Transform
A perspective Transform, or undefined if not possible
Remarks
The unit square has corners at (0,0), (1,0), (1,1), (0,1)
quadToQuad()
static
quadToQuad(from
,to
):undefined
|Transform
Defined in: index.ts:1534
Creates a perspective transform between two quadrilaterals.
Parameters
from
Source quadrilateral (four corners)
to
Destination quadrilateral (four corners)
Returns
undefined
| Transform
A perspective Transform, or undefined if not possible
rectToRect()
static
rectToRect(from
,to
):Transform
Defined in: index.ts:1556
Creates a transform that maps one rectangle to another.
Parameters
from
Source rectangle
to
Destination rectangle
Returns
Transform
A Transform that maps from to to
merge()
static
merge(...transforms
):Transform
Defined in: index.ts:1567
Combines multiple transforms in sequence.
Parameters
transforms
...Transform
[]
Transforms to merge
Returns
Transform
A single Transform representing all transformations
transformPoint()
transformPoint(
point
):Vec2
Defined in: index.ts:1593
Transforms a point by this transform.
Parameters
point
The point to transform
Returns
The transformed point
fromMatrix()
static
fromMatrix(a
,b
,c
,d
,e
,f
):Transform
Defined in: index.ts:1607
Creates a transform using individual matrix values.
Parameters
a
number
Scale x / cosine of rotation
b
number
Shear y / sine of rotation
c
number
Shear x / negative sine of rotation
d
number
Scale y / cosine of rotation
e
number
Translation x
f
number
Translation y
Returns
Transform
A new Transform