Free Transform Tool for PIXI.js

Works with pixi.js v8 and above.

✨ Features

• Translate - Drag to move anywhere
• Scale - Scale on X, Y or both axis'
• Rotate - drag to rotate
• Anchor point - update anchor point of transforms (AltLeft + Click or Drag)
• Snapping - snap rotation at 45degrees, snap anchor point to edges and corners (hold ShiftLeft).
• Theming - custom border color, control size and color, and anchor point graphic

Note - all transformations are applied wrt the pivot point, update pivot point to achieve the desired result.

Installation

npm install @quinninc/pixi-transformer

Usage

const root = new Container();
app.stage.addChild(root);

// create tool and add to stage
const selectTool = new FreeTransformTool();
selectTool.label = "transform-tool";
root.addChild(selectTool);

const obj = new Sprite({
  texture: Texture.from("lenna"),
  label: "lenna",
  eventMode: "static",
});

root.addChild(obj);

obj.on("pointertap", (ev) => {
  console.log("select - ", ev.currentTarget.label);
  selectTool.select(ev.currentTarget);
});

API

FreeTransformTool (class)

Constructor Parameter Object:

• lineColor - border line color. default - 0x66cfff
• handleColor - (number) - handles' fill color. default - 0xffffff
• controlsSize - (number) - handles' size in pixels. default - 10
• debug - (boolean) - show scaling distance debug lines. default - false
• generateAnchorMark - a function to generate your custom anchor mark. default - undefined (uses default anchor mark)
• pivotKeys - (string[]) - keys to hold to change pivot point. default - ['AltLeft'] - List of KeyCodes
• snapKeys - (string[]) - keys to hold to snap to grid. default - ['ShiftLeft']

returns: PIXI.Container (the select tool)