Class CanvasTextMetrics`Advanced`

The TextMetrics object represents the measurement of a block of text with a specified style.

Example

import { CanvasTextMetrics, TextStyle } from 'pixi.js';

const style = new TextStyle({
    fontFamily: 'Arial',
    fontSize: 24,
    fill: 0xff1010,
    align: 'center',
});
const textMetrics = CanvasTextMetrics.measureText('Your text', style);

Constructors

constructor

new CanvasTextMetrics(
    text: string,
    style: TextStyle,
    width: number,
    height: number,
    lines: string[],
    lineWidths: number[],
    lineHeight: number,
    maxLineWidth: number,
    fontProperties: FontMetrics,
): CanvasTextMetrics
Parameters
- text: string
  the text that was measured
- style: TextStyle
  the style that was measured
- width: number
  the measured width of the text
- height: number
  the measured height of the text
- lines: string[]
  an array of the lines of text broken by new lines and wrapping if specified in style
- lineWidths: number[]
  an array of the line widths for each line matched to lines
- lineHeight: number
  the measured line height for this style
- maxLineWidth: number
  the maximum line width for all measured lines
- fontProperties: FontMetrics
  the font properties object from TextMetrics.measureFont
Returns CanvasTextMetrics

Properties

fontProperties

fontProperties: FontMetrics

The font properties object from TextMetrics.measureFont.

height

height: number

The measured height of the text.

lineHeight

lineHeight: number

The measured line height for this style.

lines

lines: string[]

An array of lines of the text broken by new lines and wrapping is specified in style.

lineWidths

lineWidths: number[]

An array of the line widths for each line matched to lines.

maxLineWidth

maxLineWidth: number

The maximum line width for all measured lines.

style

style: TextStyle

The style that was measured.

text

text: string

The text that was measured.

width

width: number

The measured width of the text.

`Static` `Optional`_experimentalLetterSpacingSupported

_experimentalLetterSpacingSupported?: boolean

`Static`BASELINE_MULTIPLIER

BASELINE_MULTIPLIER: number = 1.4

Baseline multiplier for calculate font metrics.

`Static`BASELINE_SYMBOL

BASELINE_SYMBOL: string = 'M'

Baseline symbol for calculate font metrics.

`Static`experimentalLetterSpacing

experimentalLetterSpacing: boolean = false

New rendering behavior for letter-spacing which uses Chrome's new native API. This will lead to more accurate letter-spacing results because it does not try to manually draw each character. However, this Chrome API is experimental and may not serve all cases yet.

See

TextMetrics.experimentalLetterSpacingSupported

`Static`graphemeSegmenter

graphemeSegmenter: (s: string) => string[] = ...

A Unicode "character", or "grapheme cluster", can be composed of multiple Unicode code points, such as letters with diacritical marks (e.g. '\u0065\u0301', letter e with acute) or emojis with modifiers (e.g. '\uD83E\uDDD1\u200D\uD83D\uDCBB', technologist). The new Intl.Segmenter API in ES2022 can split the string into grapheme clusters correctly. If it is not available, PixiJS will fallback to use the iterator of String, which can only spilt the string into code points. If you want to get full functionality in environments that don't support Intl.Segmenter (such as Firefox), you can use other libraries such as [grapheme-splitter]https://www.npmjs.com/package/grapheme-splitter or [graphemer]https://www.npmjs.com/package/graphemer to create a polyfill. Since these libraries can be relatively large in size to handle various Unicode grapheme clusters properly, PixiJS won't use them directly.

`Static`HEIGHT_MULTIPLIER

HEIGHT_MULTIPLIER: number = 2.0

Height multiplier for setting height of canvas to calculate font metrics.

`Static`METRICS_STRING

METRICS_STRING: string = '|ÉqÅ'

String used for calculate font metrics. These characters are all tall to help calculate the height required for text.

Accessors

`Static`experimentalLetterSpacingSupported

get experimentalLetterSpacingSupported(): boolean
Checking that we can use modern canvas 2D API.

Note: This is an unstable API, Chrome < 94 use textLetterSpacing, later versions use letterSpacing.

Returns boolean
See
- TextMetrics.experimentalLetterSpacing
- https://developer.mozilla.org/en-US/docs/Web/API/ICanvasRenderingContext2D/letterSpacing
- https://developer.chrome.com/origintrials/#/view_trial/3585991203293757441

