Skip to content

transform

The transformation matrix of an element. It is the foundation of element layout and coordinate transformation. It can be used with the Matrix / Point classes to manipulate transforms.

inner-outer-view

Read-only Properties

worldTransform: IMatrixWithScaleData

The transformation matrix relative to the world coordinate system, including scaleX and scaleY.

localTransform: IMatrixData

The transformation matrix relative to the parent element.

Composition Source

The matrix is composed in the following order: rotate → skew → scale → translate.

x: number

Position on the x-axis.

Note: offsetX and around affect the actual position.

y: number

Position on the y-axis.

Note: offsetY and around affect the actual position.

scaleX: number

Scale factor on the x-axis. A negative value represents mirroring along the x-axis.

scaleY: number

Scale factor on the y-axis. A negative value represents mirroring along the y-axis.

rotation: number

Rotation angle, ranging from -180 to 180.

skewX: number

Skew angle on the x-axis, ranging from -90 to 90.

skewY: number

Skew angle on the y-axis, ranging from -90 to 90.

Key Methods

setTransform ( matrix: IMatrixData, resize?: boolean, transition?: ITranstion )

Set the local transformation matrix. It will be automatically decomposed into layout properties x, y, scaleX, scaleY, rotation, skewX, skewY.

The resize parameter converts scaling operations into width/height changes. The transition parameter enables animation transitions.

getTransform ( relative?: ILocationType | UI = 'local' ): IMatrixData

Get the transformation matrix. Supports retrieving the matrix relative to any parent element via relative.

transform ( matrix: IMatrixData, resize?: boolean, transition?: ITranstion )

Apply a transformation operation, which is automatically decomposed into layout properties incremental operation.

The resize parameter converts scaling into width/height changes. The transition parameter enables animation transitions.

transformWorld ( worldTransform: IMatrixData, resize?: boolean, transition?: ITranstion )

Same as transform(), but operates in the world coordinate system.

The resize parameter converts scaling into width/height changes. The transition parameter enables animation transitions.

Belongs to

UI Element

Released under the MIT License.