@omnimedia/kimura

Tool for interactively editing the transformation matrices of pixi objects.

Installation :package:

npm install @omnimedia/kimura

Usage :page_facing_up:

import {Application, Graphics} from "pixi.js"

import {Kimura} from "../kimura.js"

const app = new Application()

await app.init({
    autoDensity: true,
    backgroundColor: 0xabcdef,
    width: 1024,
    height: 1024,
    antialias: true,
    view: document.createElement('canvas') ,
})
document.body.appendChild(app.canvas)

const a = app.stage.addChild(new Graphics())
a.circle(0, 0, 100)
    .fill(0xfedbac)
a.pivot.set(50, 100)
a.scale.set(1)
a.position.set(300, 300)

const b = app.stage.addChild(new Graphics())
b.circle(0, 0, 100)
    .fill(0xfedbac)
b.pivot.set(50, 100)
b.scale.set(1)
b.position.set(600, 300)

app.stage.addChild(new Kimura({
    group: [a, b]
}))

State ownership

Kimura mutates the transforms of objects in kimura.group. Read the resulting transform from the Pixi object:

const transform = object.localTransform

Read and write crop through kimura.crop. Kimura may temporarily replace object.mask while editing; existing masks are restored when the object leaves the group, but they are not interpreted as crop state.

kimura.group = [object]
kimura.crop = [top, right, bottom, left]

Corner scaling is centered and preserves the aspect ratio by default. Both can be configured at construction or changed at runtime:

const kimura = new Kimura({
    stage,
    centeredScaling: false,
    preserveAspectRatio: false,
})
kimura.centeredScaling = true
kimura.preserveAspectRatio = true