@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
250 lines (249 loc) • 8.57 kB
TypeScript
import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
import { ScaleType, ColorType, AnyWeight, AnyTextAlign, AnyTextBaseline, AnyTextDirection, LineCap, LineJoin, LayerType } from "../../types";
import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
import { LayersManager } from "../managers/LayersManager";
/**
* Interface representing a Text Layer.
*/
export interface ITextLayer extends IBaseLayer {
/**
* The type of the layer, which is `Text`.
*/
type: LayerType.Text;
/**
* The properties specific to the Text Layer.
*/
props: ITextLayerProps;
}
/**
* Interface representing the properties of a Text Layer.
*/
export interface ITextLayerProps extends IBaseLayerProps {
/**
* The text content of the layer.
*/
text: string;
/**
* The font configuration for the text.
*/
font: {
/**
* The font family.
*/
family: string;
/**
* The font size.
*/
size: number;
/**
* The font weight.
*/
weight: AnyWeight;
};
/**
* Configuration for multiline text.
*/
multiline: {
/**
* Whether multiline is enabled.
*/
enabled: boolean;
/**
* The spacing between lines (optional).
*/
spacing?: number;
};
/**
* The size of the text layer, including width and height.
*/
size: {
/**
* The width of the text layer.
*/
width: ScaleType;
/**
* The height of the text layer.
*/
height: ScaleType;
};
/**
* The alignment of the text.
*/
align: AnyTextAlign;
/**
* The baseline of the text.
*/
baseline: AnyTextBaseline;
/**
* The direction of the text.
*/
direction: AnyTextDirection;
/**
* The spacing between letters.
*/
letterSpacing: number;
/**
* The spacing between words.
*/
wordSpacing: number;
/**
* The stroke properties of the text.
*/
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;
};
}
/**
* Class representing a Text Layer, extending the BaseLayer class.
*/
export declare class TextLayer extends BaseLayer<ITextLayerProps> {
/**
* The properties of the Text Layer.
*/
props: ITextLayerProps;
/**
* Constructs a new TextLayer instance.
* @param props {ITextLayerProps} - The properties of the Text Layer.
* @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
*/
constructor(props?: ITextLayerProps, misc?: IBaseLayerMisc);
/**
* Sets the text of the text layer.
* @param text {string} - The text content of the layer.
* @returns {this} The current instance for chaining.
*/
setText(text: string): this;
/**
* Sets the font of the text layer.
* @param familyOrConfig {string | { family: string; size: number; weight: AnyWeight }} - The font family or configuration object.
* @param size {number} - The font size (required if `familyOrConfig` is a string).
* @param weight {AnyWeight} - The font weight (required if `familyOrConfig` is a string).
* @returns {this} The current instance for chaining.
* @throws {LazyError} If size or weight is not provided when `familyOrConfig` is a string.
*/
setFont(familyOrConfig: string | {
family: string;
size: number;
weight: AnyWeight;
}, size?: number, weight?: AnyWeight): this;
/**
* Configures the multiline properties of the text layer.
* @param enabled {boolean} - Whether multiline is enabled.
* @param width {ScaleType} - The width of the multiline text area.
* @param height {ScaleType} - The height of the multiline text area.
* @param spacing {number} - The spacing between lines (optional).
* @returns {this} The current instance for chaining.
*/
setMultiline(enabled: boolean, width: ScaleType, height: ScaleType, spacing?: number): this;
/**
* Sets the color of the text layer.
* @param color {ColorType} - The color of the text.
* @returns {this} The current instance for chaining.
* @throws {LazyError} If the color is not provided or invalid.
*/
setColor(color: ColorType): this;
/**
* Sets the alignment of the text layer.
* @param align {AnyTextAlign} - The alignment of the text.
* @returns {this} The current instance for chaining.
*/
setAlign(align: AnyTextAlign): this;
/**
* Sets the baseline of the text layer.
* @param baseline {AnyTextBaseline} - The baseline of the text.
* @returns {this} The current instance for chaining.
*/
setBaseline(baseline: AnyTextBaseline): this;
/**
* Sets the direction of the text layer.
* @param direction {AnyTextDirection} - The direction of the text.
* @returns {this} The current instance for chaining.
*/
setDirection(direction: AnyTextDirection): this;
/**
* Configures the stroke properties of the text layer.
* @param width {number} - The width of the stroke.
* @param cap {string} - The cap style of the stroke (optional).
* @param join {string} - The join style of the stroke (optional).
* @param dash {number[]} - The dash pattern of the stroke (optional).
* @param dashOffset {number} - The dash offset of the stroke (optional).
* @param miterLimit {number} - The miter limit of the stroke (optional).
* @returns {this} The current instance for chaining.
*/
setStroke(width: number, cap?: LineCap, join?: LineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
/**
* Sets whether the text 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 spacing between words in the text layer.
* @param wordSpacing {number} - The spacing between words.
* @returns {this} The current instance for chaining.
*/
setWordSpacing(wordSpacing: number): this;
/**
* Sets the spacing between letters in the text layer.
* @param letterSpacing {number} - The spacing between letters.
* @returns {this} The current instance for chaining.
*/
setLetterSpacing(letterSpacing: number): this;
/**
* Measures the dimensions of the text.
* @param ctx {SKRSContext2D} - The canvas rendering context.
* @param canvas {Canvas | SvgCanvas} - The canvas instance.
* @returns {Object} The width and height of the text.
*/
measureText(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas): {
width: number;
height: number;
};
/**
* Draws the text layer on the canvas.
* @param ctx {SKRSContext2D} - The canvas rendering context.
* @param canvas {Canvas | SvgCanvas} - The canvas instance.
* @param manager {LayersManager} - The layers manager.
* @param debug {boolean} - Whether to enable debug logging.
*/
draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
/**
* Draws the text on the canvas.
* @param props {ITextLayerProps} - The properties of the text layer.
* @param ctx {SKRSContext2D} - The canvas rendering context.
* @param fillStyle {string | CanvasGradient | CanvasPattern} - The fill style for the text.
* @param text {string} - The text content.
* @param x {number} - The x-coordinate of the text.
* @param y {number} - The y-coordinate of the text.
* @param w {number} - The width of the text area.
*/
private drawText;
/**
* Converts the Text Layer to a JSON representation.
* @returns {ITextLayer} The JSON representation of the Text Layer.
*/
toJSON(): ITextLayer;
}