Methods

`Static`canBreakChars

canBreakChars(
    _char: string,
    _nextChar: string,
    _token: string,
    _index: number,
    _breakWords: boolean,
): boolean
Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.

It allows one to determine whether a pair of characters should be broken by newlines For example certain characters in CJK langs or numbers. It must return a boolean.
Parameters
- _char: string
  The character
- _nextChar: string
  The next character
- _token: string
  The token/word the characters are from
- _index: number
  The index in the token of the char
- _breakWords: boolean
  The style attr break words
Returns boolean
whether to break word or not

`Static`canBreakWords

canBreakWords(_token: string, breakWords: boolean): boolean
Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.

It allows one to customise which words should break Examples are if the token is CJK or numbers. It must return a boolean.
Parameters
- _token: string
  The token
- breakWords: boolean
  The style attr break words
Returns boolean
Whether to break word or not

`Static`clearMetrics

clearMetrics(font?: string): void
Clear font metrics in metrics cache.
Parameters
- Optionalfont: string = ''
  font name. If font name not set then clear cache for all fonts.
Returns void

`Static`isBreakingSpace

isBreakingSpace(char: string, _nextChar?: string): boolean
Determines if char is a breaking whitespace.

It allows one to determine whether char should be a breaking whitespace For example certain characters in CJK langs or numbers. It must return a boolean.
Parameters
- char: string
  The character
- Optional_nextChar: string
  The next character
Returns boolean
True if whitespace, False otherwise.

`Static`measureFont

measureFont(font: string): FontMetrics
Calculates the ascent, descent and fontSize of a given font-style
Parameters
- font: string
  String representing the style of the font
Returns FontMetrics
Font properties object

`Static`measureText

measureText(
    text?: string,
    style: TextStyle,
    canvas?: ICanvas,
    wordWrap?: boolean,
): CanvasTextMetrics
Measures the supplied string of text and returns a Rectangle.
Parameters
- text: string = ' '
  The text to measure.
- style: TextStyle
  The text style to use for measuring
- canvas: ICanvas = CanvasTextMetrics._canvas
  optional specification of the canvas to use for measuring.
- wordWrap: boolean = style.wordWrap
Returns CanvasTextMetrics
Measured width and height of the text.

`Static`wordWrapSplit

wordWrapSplit(token: string): string[]
Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.

It is called when a token (usually a word) has to be split into separate pieces in order to determine the point to break a word. It must return an array of characters.
Parameters
- token: string
  The token to split
Returns string[]
The characters of the token

See
CanvasTextMetrics.graphemeSegmenter

Class CanvasTextMetricsAdvanced

Example

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns CanvasTextMetrics

Properties

fontProperties

height

lineHeight

lines

lineWidths

maxLineWidth

style

text

width

Static Optional_experimentalLetterSpacingSupported

StaticBASELINE_MULTIPLIER

StaticBASELINE_SYMBOL

StaticexperimentalLetterSpacing

See

StaticgraphemeSegmenter

StaticHEIGHT_MULTIPLIER

StaticMETRICS_STRING

Accessors

StaticexperimentalLetterSpacingSupported

Returns boolean

See

Methods

StaticcanBreakChars

Parameters

Returns boolean

StaticcanBreakWords

Parameters

Returns boolean

StaticclearMetrics

Parameters

Returns void

StaticisBreakingSpace

Parameters

Returns boolean

StaticmeasureFont

Parameters

Returns FontMetrics

StaticmeasureText

Parameters

Returns CanvasTextMetrics

StaticwordWrapSplit

Parameters

Returns string[]

See

Settings

On This Page

Class CanvasTextMetrics`Advanced`

`Static` `Optional`_experimentalLetterSpacingSupported

`Static`BASELINE_MULTIPLIER

`Static`BASELINE_SYMBOL

`Static`experimentalLetterSpacing

`Static`graphemeSegmenter

`Static`HEIGHT_MULTIPLIER

`Static`METRICS_STRING

`Static`experimentalLetterSpacingSupported

`Static`canBreakChars

`Static`canBreakWords

`Static`clearMetrics

`Static`isBreakingSpace

`Static`measureFont

`Static`measureText

`Static`wordWrapSplit