Skip to content
pixi-silk
GitHub repository
Function

sdfFromAlpha

import { sdfFromAlpha } from 'pixi-silk/text';
function sdfFromAlpha(
   alpha: ArrayLike<number>, 
   width: number, 
   height: number, 
   radius: number, 
   cutoff: number, 
   channels?: 1 | 4, 
   out?: Uint8Array
): Uint8Array;

Turns an anti-aliased coverage bitmap into an 8-bit signed distance field.

alpha holds width * height coverage bytes, row by row. With channels 4 it holds RGBA pixels as getImageData returns them, and the alpha byte is read. Each output byte encodes the distance to the edge: 255 * (1 - cutoff) sits on the edge, larger is inside, and every 255 / radius steps is one pixel. Distances past radius * (1 - cutoff) outside or radius * cutoff inside clamp.

radius is the distance in pixels that the byte range spans. cutoff is the share of it spent inside the shape: 0.25 keeps three quarters for outlines and glows. Pass out to reuse an array.

Parameters#

ParameterTypeDefault value
alphaArrayLike<number>undefined
widthnumberundefined
heightnumberundefined
radiusnumberundefined
cutoffnumberundefined
channels1 | 41
outUint8Array...

Returns#

Uint8Array