Text system design

API Design

TextRenderer

export class TextRenderer extends Renderer {
    /**
     * Rendering color for the TextRenderer.
     */
    get color(): Color;
    set color(value: Color);
    /**
     * Rendering string for the TextRenderer.
     */
    get text(): string;
    set text(value: string);
    /**
     * The width of the TextRenderer (in 3D world coordinates).
     */
    get width(): number;
    set width(value: number);
    /**
     * The height of the TextRenderer (in 3D world coordinates).
     */
    get height(): number;
    set height(value: number);
    /**
     * The font name of the TextRenderer.
     */
    get fontName(): string;
    set fontName(value: string);
    /**
     * The font size of the TextRenderer.
     */
    get fontSize(): number;
    set fontSize(value: number);
    /**
     * The space between two lines (in pixels).
     */
    get lineSpace(): number;
    set lineSpace(value: number);
    /**
     * The text is bold.
     */
    get bold(): boolean;
    set bold(value: boolean);
    /**
     * The text is italic.
     */
    get italic(): boolean;
    set italic(value: boolean);
    /**
     * The horizontal alignment.
     */
    get horizontalAlignment(): TextHorizontalAlignment;
    set horizontalAlignment(value: TextHorizontalAlignment);
    /**
     * The vertical alignment.
     */
    get verticalAlignment(): TextVerticalAlignment;
    set verticalAlignment(value: TextVerticalAlignment);
    /**
     * The horizontal overflow.
     */
    get horizontalOverflow(): TextHorizontalOverflow;
    set horizontalOverflow(value: TextHorizontalOverflow);
    /**
     * The vertical overflow.
     */
    get verticalOverflow(): TextVerticalOverflow;
    set verticalOverflow(value: TextVerticalOverflow);
    /**
     * Interacts with the masks.
     */
    get maskInteraction(): SpriteMaskInteraction;
    set maskInteraction(value: SpriteMaskInteraction);
    /**
     * The mask layer the sprite renderer belongs to.
     */
    get maskLayer(): number;
    set maskLayer(value: number);
}

TextUtils

/**
 * TextContext.
 */
export interface TextContext {
    canvas: HTMLCanvasElement;
    context: CanvasRenderingContext2D;
}
/**
 * TextMetrics.
 */
export interface TextMetrics {
    width: number;
    height: number;
    lines: Array<string>;
    lineWidths: Array<number>;
    maxLineWidth: number;
    lineHeight: number;
    fontSize: number;
}
/**
 * TextUtils includes some helper function for text.
 */
export declare class TextUtils {
    /**
     * The instance function to get an object includes 2d context and canvas.
     * @returns the TextContext object
     */
    static textContext(): TextContext;
    /**
     * Measure the font.
     * @param textContext - text context includes 2d context and canvas
     * @param font - the string of the font
     * @returns the font size
     */
    static measureFont(textContext: TextContext, font: string): number;
    /**
     * Measure the text.
     * @param textContext - text context includes 2d context and canvas
     * @param textRenderer - the text renderer
     * @param fontStr - the string of font
     * @returns the TextMetrics object
     */
    static measureText(textContext: TextContext, textRenderer: TextRenderer, fontStr: string): TextMetrics;
    /**
     * Trim canvas.
     * @param textContext - text context includes gl context and canvas
     * @returns the width and height after trim, and the image data
     */
    static trimCanvas(textContext: TextContext): {
        width: number;
        height: number;
        data?: ImageData;
    };
}

Shorthand Mapping

horizontalAlignment -> hAlign
verticalAlignment -> vAlign
horizontalOverflow -> hOverflow
verticalOverflow -> vOverflow
Left -> L
Center -> C
Right -> R
Top -> T
Bottom -> B

Newline Rule

Bounds Rule

Test