1.1.6 • Published 6 years ago

@etpinard/gl-text v1.1.6

Weekly downloads
181
License
MIT
Repository
github
Last release
6 years ago

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:

OptionMeaning
reglExisting regl instance. By default new one is created.
gl/contextExisting WebGL context. By default new one is created.
canvasExisting canvas element.
containerExisting 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.

OptionDescription
textText string or array of strings to display.
positionPosition of the text on the screen within the range, a couple [x, y] or array [[x ,y], [x, y], ...] corresponding to text.
alignHorizontal 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.
baselineVertical 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.
colorText color or array of colors. By default black.
fontFont family, CSS font string or an object with font properties like {family, size, style}, see css-font. Can be an array.
fontSize/emFont-size, can be changed independently of font.
kerningEnable font kerning, by default true. Disable for the case of monospace fonts. See detect-kerning package.
offsetShift 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.
rangeData 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/translateAn alternative to range.
viewportVisible 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.