SilkGraphics

A PixiJS display object with a Graphics-like API. Every primitive is a signed distance field evaluated per pixel, so edges are smooth at any scale, rotation and device pixel ratio. Each object is one instanced draw call.

Shapes go on the active path and are painted by fill() or stroke(). stroke() right after fill() paints the same shapes. Redrawing every frame is cheap, because clear() keeps the buffers.

Example#

const g = new SilkGraphics()
    .roundRect(0, 0, 160, 80, 20, 0.6).fill(0x1c1c1e)
    .arc(80, 40, 28, -Math.PI / 2, Math.PI).stroke({ width: 8, cap: 'round', color: 0x30d158 });
app.stage.addChild(g);

Extends#

• Mesh<SilkGeometry, Shader>

Constructors#

Constructor#

new SilkGraphics(options?: SilkGraphicsOptions): SilkGraphics;

Parameters#

Returns#

SilkGraphics

Overrides#

Mesh<SilkGeometry, Shader>.constructor

Properties#

Accessors#

aaWidth#

Get Signature#

get aaWidth(): number;

Width of the anti-aliasing ramp in device pixels. 1 is a crisp box filter, larger is softer.

Returns

number

Set Signature#

set aaWidth(v: number): void;

Sets the anti-aliasing width of this object.

Parameters

Returns

void

dither#

Get Signature#

get dither(): number;

Dither amplitude in 8-bit steps for gradients and blurs (0 disables). Default 1.

Returns

number

Set Signature#

set dither(v: number): void;

Sets the dither amplitude of this object.

Parameters

Returns

void

minStrokePx#

Get Signature#

get minStrokePx(): number;

Strokes thinner than this many device pixels keep this width and fade instead (hairlines).

Returns

number

Set Signature#

set minStrokePx(v: number): void;

Sets the hairline threshold of this object.

Parameters

Returns

void

primitiveCount#

Get Signature#

get primitiveCount(): number;

Number of primitives (= instances in the single draw call).

Returns

number

Methods#

arc()#

arc(
   cx: number, 
   cy: number, 
   radius: number, 
   startAngle: number, 
   endAngle: number, 
   anticlockwise?: boolean
): this;

Open circular arc (stroke it). Angles work as in canvas. It starts its own subpath.

Parameters#

Returns#

this

arcSweep()#

arcSweep(
   cx: number, 
   cy: number, 
   radius: number, 
   startAngle: number, 
   sweep: number
): this;

Open arc given start angle and signed sweep (positive = clockwise on screen).

Parameters#

Returns#

this

area()#

area(
   points: PointsInput, 
   lower: number | PointsInput, 
   options?: AreaOptions
): this;

Area under a series. Fill it, then stroke draws the top line. Points must be sorted by x.

Parameters#

Returns#

this

beginPath()#

beginPath(): this;

Starts a new, empty path (shapes drawn so far are kept).

Returns#

this

bezierCurveTo()#

bezierCurveTo(
   cp1x: number, 
   cp1y: number, 
   cp2x: number, 
   cp2y: number, 
   x: number, 
   y: number
): this;

Cubic Bezier to (x, y), flattened adaptively.

Parameters#

Returns#

this

circle()#

circle(
   x: number, 
   y: number, 
   radius: number
): this;

Circle centred on (x, y).

Parameters#

Returns#

this

clear()#

clear(): this;

Removes everything. Keeps the buffers for reuse, so redrawing every frame is cheap.

Returns#

this

closePath()#

closePath(): this;

Closes the current subpath back to its first point.

Returns#

this

containsPoint()#

containsPoint(point: PointData): boolean;

Hit test against the real shapes (local coordinates): rings are hollow, lines count only within their stroke. Used by Pixi’s event system when eventMode is set.

Parameters#

Returns#

boolean

Overrides#

Mesh.containsPoint

destroy()#

destroy(options?: DestroyOptions): void;

Destroys this sprite renderable and optionally its texture.

Parameters#

Returns#

void

Example#

mesh.destroy();
mesh.destroy(true);
mesh.destroy({ texture: true, textureSource: true });

Overrides#

Mesh.destroy

ellipse()#

ellipse(
   x: number, 
   y: number, 
   rx: number, 
   ry: number
): this;

Ellipse centred on (x, y) with an exact distance field (no polygon approximation).

Parameters#

Returns#

this

fill()#

