@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
165 lines (164 loc) • 6.8 kB
TypeScript
import { Canvas, DOMMatrix2DInit, FillType, Path2D, PathOp, SKRSContext2D, StrokeOptions, SvgCanvas } from "@napi-rs/canvas";
import { AnyFilter, AnyGlobalCompositeOperation, ColorType, LayerType } from "../../types";
import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
import { LayersManager } from "../managers/LayersManager";
export interface IPath2DLayer extends IBaseLayer {
type: LayerType.Path;
props: IPath2DLayerProps;
}
export interface IPath2DLayerProps extends IBaseLayerProps {
path2D: Path2D;
/**
* The stroke properties of the Path2D.
*/
stroke: {
/**
* The width of the stroke.
*/
width: number;
/**
* The cap style of the stroke.
*/
cap: CanvasLineCap;
/**
* The join style of the stroke.
*/
join: CanvasLineJoin;
/**
* The dash offset of the stroke.
*/
dashOffset: number;
/**
* The dash pattern of the stroke.
*/
dash: number[];
/**
* The miter limit of the stroke.
*/
miterLimit: number;
};
loadFromSVG: boolean;
clipPath: boolean;
}
export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
id: string;
type: LayerType.Path;
zIndex: number;
visible: boolean;
props: IPath2DLayerProps;
constructor(props?: IPath2DLayerProps, misc?: IBaseLayerMisc);
/**
* Sets the unique identifier of the layer.
*
* @param {string} id - The unique identifier.
* @returns {this} The current instance for chaining.
*/
setID(id: string): this;
/**
* Sets the visibility of the layer.
* @param visible {boolean} - The visibility state of the layer.
* @returns {this} The current instance for chaining.
*/
setVisible(visible: boolean): this;
/**
* Sets the z-index of the layer.
* @param zIndex {number} - The z-index value of the layer.
* @returns {this} The current instance for chaining.
*/
setZIndex(zIndex: number): this;
/**
* Sets the global composite operation for the layer.
* @param {AnyGlobalCompositeOperation} operation - The composite operation.
* @returns {this} The current instance for chaining.
*/
setGlobalCompositeOperation(operation: AnyGlobalCompositeOperation): this;
/**
* Sets the filter effects for the layer.
* @param {...AnyFilter} filter - The filter effects to apply.
* @returns {this} The current instance for chaining.
*/
setFilters(...filter: AnyFilter[]): this;
/**
* Sets the transformation matrix of the layer.
* @param {DOMMatrix2DInit} matrix - The transformation matrix.
* @returns {this} The current instance for chaining.
*/
setMatrix(matrix: DOMMatrix2DInit): this;
/**
* Sets the scale of the layer in the x and y directions.
* @param {number} x - The scale factor in the x direction.
* @param {number} y - The scale factor in the y direction.
* @returns {this} The current instance for chaining.
*/
setScale(x: number, y: number): this;
/**
* Sets the translation of the layer in the x and y directions.
* @param {number} x - The translation in the x direction.
* @param {number} y - The translation in the y direction.
* @returns {this} The current instance for chaining.
*/
setTranslate(x: number, y: number): this;
/**
* Sets the opacity of the layer.
* @param {number} opacity - The opacity value, between 0 and 1.
* @returns {this} The current instance for chaining.
*/
setOpacity(opacity: number): this;
/**
* Sets the stroke properties of the Path2D Layer.
* @param width {number} - The width of the stroke.
* @param cap {string} - The cap style of the stroke.
* @param join {string} - The join style of the stroke.
* @param dash {number[]} - The dash pattern of the stroke.
* @param dashOffset {number} - The dash offset of the stroke.
* @param miterLimit {number} - The miter limit of the stroke.
* @returns {this} The current instance for chaining.
*/
setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
/**
* Sets whether the Path2D Layer should be filled or stroked.
* @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
* @returns {this} The current instance for chaining.
*/
setFilled(filled: boolean): this;
/**
* Sets the color of the Path2D Layer.
* @param color {string} - The color of the Path2D Layer.
* @returns {this} The current instance for chaining.
* @throws {LazyError} If the color is not provided or invalid.
*/
setColor(color: ColorType): this;
setPath(path: Path2D | string): this;
loadFromSVG(path: true): this;
setClipPath(clipPath: boolean): this;
toSVGString(): string;
addPath(path: Path2D, transform?: DOMMatrix2DInit | undefined): this;
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
closePath(): this;
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
lineTo(x: number, y: number): this;
moveTo(x: number, y: number): this;
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
rect(x: number, y: number, width: number, height: number): this;
stroke(stroke?: StrokeOptions): this;
op(path: Path2D, op: PathOp): this;
getFillType(): FillType;
getFillTypeString(): string;
setFillType(fillType: FillType): this;
simplify(): this;
asWinding(): this;
transform(matrix: DOMMatrix2DInit): this;
getBounds(): [left: number, top: number, right: number, bottom: number];
computeTightBounds(): [left: number, top: number, right: number, bottom: number];
trim(start: number, end: number, isComplement?: boolean): this;
equals(path: Path2DLayer): boolean;
roundRect(x: number, y: number, width: number, height: number, radius: number): this;
draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
/**
* Converts the Path2D Layer to a JSON representation.
* @returns {IPath2DLayer} The JSON representation of the Path2D Layer.
*/
toJSON(): IPath2DLayer;
}