3.0.4 • Published 7 months ago
@pixi-essentials/transformer v3.0.4
@pixi-essentials/transformer
This package contains Transformer
, which provides an interactive interface for scaling and rotating groups of display-objects.
Installation :package:
npm install @pixi-essentials/transformer
Pens :pen:
- Standard usage: https://codepen.io/sukantpal/pen/dyMMmZm
- Usage with @pixi-essentials/react-bindings: https://codepen.io/sukantpal/pen/ZEWWoWX
Transform options :page_with_curl:
Property | Default | Description |
---|---|---|
boxRotationEnabled | false | Rotation by dragging near outside the four corners of the bounding box |
boxScalingEnabled | false | Scaling by dragging the edges of the bounding-box (also called the wireframe) |
centeredScaling | false | Whether scaling object should keep its center invariant (instead of the side being dragged) |
rotateEnabled | true | Enables the rotator handle above the top-edge of the wireframe |
scaleEnabled | true | Enables the 8 scaling handles (topLeft, topCenter, topRight, middleLeft, middleRight, bottomLeft, bottomCenter, bottomRight) |
skewEnabled | false | Enables the 2 skewing handles |
translateEnabled | true | Enables translation by dragging the wireframe. The transformer will capture all mouse events in the group's bounds |
Usage :page_facing_up:
import * as PIXI from 'pixi.js';
import { Transformer } from '@pixi-essentials/transformer';
const app = new PIXI.Application({
resolution: window.devicePixelRatio,
autoDensity: true,
backgroundColor: 0xabcdef,
width: 1024,
height: 1024,
antialias: true
});
document.body.appendChild(app.view);
const circle = app.stage.addChild(new PIXI.Graphics());
circle.beginFill(0xfedbac)
.drawCircle(0, 0, 100)
.endFill();
circle.pivot.set(50, 100);
circle.scale.set(1);
circle.position.set(300, 300);
const star = app.stage.addChild(new PIXI.Graphics());
star.beginFill(0xfedbac)
.drawStar(0, 0, 8, 100)
.endFill();
star.position.set(800, 500);
star.pivot.set(50, 100);
app.stage.addChild(new Transformer({
group: [circle, star],
}));
External Resources
- (Initial release) Vector rendering of SVG content with PixiJS
3.0.4
7 months ago
3.0.2
10 months ago
3.0.1
1 year ago
3.0.0
1 year ago
2.5.6
2 years ago
2.5.5
3 years ago
2.5.4
3 years ago
2.5.3
3 years ago
2.5.2
3 years ago
2.5.1
3 years ago
2.4.0
3 years ago
2.3.2
3 years ago
2.3.1
3 years ago
2.3.3
3 years ago
2.3.0
3 years ago
2.2.4
3 years ago
2.2.3
3 years ago
2.2.2
3 years ago
2.2.1
4 years ago
2.2.0
4 years ago
2.1.4
4 years ago
2.1.3
4 years ago
2.1.1
4 years ago
2.1.0
4 years ago
2.0.13
4 years ago
2.0.12
4 years ago
2.0.11
4 years ago
2.0.7
4 years ago
2.0.6
4 years ago
2.0.9
4 years ago
2.0.10
4 years ago
2.0.8
4 years ago
2.0.5
4 years ago
2.0.4
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.0
4 years ago