feature

• compose
• decompose
• shotcuts

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 | |