TextBounds¶

Overview¶

Different methods of detection of text bounds.

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class TextBounds¶

import { TextBounds } from 'scenerystack/scenery';

Static Methods¶

approximateSVGBounds( font : Font, renderedText : string ) : Bounds2¶

Returns a new Bounds2 that is the approximate bounds of a Text node displayed with the specified font and renderedText.

This method uses an SVG Text element, sets its text, and then determines its size to estimate the size of rendered text.

NOTE: Calling code relies on the new Bounds2 instance, as they mutate it.

guessSVGBounds( font : Font, renderedText : string ) : Bounds2¶

Returns a guess for what the SVG bounds of a font would be, based on PhetFont as an example.

accurateCanvasBounds( text : Text ) : Bounds2¶

Returns a new Bounds2 that is the approximate bounds of the specified Text node.

NOTE: Calling code relies on the new Bounds2 instance, as they mutate it.

accurateCanvasBoundsFallback( text : Text ) : Bounds2¶

Returns a new Bounds2 that is the approximate bounds of the specified Text node.

This method repeatedly renders the text into a Canvas and checks for what pixels are filled. Iteratively doing this for each bound (top/left/bottom/right) until a tolerance results in very accurate bounds of what is displayed.

NOTE: Calling code relies on the new Bounds2 instance, as they mutate it.

getVerticalBounds( font : Font ) : Bounds2¶

Returns a possibly-cached (treat as immutable) Bounds2 for use mainly for vertical parameters, given a specific Font.

Uses SVG bounds determination for this value.

approximateCanvasWidth( font : Font, renderedText : string ) : number¶

Returns an approximate width for text, determined by using Canvas' measureText().

@param font - The font of the text @param renderedText - Text to display (with any special characters replaced)

approximateHybridBounds( font : Font, renderedText : string ) : Bounds2¶

Returns a new Bounds2 that is the approximate bounds of a Text node displayed with the specified font and renderedText.

This method uses a hybrid approach, using SVG measurement to determine the height, but using Canvas to determine the width.

NOTE: Calling code relies on the new Bounds2 instance, as they mutate it.

@param font - The font of the text @param renderedText - Text to display (with any special characters replaced)

approximateDOMBounds( font : Font, element : globalThis.Node ) : Bounds2¶

Returns a new Bounds2 that is the approximate bounds of a Text node displayed with the specified font, given a DOM element

NOTE: Calling code relies on the new Bounds2 instance, as they mutate it.

@param font - The font of the text @param element - DOM element created for the text. This is required, as the text handles HTML and non-HTML text differently.

approximateImprovedDOMBounds( font : Font, element : globalThis.Node ) : Bounds2¶

Returns a new Bounds2 that is the approximate bounds of a Text node displayed with the specified font, given a DOM element

TODO: Can we use this? What are the differences? https://github.com/phetsims/scenery/issues/1581

NOTE: Calling code relies on the new Bounds2 instance, as they mutate it.

@param font - The font of the text @param element - DOM element created for the text. This is required, as the text handles HTML and non-HTML text differently.

setSVGTextAttributes( textElement : SVGTextElement, font : Font, renderedText : string )¶

Modifies an SVG text element's properties to match the specified font and text.

@param textElement @param font - The font of the text @param renderedText - Text to display (with any special characters replaced)

initializeTextBounds()¶

Initializes containers and elements required for SVG text measurement.

Source Code¶

See the source for TextBounds.ts in the scenery repository.