npm

Check out our latest tech talk, "JavaScript Supply Chain Security" presented by VP of Security, Adam Baldwin.Watch it here »

@mapbox/tiny-sdf

1.1.1 • Public • Published

TinySDF

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

install

npm i @mapbox/tiny-sdf

Downloadsweekly downloads

135,754

version

1.1.1

license

BSD-2-Clause

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability