Transformer

class Transformer extends PIXI.Container

Transformer provides an interactive interface for editing the transforms in a group. It supports translating, scaling, rotating, and skewing display-objects both through interaction and code.

A transformer operates in world-space, and it is best to not position, scale, rotate, or skew one. If you do so, the wireframe itself will not distort (i.e. will adapt against your transforms). However, the wireframe may become thinner/thicker and the handles will scale & rotate. For example, setting transformer.scale.set(2) will make the handles twice as big, but will not scale the wireframe (assuming the display-object group itself has not been scaled up).

To enable scaling via dragging the edges of the wireframe, set boxScalingEnabled to true.

NOTE: The transformer needs to capture all interaction events that would otherwise go to the display-objects in the group. Hence, it must be placed after them in the scene graph.

Constructor

new Transformer(options: Partial<ITransformerOptions>) → {}

Handle	Type	Notes
rotator	Rotate
boxRotateTopLeft	Rotate	Invisible
boxRotateTopRight	Rotate	Invisible
boxRotateBottomLeft	Rotate	Invisible
boxRotateBottomRight	Rotate	Invisible
topLeft	Scale
topCenter	Scale
topRight	Scale
middleLeft	Scale
middleCenter	Scale	This cannot be enabled!
middleRight	Scale
bottomLeft	Scale
bottomCenter	Scale
bottomRight	Scale
skewHorizontal	Skew	Applies vertical shear. Handle segment is horizontal at skew.y = 0!
skewVertical	Skew	Applied horizontal shear. Handle segment is vertical at skew.x = 0!

Parameters:
Name	Type	Description
options	Partial<ITransformerOptions>

Summary

Properties from Transformer

"all" \| "groupOnly" \| "none"	boundingBoxes = "all" Specify which bounding boxes should be drawn in the wireframe.
boolean	boxRotationEnabled Set this to enable rotation at the four corners
number	boxRotationTolerance The thickness of the box rotation area
boolean	boxScalingEnabled Set this to enable scaling by dragging at the edges of the bounding box
number	boxScalingTolerance The padding around the bounding-box to capture dragging on the edges.
boolean	centeredScaling This will prevent the wireframe's center from shifting on scaling.
	commitGroup
ITransformerCursors	cursors Cursors to use in the transformer
Array<Handle>	enabledHandles The list of enabled handles, if applied manually.
PIXI.DisplayObject[]	group The group of display-objects under transformation.
Partial<ITransformerHandleStyle>	handleStyle The currently applied handle style. If you have edited the transformer handles directly, this may be inaccurate.
boolean	lazyDirty Set this when you want the transformer to redraw when using lazyMode.
boolean	lazyMode = false Flags whether the transformer should not redraw each frame (good for performance)
boolean	lockAspectRatio Lock aspect ratio when using one of the corner handles.
PIXI.Matrix	projectionTransform
boolean	rotateEnabled This will enable the rotate handles.
	rotateGroup This will rotate the group such that the handle will come to `pointerPosition`.
number[]	rotationSnaps The angles at which rotation should snap.
number	rotationSnapTolerance The maximum angular difference for snapping rotation.
boolean	scaleEnabled This will enable the scale handles.
	scaleGroup This will scale the group such that the scale handle will come under `pointerPosition`.
boolean	skewEnabled This will enable the skew handles.
	skewGroup This will skew the group such that the skew handle would move to the `pointerPosition`.
number	skewRadius The distance of skewing handles from the group's center.
number[]	skewSnaps The angles at which both the horizontal & vertical skew handles should snap.
number	skewSnapTolerance The maximum angular difference for snapping skew handles.
PIXI.Container \| null	stage The root object in your scene in which objects can move.
"translate" \| "scale" \| "rotate" \| "skew" \| "none"	transformType
boolean	transientGroupTilt = true This will reset the rotation angle after the user finishes rotating a group with more than one display-object.
boolean	translateEnabled = true This will enable translation on dragging the transformer. By default, it is turned on.
	translateGroup This will translate the group by `delta` in their world-space.
