@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
89 lines (88 loc) • 4.13 kB
TypeScript
import { BaseLayer } from "./BaseLayer";
import { LineCap, LineJoin } from "../../types/enum";
import { ITextLayer, ITextLayerProps, ScaleType, ColorType, AnyWeight, AnyTextAlign, AnyTextBaseline, AnyTextDirection } from "../../types";
import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
import { LayersManager } from "../managers/LayersManager";
export declare class TextLayer extends BaseLayer<ITextLayerProps> {
props: ITextLayerProps;
constructor(props?: ITextLayerProps);
/**
* @description Sets the text of the text layer.
* @param text {string} - The `text` of the text layer.
*/
setText(text: string): this;
/**
* @description Set the font of the text layer. You can use `Geist` and `GeistMono`, or you can upload your own font from file/base64 buffer.
* @param familyOrConfig {string | { font: string; size: number; weight: AnyWeight }} - The `family` of the font. If you want to use FontsList, you can use the object config.
* @param size {number} - The `size` of the font.
* @param weight {AnyWeight} - The `weight` of the font.
*/
setFont(familyOrConfig: string | {
family: string;
size: number;
weight: AnyWeight;
}, size?: number, weight?: AnyWeight): this;
/**
* @description Set the multiline of the text layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
* @param enabled {boolean} - Whether the text is multiline.
* @param width {ScaleType} - width of "window" the multiline text. Can be used in one line text for text max width.
* @param height {ScaleType} - height of "window" the multiline text.
* @param spacing {number} - The space between the lines.
*/
setMultiline(enabled: boolean, width: ScaleType, height: ScaleType, spacing?: number): this;
/**
* @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
* @param color {string} - The `color` of the layer.
*/
setColor(color: ColorType): this;
/**
* @description Set the align of the text layer.
* @param align {AnyTextAlign} - The `align` of the text layer.
*/
setAlign(align: AnyTextAlign): this;
/**
* @description Set the baseline of the text layer.
* @param baseline {AnyTextBaseline} - The `baseline` of the text layer.
*/
setBaseline(baseline: AnyTextBaseline): this;
/**
* @description Set the direction of the text layer.
* @param direction {AnyTextDirection} - The `direction` of the text layer.
*/
setDirection(direction: AnyTextDirection): this;
/**
* @description Set the stroke of the layer.
* @param width {number} - The `width` of the stroke.
* @param cap {string} - The `cap` of the stroke.
* @param join {string} - The `join` of the stroke.
* @param dash {number[]} - The `dash` of the stroke.
* @param dashOffset {number} - The `dashOffset` of the stroke.
* @param miterLimit {number} - The `miterLimit` of the stroke.
*/
setStroke(width: number, cap?: LineCap, join?: LineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
/**
* @description Sets the fills of the layer. If `true` the layer will be filled, if `false` the layer will be stroked.
* @param filled {boolean} - The `filled` of the layer.
*/
setFilled(filled: boolean): this;
/**
* @description Sets the spacing between the words.
* @param wordSpacing {number} - The `wordSpacing` of the text layer.
*/
setWordSpacing(wordSpacing: number): this;
/**
* @description Sets the letter spacing.
* @param letterSpacing {number} - The `letterSpacing` of the text layer.
*/
setLetterSpacing(letterSpacing: number): this;
measureText(ctx: SKRSContext2D, canvas: Canvas): {
width: number;
height: number;
};
draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
private drawText;
/**
* @returns {ITextLayer}
*/
toJSON(): ITextLayer;
}