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.