fill(style?: FillInput): this;

Fills the shapes of the active path (Pixi semantics: rect().circle().fill() fills both).

Parameters#

Returns#

this

heart()#

heart(
   cx: number, 
   cy: number, 
   size: number, 
   rounding?: number
): this;

Heart icon centred at (cx, cy), size wide. rounding (0..0.3) puffs it up.

Parameters#

Returns#

this

line()#

line(
   x0: number, 
   y0: number, 
   x1: number, 
   y1: number
): this;

Straight line (stroke it).

Parameters#

Returns#

this

lineTo()#

lineTo(x: number, y: number): this;

Straight segment from the current point to (x, y).

Parameters#

Returns#

this

moveTo()#

moveTo(x: number, y: number): this;

Starts a new subpath at (x, y). Paths are stroke-only.

Parameters#

Returns#

this

pill()#

pill(
   x: number, 
   y: number, 
   w: number, 
   h: number
): this;

Rounded rect with fully round ends.

Parameters#

Returns#

this

poly()#

poly(points: PointsInput, close?: boolean): this;

Pixi-style polygon path. Only strokes are supported for arbitrary paths.

Parameters#

Returns#

this

polyline()#

polyline(points: PointsInput, options?: PolylineOptions): this;

Polyline through points (stroke it), optionally smoothed.

Parameters#

Returns#

this

quadraticCurveTo()#

quadraticCurveTo(
   cpx: number, 
   cpy: number, 
   x: number, 
   y: number
): this;

Quadratic Bezier to (x, y), flattened adaptively.

Parameters#

Returns#

this

rect()#

rect(
   x: number, 
   y: number, 
   w: number, 
   h: number
): this;

Axis-aligned rectangle (rotated by the current transform, if any).

Parameters#

Returns#

this

regularPoly()#

regularPoly(
   cx: number, 
   cy: number, 
   radius: number, 
   sides: number, 
   rotation?: number, 
   cornerRadius?: number
): this;

Regular polygon (first vertex points up).

Parameters#

Returns#

this

resetTransform()#

resetTransform(): this;

Resets the current transform to identity.

Returns#

this

restore()#

restore(): this;

Pops the transform pushed by the matching save().

Returns#

this

rotateTransform()#

rotateTransform(angle: number): this;

Rotates the coordinate system by angle radians (clockwise on screen). Rotated primitives stay exact.

Parameters#

Returns#

this

roundRect()#

roundRect(
   x: number, 
   y: number, 
   w: number, 
   h: number, 
   radius?: number | number[], 
   smoothing?: number
): this;

Rectangle with rounded corners. smoothing above 0 turns the corners into squircles.

Parameters#

Returns#

this

save()#

save(): this;

Pushes the current transform (Pixi GraphicsContext API).

Returns#

this

scaleTransform()#

scaleTransform(x: number, y?: number): this;

Scales the coordinate system. Stroke widths, dashes and blur scale with its uniform part.

Parameters#

Returns#

this

sector()#

sector(
   cx: number, 
   cy: number, 
   radius: number, 
   startAngle: number, 
   endAngle: number, 
   innerRadius?: number, 
   cornerRadius?: number
): this;

Closed annular sector: pie slices, donut segments, gauge segments.

Parameters#

Returns#

this

setTransform()#

setTransform(
   a: number, 
   b: number, 
   c: number, 
   d: number, 
   tx: number, 
   ty: number
): this;

Replaces the current transform with the matrix [a c tx; b d ty].

Parameters#

Returns#

this

star()#

star(
   cx: number, 
   cy: number, 
   points: number, 
   radius: number, 
   innerRadius?: number, 
   rotation?: number, 
   cornerRadius?: number
): this;

Star with points tips. innerRadius defaults to a classic star.

Parameters#

Returns#

this

stroke()#

stroke(style?: StrokeInput): this;

Strokes the shapes of the active path. Right after fill() it merges into the same instances.

Parameters#

Returns#

this

translateTransform()#

translateTransform(x: number, y?: number): this;

Moves the coordinate system. Shapes drawn next are offset by (x, y).

Parameters#

Returns#

this

triangle()#

triangle(
   x0: number, 
   y0: number, 
   x1: number, 
   y1: number, 
   x2: number, 
   y2: number, 
   cornerRadius?: number
): this;

Triangle through three points, with optionally rounded corners.

Parameters#

Returns#

this