Class TextStyle

A TextStyle Object contains information to decorate a Text objects.

An instance can be shared between multiple Text objects; then changing the style will update all text objects using it.

A tool can be used to generate a text style here.

Memberof

PIXI

Example

import { TextStyle } from 'pixi.js';
const style = new TextStyle({
  fontFamily: ['Helvetica', 'Arial', 'sans-serif'],
  fontSize: 36,
});

Hierarchy (view full)

Implements

Constructors

constructor

Properties

styleID defaultStyle

Accessors

align breakWords dropShadow dropShadowAlpha dropShadowAngle dropShadowBlur dropShadowColor dropShadowDistance fill fillGradientStops fillGradientType fontFamily fontSize fontStyle fontVariant fontWeight leading letterSpacing lineHeight lineJoin miterLimit padding stroke strokeThickness textBaseline trim whiteSpace wordWrap wordWrapWidth

Methods

clone reset toFontString

Constructors

constructor

  • new TextStyle(style?): Pixi.TextStyle

  • Parameters

    • Optional style: Partial<ITextStyle>

      TextStyle properties to be set on the text. See PIXI.TextStyle.defaultStyle for the default values.

    Returns Pixi.TextStyle

Properties

styleID

styleID: number

Static defaultStyle

defaultStyle: ITextStyle

Default style options used for all TextStyle instances.

Accessors

align

  • get align(): TextStyleAlign

  • Alignment for multiline text, does not affect single line text.

    Returns TextStyleAlign

    Member

  • set align(align): void

  • Alignment for multiline text, does not affect single line text

    Parameters

    Returns void

breakWords

  • get breakWords(): boolean

  • Indicates if lines can be wrapped within words, it needs wordWrap to be set to true.

    Returns boolean

  • set breakWords(breakWords): void

  • Indicates if lines can be wrapped within words, it needs wordWrap to be set to true

    Parameters

    • breakWords: boolean

    Returns void

dropShadow

  • get dropShadow(): boolean

  • Set a drop shadow for the text.

    Returns boolean

  • set dropShadow(dropShadow): void

  • Set a drop shadow for the text

    Parameters

    • dropShadow: boolean

    Returns void

dropShadowAlpha

  • get dropShadowAlpha(): number

  • Set alpha for the drop shadow.

    Returns number

  • set dropShadowAlpha(dropShadowAlpha): void

  • Set alpha for the drop shadow

    Parameters

    • dropShadowAlpha: number

    Returns void

dropShadowAngle

  • get dropShadowAngle(): number

  • Set a angle of the drop shadow.

    Returns number

  • set dropShadowAngle(dropShadowAngle): void

  • Set a angle of the drop shadow

    Parameters

    • dropShadowAngle: number

    Returns void

dropShadowBlur

  • get dropShadowBlur(): number

  • Set a shadow blur radius.

    Returns number

  • set dropShadowBlur(dropShadowBlur): void

  • Set a shadow blur radius

    Parameters

    • dropShadowBlur: number

    Returns void

dropShadowColor

  • get dropShadowColor(): string | number

  • A fill style to be used on the dropshadow e.g., 'red', '#00FF00'.

    Returns string | number

  • set dropShadowColor(dropShadowColor): void

  • A fill style to be used on the dropshadow e.g., 'red', '#00FF00'

    Parameters

    • dropShadowColor: string | number

    Returns void

dropShadowDistance

  • get dropShadowDistance(): number

  • Set a distance of the drop shadow.

    Returns number

  • set dropShadowDistance(dropShadowDistance): void

  • Set a distance of the drop shadow

    Parameters

    • dropShadowDistance: number

    Returns void

fill

fillGradientStops

  • get fillGradientStops(): number[]

  • If fill is an array of colours to create a gradient, this array can set the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.

    Returns number[]

  • set fillGradientStops(fillGradientStops): void

  • If fill is an array of colours to create a gradient, this array can set the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.

    Parameters

    • fillGradientStops: number[]

    Returns void

fillGradientType

  • get fillGradientType(): TEXT_GRADIENT

  • If fill is an array of colours to create a gradient, this can change the type/direction of the gradient.

    Returns TEXT_GRADIENT

  • set fillGradientType(fillGradientType): void

  • If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. See PIXI.TEXT_GRADIENT

    Parameters

    Returns void

fontFamily

  • get fontFamily(): string | string[]

  • The font family, can be a single font name, or a list of names where the first is the preferred font.

    Returns string | string[]

  • set fontFamily(fontFamily): void

  • The font family, can be a single font name, or a list of names where the first is the preferred font.

    Parameters

    • fontFamily: string | string[]

    Returns void

fontSize

  • get fontSize(): string | number

  • The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')

    Returns string | number

  • set fontSize(fontSize): void

  • The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')

    Parameters

    • fontSize: string | number

    Returns void

