Skip to main content

Viewport Transform

The viewport transform determines exactly how the canvas is situated by holding a transformation matrix.

Getting the Transform​

To get the 6-value array representing the current transformation matrix of the viewport:

const result = await kittl.state.viewport.getTransform();

if (result.isOk) {
    // Returns a matrix array like [a, b, c, d, tx, ty]
    console.log('Current viewport transform:', result.result);
}

Setting the Transform​

For advanced manipulation, you can directly override the transform matrix by passing an array of six numbers. Note that modifying the transform overrides both the position and zoom properties.

// Replace the entire matrix
const setResult = await kittl.state.viewport.setTransform([1, 0, 0, 1, 100, 100]);

if (setResult.isOk) {
    console.log('Viewport transform applied successfully.');
}