Partial<ITransformerStyle>	wireframeStyle The currently applied wireframe style.
Handle[]	protected _enabledHandles
Partial<ITransformerHandleStyle>	protected _handleStyle The style applied on transformer handles
boolean	protected _rotateEnabled
boolean	protected _scaleEnabled
boolean	protected _skewEnabled
number	protected _skewX The horizontal skew value. Rotating the group by 𝜽 will also change this value by 𝜽.
number	protected _skewY The vertical skew value. Rotating the group by 𝜽 will also change this value by 𝜽.
Handle	protected _transformHandle The currently grabbed handle. This can be used to get the type of transformation.
"translate" \| "scale" \| "rotate" \| "skew" \| "none"	protected _transformType The current type of transform being applied by the user.
Partial<ITransformerStyle>	protected _wireframeStyle The wireframe style applied on the transformer
OrientedBounds	protected groupBounds The last calculated bounds of the whole group being transformed
{ [H in undefined Handle] }: TransformerHandle	protected handles Object mapping handle-names to the handle display-objects.
TransformerWireframe	protected wireframe Draws the bounding boxes

Methods from Transformer

OrientedBounds	static calculateGroupOrientedBounds(group: PIXI.DisplayObject[], rotation: number, bounds: OrientedBounds, skipUpdate: boolean) Calculates the oriented bounding box of a group of display-objects at a specific angle.
OrientedBounds	static calculateOrientedBounds(displayObject: PIXI.DisplayObject, bounds: OrientedBounds)
PIXI.Point[]	static calculateTransformedCorners(displayObject: PIXI.DisplayObject, transform: PIXI.Matrix, corners: PIXI.Point[], index: number)
OrientedBounds	getGroupBounds(forceUpdate: boolean)
PIXI.Point	projectToLocal(input: PIXI.Point, output: PIXI.Point)
void	render(renderer: PIXI.Renderer) This will update the transformer's geometry and render it to the canvas.
void	renderCanvas(renderer: PIXI.CanvasRenderer)
void	protected draw() Recalculates the transformer's geometry. This is called on each render.
void	protected drawHandles(groupBounds: OrientedBounds) Draw the handles and any remaining parts of the wireframe.
void	protected onPointerDown(e: PIXI.InteractionEvent) Called on the `pointerdown` event. You must call the super implementation.
void	protected onPointerMove(e: PIXI.InteractionEvent) Called on the `pointermove` event. You must call the super implementation.
void	protected onPointerUp(e: PIXI.InteractionEvent) Called on the `pointerup` and `pointerupoutside` events. You must call the super implementation.

Public Properties

boundingBoxes Transformer.ts:334

boundingBoxes: "all" | "groupOnly" | "none" = "all"

Specify which bounding boxes should be drawn in the wireframe.

"groupOnly" won't show individual bounding boxes. "none" will not render anything visible.

boxRotationEnabled Transformer.ts:343

boxRotationEnabled: boolean

Set this to enable rotation at the four corners

boxRotationTolerance Transformer.ts:346

boxRotationTolerance: number

The thickness of the box rotation area

boxScalingEnabled Transformer.ts:349

boxScalingEnabled: boolean

Set this to enable scaling by dragging at the edges of the bounding box

boxScalingTolerance Transformer.ts:352

boxScalingTolerance: number

The padding around the bounding-box to capture dragging on the edges.

centeredScaling Transformer.ts:355

centeredScaling: boolean

This will prevent the wireframe's center from shifting on scaling.

commitGroup Transformer.ts:1074

commitGroup

This is called after the user finishes dragging a handle. If this.transientGroupTilt is enabled, it will reset the rotation of this group (if more than one display-object is grouped).

cursors Transformer.ts:358

cursors: ITransformerCursors

Cursors to use in the transformer

enabledHandles Transformer.ts:666

enabledHandles: Array<Handle>

The list of enabled handles, if applied manually.

group Transformer.ts:331

group: PIXI.DisplayObject[]

The group of display-objects under transformation.

handleStyle Transformer.ts:701

handleStyle: Partial<ITransformerHandleStyle>

The currently applied handle style. If you have edited the transformer handles directly, this may be inaccurate.

lazyDirty Transformer.ts:368

lazyDirty: boolean

Set this when you want the transformer to redraw when using lazyMode.

lazyMode Transformer.ts:361

lazyMode: boolean = false

Flags whether the transformer should not redraw each frame (good for performance)

lockAspectRatio Transformer.ts:371

lockAspectRatio: boolean

Lock aspect ratio when using one of the corner handles.

projectionTransform Transformer.ts:374

projectionTransform: PIXI.Matrix

This is used when the display-object group are rendered through a projection transformation (i.e. are disconnected from the transformer in the scene graph). The transformer project itself into their frame-of-reference using this transform.

Specifically, the projection-transform converts points from the group's world space to the transformer's world space. If you are not applying a projection on the transformer itself, this means it is the group's world-to-screen transformation.

rotateEnabled Transformer.ts:718

rotateEnabled: boolean

