1.1.6 • Published 6 years ago
@etpinard/gl-text v1.1.6
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
© 2018 Dmitry Yv. MIT License
Development supported by plot.ly.
1.1.6
6 years ago