File

src/toolbox/transform/Transform.ts

Extends

ToolBox

Index

Properties
Methods

Properties

Public autoClear
Default value : false
Inherited from ToolBox
Defined in ToolBox:9
Public history
Type : HistoryCallback[]
Default value : []
Inherited from ToolBox
Defined in ToolBox:8
Public Readonly layer
Type : Layer
Inherited from ToolBox
Defined in ToolBox:9

Methods

Public getTransform
getTransform()
Returns : TransformOptions
Public resetTransform
resetTransform()
Returns : this
Public rotate
rotate(angle: number)
Parameters :
Name Type Optional
angle number No
Returns : this
Public scale
scale(x: number, y: number)
Parameters :
Name Type Optional
x number No
y number No
Returns : this
Public setTransform
setTransform(options: TransformOptions)
Parameters :
Name Type Optional
options TransformOptions No
Returns : this
Public transform
transform(options: TransformOptions)
Parameters :
Name Type Optional
options TransformOptions No
Returns : this
Public translate
translate(x: number, y: number)
Parameters :
Name Type Optional
x number No
y number No
Returns : this
Public render
render()
Inherited from ToolBox
Defined in ToolBox:27
Returns : void
Public restore
restore()
Inherited from ToolBox
Defined in ToolBox:19
Returns : this
Public save
save()
Inherited from ToolBox
Defined in ToolBox:11
Returns : this
import { ToolBox } from "../base/ToolBox";

export interface TransformOptions {
    horizontalScaling?: number;
    verticalSkewing: number;
    horizontalSkewing: number;
    verticalScaling?: number;
    horizontalTranslation: number;
    verticalTranslation: number;
}

export class TransformTool extends ToolBox {
    public translate(x: number, y: number) {
        this.history.push((ctx) => {
            ctx.translate(x, y);
        });

        return this;
    }

    public transform(options: TransformOptions) {
        this.history.push((ctx) => {
            options.horizontalScaling ??= 1;
            options.verticalScaling ??= 1;

            ctx.transform(
                options.horizontalScaling,
                options.verticalSkewing,
                options.horizontalSkewing,
                options.verticalScaling,
                options.horizontalTranslation,
                options.verticalTranslation
            );
        });

        return this;
    }

    public setTransform(options: TransformOptions) {
        this.history.push((ctx) => {
            options.horizontalScaling ??= 1;
            options.verticalScaling ??= 1;

            ctx.setTransform(
                options.horizontalScaling,
                options.verticalSkewing,
                options.horizontalSkewing,
                options.verticalScaling,
                options.horizontalTranslation,
                options.verticalTranslation
            );
        });

        return this;
    }

    public resetTransform() {
        this.history.push((ctx) => {
            ctx.resetTransform();
        });

        return this;
    }

    public getTransform() {
        const transformation = this.layer.utils.getLayerTransformation();

        return {
            horizontalScaling: transformation.a,
            verticalSkewing: transformation.b,
            horizontalSkewing: transformation.c,
            verticalScaling: transformation.d,
            horizontalTranslation: transformation.e,
            verticalTranslation: transformation.f
        } as TransformOptions;
    }

    public rotate(angle: number) {
        this.history.push((ctx) => {
            ctx.rotate(angle);
        });

        return this;
    }

    public scale(x: number, y: number) {
        this.history.push((ctx) => {
            ctx.scale(x, y);
        });

        return this;
    }
}

results matching ""

    No results matching ""