This will enable the rotate handles.

rotateGroup Transformer.ts:842

rotateGroup

This will rotate the group such that the handle will come to pointerPosition.

Parameters:
Name	Type	Description
handle		the rotator handle was dragged
pointerPosition		the new pointer position, in screen space

rotationSnaps Transformer.ts:385

rotationSnaps: number[]

The angles at which rotation should snap.

rotationSnapTolerance Transformer.ts:388

rotationSnapTolerance: number

The maximum angular difference for snapping rotation.

scaleEnabled Transformer.ts:738

scaleEnabled: boolean

This will enable the scale handles.

scaleGroup Transformer.ts:890

scaleGroup

This will scale the group such that the scale handle will come under pointerPosition.

Parameters:
Name	Type	Description
handle		the scaling handle that was dragged
pointerPosition		the new pointer position, in screen space

skewEnabled Transformer.ts:766

skewEnabled: boolean

This will enable the skew handles.

skewGroup Transformer.ts:1013

skewGroup

This will skew the group such that the skew handle would move to the pointerPosition.

Parameters:
Name	Type	Description
handle
pointerPosition		pointer position, in screen space

skewRadius Transformer.ts:391

skewRadius: number

The distance of skewing handles from the group's center.

skewSnaps Transformer.ts:394

skewSnaps: number[]

The angles at which both the horizontal & vertical skew handles should snap.

skewSnapTolerance Transformer.ts:397

skewSnapTolerance: number

The maximum angular difference for snapping skew handles.

stage Transformer.ts:402

stage: PIXI.Container | null

The root object in your scene in which objects can move.

Transformer will subscribe to this object for pointermove events, if provided. This should be used when:

moveWhenInside is enabled on the interaction plugin.
moveOnAll is not turned off when using the new EventSystem.

Otherwise, the transformer will receive not pointermove events when the user drags fast enough that the cursor leaves the transformer's bounds.

The stage must be fully interactive in the area you want objects to move. Generally, this is the whole canvas:

stage.interactive = true;
stage.hitArea = renderer.screen;// or pass custom rect for the canvas dimensions

transformType Transformer.ts:787

transformType: "translate" | "scale" | "rotate" | "skew" | "none"

This is the type of transformation being applied by the user on the group. It can be inaccurate if you call one of translateGroup, scaleGroup, rotateGroup, skewGroup without calling commitGroup afterwards.

transientGroupTilt Transformer.ts:431

transientGroupTilt: boolean = true

This will reset the rotation angle after the user finishes rotating a group with more than one display-object.

translateEnabled Transformer.ts:424

translateEnabled: boolean = true

This will enable translation on dragging the transformer. By default, it is turned on.

translateGroup Transformer.ts:822

translateGroup

This will translate the group by delta in their world-space.

NOTE: There is no handle that provides translation. The user drags the transformer directly.

Parameters:
Name	Type	Description
delta

wireframeStyle Transformer.ts:798

wireframeStyle: Partial<ITransformerStyle>

The currently applied wireframe style.

Protected Properties

_enabledHandles Transformer.ts:455

protected _enabledHandles: Handle[]

See: Transformer#enabledHandles

_handleStyle Transformer.ts:479

protected _handleStyle: Partial<ITransformerHandleStyle>

The style applied on transformer handles

_rotateEnabled Transformer.ts:458

protected _rotateEnabled: boolean

See: Transformer#rotateEnabled

_scaleEnabled Transformer.ts:461

protected _scaleEnabled: boolean

See: Transformer#scaleEnabled

_skewEnabled Transformer.ts:464

protected _skewEnabled: boolean

See: Transformer#skewEnabled

_skewX Transformer.ts:467

protected _skewX: number

The horizontal skew value. Rotating the group by 𝜽 will also change this value by 𝜽.

_skewY Transformer.ts:470

protected _skewY: number

The vertical skew value. Rotating the group by 𝜽 will also change this value by 𝜽.

_transformHandle Transformer.ts:473

protected _transformHandle: Handle

The currently grabbed handle. This can be used to get the type of transformation.

_transformType Transformer.ts:476

protected _transformType: "translate" | "scale" | "rotate" | "skew" | "none"

The current type of transform being applied by the user.

_wireframeStyle Transformer.ts:482

protected _wireframeStyle: Partial<ITransformerStyle>

The wireframe style applied on the transformer

groupBounds Transformer.ts:438

protected groupBounds: OrientedBounds

The last calculated bounds of the whole group being transformed

handles Transformer.ts:441

