/**
 * a Text object: draws a string using a system or web font.
 *
 * The text is rasterised to a cached texture, so it draws as fast as a sprite
 * while staying fully styleable — `fillStyle`, `strokeStyle` + `lineWidth`, and
 * per-object opacity — with multi-line text (embedded `\n`), optional
 * `wordWrapWidth` word-wrapping, and chainable {@link Text#bold} /
 * {@link Text#italic}. `font` accepts any CSS family, including the generic
 * keywords (`sans-serif`, `monospace`, …); a web font loaded through the
 * `fontface` loader is referenced by its family name.
 *
 * For a crisp, tintable, retro look — or large amounts of mostly-static text —
 * consider {@link BitmapText} instead.
 * @category Text
 */
export default class Text extends Renderable {
    /**
     * @param {number} x - position of the text object
     * @param {number} y - position of the text object
     * @param {object} settings - the text configuration
     * @param {string} settings.font - a CSS font family: a specific name (`"Arial"`), a generic keyword (`"sans-serif"`, `"monospace"`, …), or a web font loaded via the `fontface` loader (referenced by its family name)
     * @param {number|string} settings.size - the font size: a number in pixels, or a CSS size string with a unit (`"24px"` / `"1.5em"` / `"18pt"`)
     * @param {Color|Gradient|string} [settings.fillStyle="#000000"] - a CSS color value used to fill the glyphs, or a {@link Gradient} to ramp them
     * @param {boolean} [settings.gradientPerLine=true] - restart a gradient fill on every line; `false` spans one ramp across the whole block, as a plain canvas does
     * @param {Color|string} [settings.strokeStyle="#000000"] - a CSS color value used for the glyph outline (drawn when `lineWidth` > 0)
     * @param {number} [settings.lineWidth=0] - outline width in pixels (0 = no stroke)
     * @param {string} [settings.textAlign="left"] - horizontal text alignment ("left", "center", "right")
     * @param {string} [settings.textBaseline="top"] - the text baseline ("top", "hanging", "middle", "alphabetic", "ideographic", "bottom")
     * @param {number} [settings.lineHeight=1.0] - line spacing height
     * @param {string|Vector2d|{x:number,y:number}} [settings.anchorPoint={x:0.0, y:0.0}] - anchor point to draw the text at. Also accepts the named presets `"center"`, `"top"`, `"bottom"`, `"left"`, `"right"`, `"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`.
     * @param {number} [settings.wordWrapWidth] - the maximum length in CSS pixels of a line before it wraps
     * @param {boolean} [settings.bold=false] - render the face bold, as {@link Text#bold} does
     * @param {boolean} [settings.italic=false] - render the face italic, as {@link Text#italic} does
     * @param {(string|string[])} [settings.text=""] - a string, or an array of strings
     * @example
     * // a styled, word-wrapped, multi-line label using a generic system font
     * const label = new Text(8, 8, {
     *     font: "sans-serif",          // any CSS family (generic keywords work too)
     *     size: 24,                    // number (px) or a "1.5em" / "18pt" string
     *     fillStyle: "#ffffff",
     *     strokeStyle: "#202020",
     *     lineWidth: 2,                // outline the glyphs
     *     textAlign: "left",
     *     textBaseline: "top",
     *     wordWrapWidth: 200,          // wrap lines longer than 200px
     *     text: "Hello melonJS!\nStyled, wrapped, multi-line text.",
     * });
     * label.bold();                    // bold() / italic() are chainable
     * label.setOpacity(0.8);           // per-object transparency
     * app.world.addChild(label);
     * @example
     * // a gradient fill: `fillStyle` takes a Gradient as well as a colour.
     * // Its coordinates are the label's OWN bake, so (0, 0) is the top-left of
     * // the render box and the ramp below runs down exactly one line.
     * const ramp = app.renderer.createLinearGradient(0, 0, 0, 32);
     * ramp.addColorStop(0, "#fffdf0");
     * ramp.addColorStop(1, "#ffa71d");
     *
     * app.world.addChild(new Text(8, 8, {
     *     font: "sans-serif",
     *     size: 32,
     *     fillStyle: ramp,             // ramps the glyphs...
     *     strokeStyle: "#000000",      // ...while the outline keeps its own colour
     *     lineWidth: 1,
     *     text: "GAME\nOVER",          // every line restarts the ramp by default
     *     // gradientPerLine: false,   // ...or span ONE ramp across both lines
     * }));
     * @example
     * // a web font (loaded via the fontface loader) is used by its family name
     * loader.preload(
     *     [{ name: "kenpixel", type: "fontface", src: "data/font/kenvector.woff2" }],
     *     () => {
     *         app.world.addChild(
     *             new Text(0, 0, { font: "kenpixel", size: 32, text: "Web font" }),
     *         );
     *     },
     * );
     */
    constructor(x: number, y: number, settings: {
        font: string;
        size: number | string;
        fillStyle?: string | Color | Gradient | undefined;
        gradientPerLine?: boolean | undefined;
        strokeStyle?: string | Color | undefined;
        lineWidth?: number | undefined;
        textAlign?: string | undefined;
        textBaseline?: string | undefined;
        lineHeight?: number | undefined;
        anchorPoint?: string | Vector2d | {
            x: number;
            y: number;
        };
        wordWrapWidth?: number | undefined;
        bold?: boolean | undefined;
        italic?: boolean | undefined;
        text?: string | string[] | undefined;
    });
    /**
     * defines the color used to draw the font.
     * @type {Color}
     * @default black
     */
    fillStyle: Color;
    /**
     * defines the color used to draw the font stroke.<br>
     * @type {Color}
     * @default black
     */
    strokeStyle: Color;
    /**
     * sets the current line width, in pixels, when drawing stroke
     * @type {number}
     * @default 0
     */
    lineWidth: number;
    /**
     * Set the default text alignment (or justification),<br>
     * possible values are "left", "right", and "center".<br>
     * @type {string}
     * @default "left"
     */
    textAlign: string;
    /**
     * Set the text baseline (e.g. the Y-coordinate for the draw operation), <br>
     * possible values are "top", "hanging", "middle", "alphabetic", "ideographic", "bottom"<br>
     * @type {string}
     * @default "top"
     */
    textBaseline: string;
    /**
     * Set the line spacing height (when displaying multi-line strings). <br>
     * Current font height will be multiplied with this value to set the line height.
     * @type {number}
     * @default 1.0
     */
    lineHeight: number;
    /**
     * the maximum length in CSS pixel for a single segment of text.
     * (use -1 to disable word wrapping)
     * @type {number}
     * @default -1
     */
    wordWrapWidth: number;
    /**
     * the font size (in px)
     * @type {number}
     * @default 10
     */
    fontSize: number;
    /**
     * The gradient to fill the glyphs with, when one was given instead of a
     * colour. Built by {@link Renderer#createLinearGradient} /
     * {@link Renderer#createRadialGradient}, and its coordinates are this
     * label's own bake — `(0, 0)` is the top-left of the render box.
     *
     * Set it through `fillStyle`, the way `Renderer#setColor` takes one;
     * this field is where it lands so the pooled `fillStyle` `Color` keeps
     * its type, its alpha and its pooling.
     * @type {Gradient|undefined}
     * @default undefined
     * @example
     * const ramp = renderer.createLinearGradient(0, 0, 0, 24);
     * ramp.addColorStop(0, "#fffdf0");
     * ramp.addColorStop(1, "#f0a020");
     * const label = new Text(x, y, { font: "Arial", size: 24, fillStyle: ramp });
     */
    fillGradient: Gradient | undefined;
    /**
     * Whether a gradient fill restarts on every line.
     *
     * `true` (the default) re-anchors the ramp to each line, so a
     * multi-line label reads like one `Text` per line — which is how a HUD
     * is usually built, and means the ramp does not have to be authored
     * over the block height to look right.
     *
     * `false` spans one ramp across the whole block, which is what a plain
     * canvas does: a `CanvasGradient` lives in the current transform's
     * space, so lines further down sample further along it. Use it for a
     * deliberate fade across a multi-line title.
     * @type {boolean}
     * @default true
     */
    gradientPerLine: boolean | undefined;
    canvasTexture: CanvasRenderTarget | undefined;
    metrics: TextMetrics | undefined;
    /**
     * make the font bold
     * @returns {Text} this object for chaining
     */
    bold(): Text;
    font: any;
    /**
     * make the font italic
     * @returns {Text} this object for chaining
     */
    italic(): Text;
    /**
     * set the font family and size
     * @param {string} font - a CSS font name
     * @param {number|string} [size=10] - size in px, or size + suffix (px, em, pt)
     * @returns {Text} this object for chaining
     * @example
     * font.setFont("Arial", 20);
     * font.setFont("Arial", "1.5em");
     */
    setFont(font: string, size?: number | string): Text;
    /**
     * change the text to be displayed
     * @param {number|string|string[]} value - a string, or an array of strings
     * @returns {Text} this object for chaining
     */
    setText(value?: number | string | string[]): Text;
    public set visibleCharacters(value: number);
    /**
     * the number of characters to display (use -1 to show all).
     * Useful for typewriter effects combined with Tween.
     * @public
     * @type {number}
     * @default -1
     * @see Text#visibleRatio
     * @example
     * // typewriter effect
     * text.visibleCharacters = 0;
     * new Tween(text).to({ visibleRatio: 1.0 }, { duration: 2000 }).start();
     */
    public get visibleCharacters(): number;
    public set visibleRatio(value: number);
    /**
     * the ratio of visible characters (0.0 to 1.0).
     * Setting this automatically updates {@link Text#visibleCharacters}.
     *
     * This is the one to tween: it is independent of how many characters the
     * label holds, so a reveal takes the same time whatever the string is.
     * @public
     * @type {number}
     * @default 1.0
     * @see Text#visibleCharacters
     * @example
     * // reveal over two seconds, regardless of length
     * label.visibleRatio = 0;
     * new Tween(label).to({ visibleRatio: 1.0 }, { duration: 2000 }).start();
     */
    public get visibleRatio(): number;
    /**
     * measure the given text size in pixels
     * @param {string} [text] - the text to be measured
     * @returns {TextMetrics} a TextMetrics object defining the dimensions of the given piece of text
     * @example
     * // size a panel around a label
     * const size = label.measureText();
     * panel.resize(size.width + 16, size.height + 16);
     *
     * // or measure a string the label does not currently hold, to reserve
     * // room for the widest state a counter will reach
     * const widest = label.measureText("00:00").width;
     */
    measureText(text?: string): TextMetrics;
    /**
     * draw a text at the specified coord
     * @param {CanvasRenderer|WebGLRenderer} renderer - Reference to the destination renderer instance
     */
    draw(renderer: CanvasRenderer | WebGLRenderer): void;
}
import Renderable from "../renderable.js";
import { Color } from "../../math/color.ts";
import { Gradient } from "../../video/gradient.js";
import CanvasRenderTarget from "../../video/rendertarget/canvasrendertarget.js";
import TextMetrics from "./textmetrics.js";
//# sourceMappingURL=text.d.ts.map