1.0.2 • Published 3 years ago
feature
usage
npm i pixi-transformer
import Transformer from "pixi-transformer/lib/transformer";
import Component from "pixi-transformer/lib/component";
import * as PIXI from "pixi.js-legacy";
(window as any).PIXI = PIXI;
let app: PIXI.Application;
function App(parent: HTMLElement, WORLD_WIDTH: number, WORLD_HEIGHT: number) {
app = new PIXI.Application({backgroundColor: 0x000000, antialias:true,forceCanvas: false, resolution: 2});
app.renderer.autoDensity = true;
app.renderer.resize(WORLD_WIDTH, WORLD_HEIGHT)
parent.replaceChild(app.view, parent.lastElementChild); // Hack for parcel HMR
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
// object
const params = {
url: "assets/mask.png",
width: 200,
height: 200,
x: 100,
y: 500,
angle: 0,
zIndex: 20,
}
const params3 = {
url: "assets/mask.png",
width: 200,
height: 200,
x: 100,
y: 200,
angle: 0,
zIndex: 20,
}
const comp2 = new Transformer(new Component(params3), app).object;
const comp1 = new Transformer(new Component(params), app).object;
Transformer.bindBg(app);
Transformer.bindShotcuts(app);
app.stage.addChild(comp2)
app.stage.addChild(comp1)
}
App(document.body, window.innerWidth, window.innerHeight);
Component
prop | type | desc |
---|
x | number | |
y | number | |
angle | number | |
zIndex | number | |
width | number | |
height | number | |
needLockProportion | boolean | 等比例缩放 |
url | string | 图片路径 |
uuid | string | |
pid | string | |
Group
prop | type | desc |
---|
needLockProportion | boolean | 等比例缩放 |
components | array | |