gophergfx
    Preparing search index...

    Class Text

    The GopherGfx.Text class is a special type of texture that renders text generated by the text routines built into the browser's canvas into a computer graphics texture with a specified size in pixels. Many options are available for the style of the text because everything that is supported by the browser's built-in text rendering can be used. (See documentation on the constructor for links to relevant options.)

    To draw the text, the text texture is applied just like any other texture to a mesh added to the scene. Just as when using any other texture, the mesh must have texture coordinates defined. And, the Text object is simply applied to the mesh material's texture.

          const helloWorldMesh = gfx.Geometry2Factory.createRect(0.4, 0.1);
          this.scene.add(helloWorldMesh);
          const helloWorldTexture = new gfx.Text("Hello World", 256, 32, '32px monospace', gfx.Color.WHITE);
          helloWorldMesh.material.texture = helloWorldTexture;
          helloWorldMesh.material.color = gfx.Color.RED;

    In the texture image that is generated, the pixels belonging to letters will colored according to the fill style, and the other pixels will be transparent.

    To get the best color mixing when letters overlap on the screen, set the fill style to gfx.Color.WHITE when creating the texture, and then adjust the color using the mesh material's color property, like in the example above, where material.color is set to red.

    Hierarchy (View Summary)

    Index
    constructor
    align backgroundStyleString baseline fillStyleString font gl height strokeStyleString strokeWidth text texture width
    imageLoaded imageNotFound load setFullImageData setMagFilter setMinFilter setSubImageData setWrapping updateTextureImage

    • Constructor for Text class. The text is rendered using the browser's canvas element and then copyied into a texture, so the parameters are based on what is understood by CanvasRenderingContext2D. Shortcuts are provided for fillStyle, backgroundStyle, and strokeStyle to use the gfx.Color types if that is more convenient for your application.

      Parameters

      • text: string

        The text to be rendered

      • width: number

        The width of the text canvas (in pixels)

      • height: number

        The height of the text canvas (in pixels)

      • font: string = '24px monospace'

        The font style of the text. Can be a gfx.Color or see additional options for canvas.font.

      • fillStyle: string | Color = 'black'

        The fill style of the text. Can be a gfx.Color or see additional options for canvas.fillStyle.

      • backgroundStyle: string | Color = ''

        The fill style of the background. Can be a gfx.Color or see additional options for canvas.fillStyle.

      • strokeStyle: string | Color = ''

        The stroke style of the text. Can be a gfx.Color or see additional options for canvas.strokeStyle.

      • strokeWidth: number = 1

        The stroke width of the text.

      • align: CanvasTextAlign = 'center'

        The alignment of the text. See possible values in canvas.textAlign

      • baseline: CanvasTextBaseline = 'middle'

        The baseline of the text. See possible values in canvas.textBaseline.

      Returns Text

    align: CanvasTextAlign
    backgroundStyleString: string
    baseline: CanvasTextBaseline
    fillStyleString: string
    font: string
    gl: WebGL2RenderingContext
    height: number

    The height of the original (non-mipmapped) texture image data or 'undefined' if the image has not yet completed loading.

    strokeStyleString: string
    strokeWidth: number

    text

    text: string
    texture: WebGLTexture | null

    The internal object used by WebGL to draw this texture -- provides each texture a unique id.

    width: number

    The width of the original (non-mipmapped) texture image data or 'undefined' if the image has not yet completed loading.

    • Callback function for image loaded events

      Parameters

      • image: HTMLImageElement

        HTML DOM image element produced by loading the image texture

      • url: string

        Original URL the image was loaded from (used as an internal identifier for the image asset)

      Returns void

    • Callback function for when the requested image cannot be found (load error)

      Parameters

      • url: string

        Original URL the image was loaded from (used as an internal identifier for the errored image asset)

      Returns void

    • Load an image into this texture.

      Parameters

      • url: string

        URL to load the texture from (can be absolute, e.g. "http://unlikely-url.com/some-image.jpg", or relative, e.g. "./some-image.jpg"). Can be null to start out with, in which case the texture will be empty.

      Returns void

    • Copies the pixel data from an ImageData source into the texture

      Parameters

      • imageData: ImageData

        An ImageData object with the same width and height as the texture

      Returns void

    • Control the magnification filter (sampling if a texture is shown at greater than its original size)

      Parameters

      • linear: boolean

        Use linear filtering

      Returns void

    • Control the minification filter (sampling if a texture is shown at less than its original size)

      Parameters

      • linear: boolean

        Use linear filtering

      • mipmap: boolean

        Use mipmapping

      Returns void

    • Copies the pixel data from an ImageData source into a portion of the texture, placing it as a sub-image within the texture

      Parameters

      • imageData: ImageData

        An ImageData object with width and height that are the same size or smaller than the texture

      • xOffset: number

        An offset in the x-direction within the texture where the top-left corner of imageData should be placed

      • yOffset: number

        An offset in the y-direction within the texture where the top-left corner of imageData should be placed

      Returns void

    • Set the wrapping mode for the texture.

      Parameters

      • repeat: boolean

        Repeat the texture beyond its bounds or just show it once

      Returns void

    • Updates the texture image of the Text class

      Sets the width and height of the canvas, font, text alignment, and baseline. Fills the canvas with the background style if specified. Fills the text with the fill style if specified. Strokes the text with the stroke style and stroke width if specified. Binds the texture and generated mipmap.

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Methods