fontStyle

fontVariant

fontWeight

leading

  • get leading(): number

  • The space between lines.

    Returns number

  • set leading(leading): void

  • The height of the line, a number that represents the vertical space that a letter uses.

    Parameters

    • leading: number

    Returns void

letterSpacing

  • get letterSpacing(): number

  • The amount of spacing between letters, default is 0.

    Returns number

  • set letterSpacing(letterSpacing): void

  • The amount of spacing between letters, default is 0

    Parameters

    • letterSpacing: number

    Returns void

lineHeight

  • get lineHeight(): number

  • The line height, a number that represents the vertical space that a letter uses.

    Returns number

  • set lineHeight(lineHeight): void

  • The line height, a number that represents the vertical space that a letter uses

    Parameters

    • lineHeight: number

    Returns void

lineJoin

  • get lineJoin(): TextStyleLineJoin

  • The lineJoin property sets the type of corner created, it can resolve spiked text issues. Default is 'miter' (creates a sharp corner).

    Returns TextStyleLineJoin

    Member

  • set lineJoin(lineJoin): void

  • The lineJoin property sets the type of corner created, it can resolve spiked text issues. Possible values "miter" (creates a sharp corner), "round" (creates a round corner) or "bevel" (creates a squared corner).

    Parameters

    Returns void

miterLimit

  • get miterLimit(): number

  • The miter limit to use when using the 'miter' lineJoin mode.

    This can reduce or increase the spikiness of rendered text.

    Returns number

  • set miterLimit(miterLimit): void

  • The miter limit to use when using the 'miter' lineJoin mode. This can reduce or increase the spikiness of rendered text.

    Parameters

    • miterLimit: number

    Returns void

padding

  • get padding(): number

  • Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.

    Returns number

  • set padding(padding): void

  • Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.

    Parameters

    • padding: number

    Returns void

stroke

  • get stroke(): string | number

  • A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'

    Returns string | number

  • set stroke(stroke): void

  • A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'

    Parameters

    • stroke: string | number

    Returns void

strokeThickness

  • get strokeThickness(): number

  • A number that represents the thickness of the stroke.

    Returns number

    Default

    0
  • set strokeThickness(strokeThickness): void

  • A number that represents the thickness of the stroke. A value of 0 will disable stroke.

    Parameters

    • strokeThickness: number

    Returns void

textBaseline

trim

  • get trim(): boolean

  • Trim transparent borders.

    Returns boolean

  • set trim(trim): void

  • Trim transparent borders

    Parameters

    • trim: boolean

    Returns void

whiteSpace

  • get whiteSpace(): TextStyleWhiteSpace

  • How newlines and spaces should be handled. Default is 'pre' (preserve, preserve).

    value New lines Spaces
    'normal' Collapse Collapse
    'pre' Preserve Preserve
    'pre-line' Preserve Collapse

    Returns TextStyleWhiteSpace

    Member

  • set whiteSpace(whiteSpace): void

  • Determines whether newlines & spaces are collapsed or preserved "normal" (collapse, collapse), "pre" (preserve, preserve) | "pre-line" (preserve, collapse). It needs wordWrap to be set to true.

    Parameters

    Returns void

wordWrap

  • get wordWrap(): boolean

  • Indicates if word wrap should be used.

    Returns boolean

  • set wordWrap(wordWrap): void

  • Indicates if word wrap should be used

    Parameters

    • wordWrap: boolean

    Returns void

wordWrapWidth

  • get wordWrapWidth(): number

  • The width at which text will wrap, it needs wordWrap to be set to true.

    Returns number

  • set wordWrapWidth(wordWrapWidth): void

  • The width at which text will wrap, it needs wordWrap to be set to true

    Parameters

    • wordWrapWidth: number

    Returns void

Methods

clone

  • clone(): Pixi.TextStyle

  • Creates a new TextStyle object with the same values as this one. Note that the only the properties of the object are cloned.

    Returns Pixi.TextStyle

    New cloned TextStyle object

reset

  • reset(): void

  • Resets all properties to the defaults specified in TextStyle.prototype._default

    Returns void

toFontString

  • toFontString(): string

  • Generates a font style string to use for TextMetrics.measureFont().

    Returns string

    Font style string, for passing to TextMetrics.measureFont()

Settings

Member Visibility

Theme

On This Page

constructorstyleIDdefaultStylealignbreakWordsdropShadowdropShadowAlphadropShadowAngledropShadowBlurdropShadowColordropShadowDistancefillfillGradientStopsfillGradientTypefontFamilyfontSizefontStylefontVariantfontWeightleadingletterSpacinglineHeightlineJoinmiterLimitpaddingstrokestrokeThicknesstextBaselinetrimwhiteSpacewordWrapwordWrapWidthcloneresettoFontString

Generated using TypeDoc