@quinninc/pixi-transformer NPM

Free Transform Tool for PIXI.js

Works with pixi.js v8 and above.

preview

✨ 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']