@etpinard/gl-text NPM

gl-text

Render bitmap text with WebGL.

Usage

const Text = require('gl-text')

let text1 = new Text()

text1.update({
	position: [50, 50],
	text: 'ABC',
	font: '16px Helvetica, sans-serif'
})
text1.render()

// create another text renderer on the same context
let text2 = new Text(text1.gl)
text2.update({
	font: {
		family: ['Helvetica', 'Arial', 'sans-serif'],
		size: '1rem'
	}
})

API

`let text = new Text(gl|regl|canvas|container|options?)`

Create text renderer instance for the WebGL context gl, regl instance, canvas/container element or based on options:

Option	Meaning
`regl`	Existing `regl` instance. By default new one is created.
`gl`/`context`	Existing WebGL context. By default new one is created.
`canvas`	Existing `canvas` element.
`container`	Existing `container` element. By default new canvas is created within the container.

No arguments call creates new fullscreen canvas.

`text.update(options)`

Update state of a Text instance.

Option	Description
`text`	Text string or array of strings to display.
`position`	Position of the text on the screen within the `range`, a couple `[x, y]` or array `[[x ,y], [x, y], ...]` corresponding to text.
`align`	Horizontal alignment relative to the `position`. Can be one of `left`, `right`, `center`/`middle`, `start`, `end`, or a number of em units. By default `left`. Can be an array, corresponding to text.
`baseline`	Vertical alignment value, by default `middle`. Can be a string one of `top`, `hanging`, `middle`, `alphabetic`, `ideographic`, `bottom` etc. (see font-measure) or a number of em units, denoting `0` as alphabetic baseline. Can be an array corresponding to text.
`color`	Text color or array of colors. By default `black`.
`font`	Font family, CSS font string or an object with font properties like `{family, size, style}`, see css-font. Can be an array.
`fontSize`/`em`	Font-size, can be changed independently of `font`.
`kerning`	Enable font kerning, by default `true`. Disable for the case of monospace fonts. See detect-kerning package.
`offset`	Shift `position` by the number of ems. Useful for organizing multiple lines, indentation, sub/sup script etc. Does not get affected by `position` change. Can be a number for x-offset only or a couple `[x, y]` for single position or array `[[x, y], [x, y], ...]` for multiple positions.
`range`	Data area corresponding to position in viewport. Useful for organizing zoom/pan. By default is the same as the viewport `[0, 0, canvas.width, canvas.height]`.
`scale`/`translate`	An alternative to `range`.
`viewport`	Visible area within the canvas, an array `[left, top, width, height]` or rectangle `{x, y, width, height}`, see parse-rect.

`text.render()`

Draw text.

`text.destroy()`

Dispose text renderer.

Properties

text.gl - WebGL context.
text.canvas - canvas element.
text.regl - regl instance.

License

Development supported by plot.ly.

regl plotly text gl-text typography font

color-normalize css-font detect-kerning es6-weak-map flatten-vertex-data font-atlas font-measure gl-util is-plain-obj object-assign parse-rect parse-unit pick-by-alias regl to-px typedarray-pool

@infinitebrahmanuniverse/nolb-_et @everything-registry/sub-chunk-300 @zalastax/nolb-_et viettest1111.js

1.1.6

7 years ago