CanvasGrid

import { CanvasGrid } from 'pixi-silk/ui/grid';

Experimental

An unbounded grid behind a Camera’s world. Levels nest (1, 10, 100 by default) and fade in and out with the zoom. The grid lives in screen space and only draws what shows. All vertical lines of a level are one dashed stroke, and so are the horizontal ones. Dots take one stroke per row.

Add it under the world, in screen space: app.stage.addChild(grid, world, overlay). It covers the camera’s element from (0, 0), ignores pointer events, and cannot be rotated with the view.

Experimental: the API may change in a minor release.

Extends#

• Container

Constructors#

Constructor#

new CanvasGrid(options: CanvasGridOptions): CanvasGrid;

Experimental

Parameters#

Returns#

CanvasGrid

Overrides#

Container.constructor

Properties#

Accessors#

levels#

Get Signature#

get levels(): GridLevel[];

Experimental

The levels of the current style at the camera’s zoom. Computed on each read.

Returns

GridLevel[]

shapes#

Get Signature#

get shapes(): number;

Experimental

How many shapes the last frame drew, each one silk instance. For tests and stats.

Returns

number

Methods#

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Removes all internal references and listeners as well as removes children from the display list. Do not use a Container after calling destroy.

Parameters#

Returns#

void

Example#

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

Overrides#

Container.destroy

refresh()#

refresh(): this;

Experimental

Redraws on the next frame. Camera moves and resizes the camera sees redraw by themselves.

Returns#

this

tick()#

tick(dt: number): boolean;

Experimental

Advances fades by dt seconds (clamped to 0..0.1) and redraws. Only needed with ticker: null.

Parameters#

Returns#

boolean