ue-too/board-camera/utils/matrix.d.ts

pan, zoom, and rotate your html canvas

/**
 * @description The transform matrix for the camera.
 * It's in the format like this:
 * ```
 * | a    c    e |
 * | b    d    f |
 * | 0    0    1 |
 * ```
 *
 * @category Camera
 */
export type TransformationMatrix = {
    a: number;
    b: number;
    c: number;
    d: number;
    e: number;
    f: number;
};
/**
 * Decomposes a camera transformation matrix back to camera parameters
 *
 * Transformation order:
 * 1. Scale by device pixel ratio
 * 2. Translate to canvas center
 * 3. Rotate by -camera.rotation
 * 4. Scale by zoom level
 * 5. Translate by -camera.position
 *
 * Final matrix: M = S1 * T1 * R * S2 * T2
 */
export declare function decomposeCameraMatrix(transformMatrix: TransformationMatrix, devicePixelRatio: number, canvasWidth: number, canvasHeight: number): {
    position: {
        x: number;
        y: number;
    };
    zoom: number;
    rotation: number;
};
export declare function createCameraMatrix(cameraPos: {
    x: number;
    y: number;
}, zoom: number, rotation: number, devicePixelRatio: number, canvasWidth: number, canvasHeight: number): {
    a: number;
    b: number;
    c: number;
    d: number;
    e: number;
    f: number;
};
export declare function multiplyMatrix(m1: TransformationMatrix, m2: TransformationMatrix): {
    a: number;
    b: number;
    c: number;
    d: number;
    e: number;
    f: number;
};