Render a string to a vectorized cell complex
npm install vectorize-textvectorize-text
==============
Convert a string of text into a vectorized geometric representation. Works in both node.js and browserify.
This module is capable of outputting geometry in several formats.
The default (and fastest) output from the module is a planar graph:
``javascript
var vectorizeText = require("vectorize-text")
var graph = vectorizeText("Hello world! 你好", {
width: 500,
textBaseline: "hanging"
})
var svg = ['")
console.log(svg.join(""))
`
Output:
You can also configure the module to emit polygons instead:
`javascript
var vectorizeText = require("vectorize-text")
var polygons = vectorizeText("Hello world! 你好", {
polygons: true,
width: 500,
textBaseline: "hanging"
})
var svg = []
svg.push('')
console.log(svg)
`
Output:
Finally, the module can output a triangulation (which is compatible with WebGL for example):
`javascript
var vectorizeText = require("vectorize-text")
var complex = vectorizeText("Hello world! 你好", {
triangles: true,
width: 500,
textBaseline: "hanging"
})
var svg = ['")
console.log(svg)
`
Output:
`sh`
npm install vectorize-text
#### require("vectorize-text")(string[,options])
Renders a string to a 2D cell complex
* string is a string of text (single line)options
* is an optional object of parameters
+ options.font is the font family to use (default: "normal")options.fontStyle
+ if set, determines the font-styleoptions.fontVariant
+ if set, determines the font-variantoptions.fontWeight
+ if set, determines the font-weightoptions.size
+ is the font-size used for the rasterization step (determines level of detail of the mesh)options.textBaseline
+ determines the baseline, same semantics as the canvas textBaseline property. Default: "alphabetic"options.textAlign
+ determines the alignment for the text, same semantics as canvas textAlign. Default: "start"options.lineHeight
+ determines the height of a line. Default: 1.0options.width
+ determines the width of the text, overrides lineHeight if specifiedoptions.height
+ determines the height of the text, overrides lineHeight if specifiedoptions.triangles
+ if set, then output a triangulationoptions.polygons
+ if set, output a list of polygonsoptions.orientation
+ determines the orientation of any output triangles/polygon curves. Must be either "cw" for clockwise or "ccw" for counter clockwise. Default is "cw".options.canvas
+ an optional canvas elementoptions.context
+ an optional canvas 2D contextoptions.styletags.breaklines
+ if set, break-line tags i.e. < br > could be used in the input to enter new lines.options.styletags.bolds
+ if set, parts of the input i.e. between < b > and < /b > would be presented bold.options.styletags.italics
+ if set, parts of the input i.e. between < i > and < /i > would be presented italic.options.styletags.superscripts
+ if set, parts of the input i.e. between < sup > and < /sup > would be presented in as superscript. Multiple superscipts are also allowded. For example Line 0Line 1Line 2.options.styletags.subscripts
+ if set, parts of the input i.e. between < sub > and < /sub > would be presented in as subscript. Multiple subscipts are also allowded. For example: Line 0Line 1Line 2. Note: it is also possible to combine sub and superscripts: ABC.
Returns The returned value depends on the type of geometry
Planar graph*: This is the fastest output format. A JSON object encoding the embedding of an oriented planar graph, with the following properties:
+ edges are the edges of the graphpositions
+ are the positions
Polygon list*: A list of complex polygons encoded as arrays of positions. This format is most suitable for SVG and GeoJSON output
Triangulation*: This format may be most suitable for WebGL/rendering applications. A 2D oriented simplicial complex encoded as a list of cells and positions, represented by a JSON object with two properties
+ cells are the faces of the triangulation, encoded as triples of indices into the vertex arraypositions` are the positions of the vertices in the triangulation
+
Note In node.js, this library requires Cairo. For more information on how to set this up, look at the documentation for the canvas module.