@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
114 lines (113 loc) • 4.23 kB
TypeScript
import { Canvas, DOMMatrix2DInit, FillType, Path2D, PathOp, SKRSContext2D, StrokeOptions, SvgCanvas } from "@napi-rs/canvas";
import { ColorType, LayerType } from "../../types";
import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
import { LayersManager } from "../managers";
export interface IPath2DLayer extends IBaseLayer {
/**
* The type of the layer, which is `Path`.
*/
type: LayerType.Path;
/**
* The properties specific to the Path2D Layer.
*/
props: IPath2DLayerProps;
}
export interface IPath2DLayerProps extends IBaseLayerProps {
/**
* The Path2D object representing the shape of the layer.
*/
path2D: Path2D;
/**
* Whether the layer is filled.
*/
filled: boolean;
/**
* The fill style (color or pattern) of the layer.
*/
fillStyle: ColorType;
/**
* 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 color of the Path2D Layer.
* @param {ColorType} [color] - The color of the 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;
/**
* Validates the properties of the Path2D Layer.
* @param {IPath2DLayerProps} [data] - The properties to validate.
* @returns {IPath2DLayerProps} The validated properties.
*/
protected validateProps(data: IPath2DLayerProps): IPath2DLayerProps;
}