vectorize-text
Convert a string of text into a vectorized geometric representation. Works in both node.js and browserify.
Example
This module is capable of outputting geometry in several formats.
Planar graphs
The default (and fastest) output from the module is a planar graph:
var vectorizeText = require("vectorize-text")
var graph = vectorizeText("Hello world! 你好", {
width: 500,
textBaseline: "hanging"
})
var svg = ['<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="80" >']
graph.edges.forEach(function(e) {
var p0 = graph.positions[e[0]]
var p1 = graph.positions[e[1]]
svg.push('<line x1="' + p0[0] + '" y1="' + p0[1] +
'" x2="' + p1[0] + '" y2="' + p1[1] +
'" stroke-width="1" stroke="black" />')
})
svg.push("</svg>")
console.log(svg.join(""))
Output:
Polygons
You can also configure the module to emit polygons instead:
var vectorizeText = require("vectorize-text")
var polygons = vectorizeText("Hello world! 你好", {
polygons: true,
width: 500,
textBaseline: "hanging"
})
var svg = []
svg.push('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="80" >')
polygons.forEach(function(loops) {
svg.push('<path d="')
loops.forEach(function(loop) {
var start = loop[0]
svg.push('M ' + start[0] + ' ' + start[1])
for(var i=1; i<loop.length; ++i) {
var p = loop[i]
svg.push('L ' + p[0] + ' ' + p[1])
}
svg.push('L ' + start[0] + ' ' + start[1])
})
svg.push('" fill-rule="even-odd" stroke-width="1" fill="red"></path>')
})
svg.push('</svg>')
console.log(svg)
Output:
Triangulations
Finally, the module can output a triangulation (which is compatible with WebGL for example):
var vectorizeText = require("vectorize-text")
var complex = vectorizeText("Hello world! 你好", {
triangles: true,
width: 500,
textBaseline: "hanging"
})
var svg = ['<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="80" >']
complex.cells.forEach(function(c) {
for(var j=0; j<3; ++j) {
var p0 = complex.positions[c[j]]
var p1 = complex.positions[c[(j+1)%3]]
svg.push('<line x1="' + p0[0] + '" y1="' + p0[1] +
'" x2="' + p1[0] + '" y2="' + p1[1] +
'" stroke-width="1" stroke="black" />')
}
})
svg.push("</svg>")
console.log(svg)
Output:
Install
npm install vectorize-text
API
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-style -
options.fontVariant
if set, determines the font-variant -
options.fontWeight
if set, determines the font-weight -
options.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.0
-
options.width
determines the width of the text, overrideslineHeight
if specified -
options.height
determines the height of the text, overrideslineHeight
if specified -
options.triangles
if set, then output a triangulation -
options.polygons
if set, output a list of polygons -
options.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 element -
options.context
an optional canvas 2D context -
options.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 graph -
positions
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 array -
positions
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.
Credits
(c) 2014 Mikola Lysenko. MIT License