From cb70986356b57689a5bfe3dcbc085248aa6fe081 Mon Sep 17 00:00:00 2001 From: Chris Loer Date: Tue, 27 Jun 2017 10:38:24 -0700 Subject: [PATCH] Add basic usage info to README. --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 6d9444a..17a382e 100644 --- a/README.md +++ b/README.md @@ -6,3 +6,17 @@ from system fonts on the browser using Canvas 2D and This is very useful for [rendering text with WebGL](https://www.mapbox.com/blog/text-signed-distance-fields/). Demo: http://mapbox.github.io/tiny-sdf/ + +## Usage +Create a TinySDF for drawing SDFs based on font parameters: + + var fontsize = 24; // Pixel font size + var buffer = 3; // Pixel whitespace buffer around glyph + var radius = 8; // Lower = "sharper", higher = "fuzzier" + var cutoff = 0.25 // Across the board alpha channel reduction + // Reduces low-alpha pixels to zero, "thins" SDF overall + + var fontFamily = 'sans-serif'; // css font-family to use + var tinySDFGenerator = new TinySDF(fontsize, buffer, radius, cutoff, fontFamily); + + var oneSDF = tinySDFGenerator.draw('泽');