Skip to content

paintvec


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 ​

js
// 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 ​

Vec2

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 ​

Vec2

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 ​

Vec2

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 ​

Vec2

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 ​

[Vec2, Vec2, Vec2, Vec2]

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 ​

[Vec2, Vec2, Vec2, Vec2]

Source quadrilateral (four corners)

to ​

[Vec2, Vec2, Vec2, Vec2]

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 ​

Rect

Source rectangle

to ​

Rect

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 ​

Vec2

The point to transform

Returns ​

Vec2

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

Released under the MIT License.