Migrating from Graphics
SilkGraphics follows the PixiJS v8 Graphics API: shapes on a path, fill and stroke, transforms. See what carries over, what differs and what to add.
Updated pixi-silk 1.0.1View as Markdown
Most Graphics code runs after you rename the class.
- const g = new Graphics();
+ const g = new SilkGraphics();
g.roundRect(0, 0, 200, 80, 16).fill(0x1c1c1e).stroke({ width: 2, color: 0xffffff });
g.circle(40, 40, 12).fill({ color: 0xff375f, alpha: 0.8 });
g.moveTo(0, 100).lineTo(200, 120).stroke({ width: 1, color: 0xffffff });The shapes go on the active path as before, and fill() and stroke() paint them. A
stroke() right after a fill() strokes the same shapes.
What carries over#
| Graphics | SilkGraphics |
|---|---|
rect, roundRect, circle, ellipse, poly, regularPoly | the same calls |
moveTo, lineTo, quadraticCurveTo, bezierCurveTo, arc, closePath, beginPath | the same calls |
fill(color), fill({ color, alpha }) | the same, plus gradient, blur and spread |
stroke({ width, color, alpha, alignment, cap, join, miterLimit }) | the same. alignment also takes 'inside', 'center' and 'outside' |
save, restore, translateTransform, rotateTransform, scaleTransform, setTransform, resetTransform | the same calls |
clear() | the same, and it keeps the GPU buffers for the next frame |
It is a regular display object. Position it, mask it, filter it or render it into a texture. Set
eventMode to get pointer events, and hit tests use the real shape, so a ring is hollow.
What differs#
| Graphics | SilkGraphics |
|---|---|
holes with cut() | a free path fills even-odd, so an inner subpath is a hole. cut() does not exist |
texture fills | not supported. Use gradients, or a Sprite |
svg(markup) parses a whole SVG | svgPath(d) takes one path’s d attribute |
| batched with other Graphics | one draw call per object, or per run of objects after enableSilkBatching() |
GraphicsContext shared between objects | no shared context. Redraw each object, it is cheap |
What to add#
These have no Graphics equivalent.
g.roundRect(0, 0, 160, 96, [24, 24, 8, 8], 0.6).fill(0x2c2c2e); // per-corner radii, squircle smoothing
g.arcSweep(200, 48, 36, -Math.PI / 2, Math.PI).stroke({ width: 10, cap: 'round', color: 0x30d158 });
g.polyline([0, 140, 60, 120, 120, 150, 180, 110], { smooth: 'monotone' }).stroke({ width: [2, 8], color: 0x0a84ff });
g.circle(260, 140, 20).fill({ color: 0xff9f0a, blur: 12 }); // a glow, no filter
g.rect(300, 110, 60, 60).stroke({ width: 2, color: 0xffffff, dash: [6, 4] });That is a squircle card with two rounded and two tighter corners, a gauge arc, a smoothed line that tapers from 2 to 8 px, a blurred dot and a dashed square. Shapes, Lines & paths and Strokes & dashes cover each call.
Migrate one screen at a time#
Graphics and SilkGraphics sit in the same scene. Swap the objects that show edges first:
large curves, thin lines and anything under a zooming camera or a filter. Leave texture fills and
SVG files on Graphics.
API reference: SilkGraphics