protected handles: { [H in undefined Handle] }: TransformerHandle

Object mapping handle-names to the handle display-objects.

wireframe Transformer.ts:452

protected wireframe: TransformerWireframe

Draws the bounding boxes

Public Methods

calculateGroupOrientedBounds Transformer.ts:1641

static calculateGroupOrientedBounds(group: PIXI.DisplayObject[], rotation: number, bounds: OrientedBounds, skipUpdate: boolean) → {OrientedBounds}

Calculates the oriented bounding box of a group of display-objects at a specific angle.

Parameters:
Name	Type	Attributes	Default
group	PIXI.DisplayObject[]
rotation	number
bounds	OrientedBounds	<optional>
skipUpdate	boolean		false

Returns:
Type	Description
OrientedBounds

calculateOrientedBounds Transformer.ts:1592

static calculateOrientedBounds(displayObject: PIXI.DisplayObject, bounds: OrientedBounds) → {OrientedBounds}

Calculates the oriented bounding box of the display-object. This would not bending with any skew applied on the display-object, i.e. it is guaranteed to be rectangular.

Parameters:
Name	Type	Attributes	Description
displayObject	PIXI.DisplayObject
bounds	OrientedBounds	<optional>	the bounds instance to set

Returns:
Type	Description
OrientedBounds

calculateTransformedCorners Transformer.ts:1556

static calculateTransformedCorners(displayObject: PIXI.DisplayObject, transform: PIXI.Matrix, corners: PIXI.Point[], index: number) → {PIXI.Point[]}

Calculates the positions of the four corners of the display-object. The quadrilateral formed by these points will be the tightest fit around it.

Parameters:
Name	Type	Attributes	Default	Description
displayObject	PIXI.DisplayObject			The display object whose corners are to be calculated
transform	PIXI.Matrix			The transform applied on the display-object. By default, this is its world-transform
corners	PIXI.Point[]	<optional>		Optional array of four points to put the result into
index	number		0	Optional index into "corners"

Returns:
Type	Description
PIXI.Point[]	an array of four points holding the positions of the corners

getGroupBounds Transformer.ts:808

getGroupBounds(forceUpdate: boolean) → {OrientedBounds}

Parameters:
Name	Type	Default	Description
forceUpdate	boolean	false	forces a recalculation of the group bounds

Returns:
Type	Description
OrientedBounds	the oriented bounding box of the wireframe

projectToLocal Transformer.ts:1535

projectToLocal(input: PIXI.Point, output: PIXI.Point) → {PIXI.Point}

Projects input from the group's world space into the transformer's local space, and puts the result into output.

Parameters:
Name	Type	Attributes	Description
input	PIXI.Point
output	PIXI.Point	<optional>

Returns:
Type	Description
PIXI.Point	the output

render Transformer.ts:1091

render(renderer: PIXI.Renderer) → {void}

This will update the transformer's geometry and render it to the canvas.

Parameters:
Name	Type	Description
renderer	PIXI.Renderer

Returns:
Type	Description
void

renderCanvas Container.ts:17

renderCanvas(renderer: PIXI.CanvasRenderer) → {void}

Renders the object using the Canvas renderer

Parameters:
Name	Type	Description
renderer	PIXI.CanvasRenderer	The renderer

Returns:
Type	Description
void

Protected Methods

draw Transformer.ts:1107

protected draw() → {void}

Recalculates the transformer's geometry. This is called on each render.

Returns:
Type	Description
void

drawHandles Transformer.ts:1164

protected drawHandles(groupBounds: OrientedBounds) → {void}

Draw the handles and any remaining parts of the wireframe.

Parameters:
Name	Type	Description
groupBounds	OrientedBounds

Returns:
Type	Description
void

onPointerDown Transformer.ts:1288

protected onPointerDown(e: PIXI.InteractionEvent) → {void}

Called on the pointerdown event. You must call the super implementation.

Parameters:
Name	Type	Description
e	PIXI.InteractionEvent

Returns:
Type	Description
void

onPointerMove Transformer.ts:1306

protected onPointerMove(e: PIXI.InteractionEvent) → {void}

Called on the pointermove event. You must call the super implementation.

Parameters:
Name	Type	Description
e	PIXI.InteractionEvent

Returns:
Type	Description
void

onPointerUp Transformer.ts:1385

protected onPointerUp(e: PIXI.InteractionEvent) → {void}

Called on the pointerup and pointerupoutside events. You must call the super implementation.

Parameters:
Name	Type	Description
e	PIXI.InteractionEvent

Returns:
Type	Description
void