Skip to content

Latest commit

 

History

History
87 lines (61 loc) · 3.63 KB

readme.md

File metadata and controls

87 lines (61 loc) · 3.63 KB
Raw

gl-text unstable

Render bitmap text with WebGL.

Usage

npm install gl-text

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.