JarCastingTinySDF
TinySDF is a tiny and fast JavaScript library for generating SDF (signed distance field) from system fonts on the browser using Canvas 2D and Felzenszwalb/Huttenlocher distance transform. This is very useful for rendering text with WebGL.
This implementation is based directly on the algorithm published in the Felzenszwalb/Huttenlocher paper, and is not a port of the existing C++ implementation provided by the paper's authors.
Demo: http://mapbox.github.io/tiny-sdf/
Usage
Create a TinySDF for drawing SDFs based on font parameters:
var fontsize = 24; // Font size in pixels
var buffer = 3; // Whitespace buffer around a glyph in pixels
var radius = 8; // How many pixels around the glyph shape to use for encoding distance
var cutoff = 0.25 // How much of the radius (relative) is used for the inside part the glyph
var fontFamily = 'sans-serif'; // css font-family
var fontWeight = 'normal'; // css font-weight
var tinySDFGenerator = new TinySDF(fontsize, buffer, radius, cutoff, fontFamily, fontWeight);
var oneSDF = tinySDFGenerator.draw('泽');
// returns a Uint8ClampedArray array of alpha values (0–255) for a size x size square grid
// To generate glyphs with variable advances (e.g. non-ideographic glyphs),
// use `drawWithMetrics`
var sdfWithMetrics = tinySDFGenerator.drawWithMetrics('A');
// sdfWithMetrics.data is the same as in `draw`, except the size may be clipped to fit the glyph
// sdfWithMetrics.metrics contains:
// top: Top alignment: glyph ascent - 'top' = baseline
// left: Currently hardwired to 0
// width: Width of rasterized portion of glyph
// height
// advance: Layout advance
// sdfWidth: Width of the returned bitmap, usually but not always width + 2 * buffer
// sdfHeight
// fontAscent: Maximum ascent of font from baseline
