@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
263 lines (262 loc) • 9.04 kB
TypeScript
import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
import { AnyTextAlign, AnyTextBaseline, AnyTextDirection, AnyWeight, ColorType, LayerType, LineCap, LineJoin, ScaleType, SubStringColor } from "../../types";
import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
import { LayersManager } from "../managers";
/**
* 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;
/**
* Whether the layer is filled.
*/
filled: boolean;
/**
* The fill style (color or pattern) of the layer.
*/
fillStyle: ColorType;
/**
* Array of substring color configurations for partial text coloring.
*/
subStringColors?: SubStringColor[];
/**
* 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 {ITextLayerProps} [props] - The properties of the Text layer.
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
*/
constructor(props?: ITextLayerProps, misc?: IBaseLayerMisc);
/**
* Sets the text of the text layer.
* @param {string} [text] - 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 {string | { family: string; size: number; weight: AnyWeight }} [familyOrConfig] - The font family or configuration object.
* @param {number} [size] - The font size (required if `familyOrConfig` is a string).
* @param {AnyWeight} [weight] - 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 {ScaleType} [width] - The width of the multiline text area.
* @param {ScaleType} [height] - The height of the multiline text area.
* @param {number} [spacing] - The spacing between lines (optional).
* @returns {this} The current instance for chaining.
*/
setMultiline(width: ScaleType, height: ScaleType, spacing?: number): this;
/**
* Sets the color of the text layer.
* @param {ColorType} [color] - The base color of the text.
* @param {SubStringColor[]} [sub] - Optional substring colors for partial text coloring.
* @returns {this} The current instance for chaining.
* @throws {LazyError} If the color is not provided or invalid.
*/
setColor(color: ColorType, ...sub: SubStringColor[]): this;
/**
* Sets the alignment of the text layer.
* @param {AnyTextAlign} [align] - The alignment of the text.
* @returns {this} The current instance for chaining.
*/
setAlign(align: AnyTextAlign): this;
/**
* Sets the baseline of the text layer.
* @param {AnyTextBaseline} [baseline] - The baseline of the text.
* @returns {this} The current instance for chaining.
*/
setBaseline(baseline: AnyTextBaseline): this;
/**
* Sets the direction of the text layer.
* @param {AnyTextDirection} [direction] - 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 {number} [width] - The width of the stroke.
* @param {string} [cap] - The cap style of the stroke.
* @param {string} [join] - The join style of the stroke.
* @param {number[]} [dash] - The dash pattern of the stroke.
* @param {number} [dashOffset] - The dash offset of the stroke.
* @param {number} [miterLimit] - The miter limit of the stroke.
* @returns {this} The current instance for chaining.
*/
setStroke(width: number, cap?: LineCap, join?: LineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
/**
* Sets the spacing between words in the text layer.
* @param {number} [wordSpacing] - 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 {number} [letterSpacing] - The spacing between letters.
* @returns {this} The current instance for chaining.
*/
setLetterSpacing(letterSpacing: number): this;
/**
* Measures the dimensions of the text.
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
* @param {Canvas | SvgCanvas} [canvas] - 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 {SKRSContext2D} [ctx] - The canvas rendering context.
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
* @param {LayersManager} [manager] - The layer's manager.
* @param {boolean} [debug] - Whether to enable debug logging.
*/
draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
/**
* Draws the text on the canvas.
* @param {ITextLayerProps} [props] - The properties of the text layer.
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
* @param {string | CanvasGradient | CanvasPattern} [fillStyle] - The fill style for the text.
* @param {string} [text] - The text content.
* @param {number} [x] - The x-coordinate of the text.
* @param {number} [y] - The y-coordinate of the text.
* @param {number} [w] - The width of the text area.
* @param {number} [textOffset] - The offset of this text segment in the original full text (for multiline support).
*/
private drawText;
/**
* Converts the Text layer to a JSON representation.
* @returns {ITextLayer} The JSON representation of the Text layer.
*/
toJSON(): ITextLayer;
/**
* Validates the properties of the Text layer.
* @param {ITextLayerProps} [data] - The properties to validate.
* @returns {ITextLayerProps} The validated properties.
*/
protected validateProps(data: ITextLayerProps): ITextLayerProps;
}