File

src/toolbox/image/Image.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 draw
draw(image: Image, dx: number, dy: number)
Parameters :
Name Type Optional
image Image No
dx number No
dy number No
Public draw
draw(image: Image, dx: number, dy: number, dw: number, dh: number)
Parameters :
Name Type Optional
image Image No
dx number No
dy number No
dw number No
dh number No
Public draw
draw(image: Image, dx: number, dy: number, dw: number, dh: number, circle)
Parameters :
Name Type Optional
image Image No
dx number No
dy number No
dw number No
dh number No
circle No
Public draw
draw(image: Image, dx: number, dy: number, dw?: number, dh?: number, circle?: boolean)
Parameters :
Name Type Optional
image Image No
dx number No
dy number No
dw number Yes
dh number Yes
circle boolean Yes
Public drawRounded
drawRounded(image: Image, dx: number, dy: number, dw: number, dh: number, radius: number)
Parameters :
Name Type Optional
image Image No
dx number No
dy number No
dw number No
dh number No
radius number No
Returns : this
Public load
load(source: IllustratorImageSource)
Parameters :
Name Type Optional
source IllustratorImageSource No
Returns : any
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 { Image } from "@napi-rs/canvas";
import { ImageLoader, IllustratorImageSource } from "../../image/ImageLoader";
import { ToolBox } from "../base/ToolBox";

export class ImageTool extends ToolBox {
    public load(source: IllustratorImageSource) {
        return ImageLoader.loadImage(source);
    }

    public draw(image: Image, dx: number, dy: number): this;
    public draw(image: Image, dx: number, dy: number, dw: number, dh: number): this;
    public draw(image: Image, dx: number, dy: number, dw: number, dh: number, circle: true): this;
    public draw(image: Image, dx: number, dy: number, dw?: number, dh?: number, circle?: boolean): this {
        // eslint-disable-next-line prefer-rest-params
        const args = arguments;
        this.history.push((ctx) => {
            ctx.save();

            if (args.length === 4 && typeof dw === "boolean") {
                this.drawRounded(image, dx, dy, image.width, image.height, image.width / 2);
                return ctx.restore();
            }

            if ([dw, dh].every((x) => typeof x === "number") && circle) {
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                this.drawRounded(image, dx, dy, dw!, dh!, dw! / 2);
                return ctx.restore();
            }

            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            if ([dw, dh].every((x) => typeof x === "number")) return ctx.drawImage(image, dx, dy, dw!, dh!);

            return ctx.drawImage(image, dx, dy);
        });

        return this;
    }

    public drawRounded(image: Image, dx: number, dy: number, dw: number, dh: number, radius: number) {
        this.history.push((ctx) => {
            if (dw < 2 * radius) radius = dw / 2;
            if (dh < 2 * radius) radius = dh / 2;

            ctx.beginPath();
            ctx.moveTo(dx + radius, dy);
            ctx.arcTo(dx + dw, dy, dx + dw, dy + dh, radius);
            ctx.arcTo(dx + dw, dy + dh, dx, dy + dh, radius);
            ctx.arcTo(dx, dy + dh, dx, dy, radius);
            ctx.arcTo(dx, dy, dx + dw, dy, radius);
            ctx.closePath();
            ctx.clip();
            ctx.drawImage(image, dx, dy, dw, dh);
            return ctx.restore();
        });

        return this;
    }
}

results matching ""

    No results matching ""