pixi-silk/ui/grid

CanvasGrid: dots or lines that follow the camera.

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

Classes#

Class	Description
CanvasGrid	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.

Interface	Description
CanvasGridOptions	Options of CanvasGrid. In `dots` style, `alpha` defaults to 0.32 and `fade` to `[12, 160]`, so dots read as strong as lines.
CanvasGridState	The reactive state of a CanvasGrid. Write to these signals to change the grid.
GridLevel	One level of a CanvasGrid, as gridLevels returns it.
GridLevelOptions	Options of gridLevels.

Type Alias	Description
GridStyle	How a CanvasGrid draws: thin `lines` or `dots` at the crossings.

Function	Description
gridLevels	The grid levels to draw at `zoom`, finest first. Each level is `ratio` times the one below. A level fades in as its spacing grows from `fade[0]` to `fade[1]` pixels. Levels nest, so a line of a coarse level is also drawn by the finer ones: each level’s `alpha` is what it adds on top. Levels that would add almost nothing are left out. Returns an empty array for a zoom or unit of 0 or less.