Ruler

import { Ruler } from 'pixi-silk/ui/ruler';

Experimental

Top and left rulers for a Camera. Ticks and labels adapt to the zoom in 1, 2, 5 steps, and labels fade as steps change. The highlighted extent shows as a band with its edges labelled in the accent colour. A marker follows the pointer.

Values are world units, through format for units or rounding. Put the ruler in screen space, above the world, at (0, 0) of the camera’s element. It catches presses on its bars, so a Guides layer can drag guides out of it. A rotated world is not supported.

Experimental: the API may change in a minor release.

Extends#

Container

Constructors#

Constructor#

new Ruler(options: RulerOptions): Ruler;

Experimental

Parameters#

Parameter	Type
`options`	`RulerOptions`

Returns#

Ruler

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`state`	`readonly`	`RulerState`	`Experimental` Pointer and highlighted extent, as signals.	ui/ruler.ts:111

Accessors#

labels#

Get Signature#

get labels(): string[];

Experimental

Texts of the tick labels shown now, not counting ones fading out or the edge labels. Allocates.

Returns

string[]

size#

Get Signature#

get size(): number;

Experimental

Bar thickness in CSS pixels, from RulerOptions.size.

Returns

number

step#

Get Signature#

get step(): number;

Experimental

The distance between labels at the camera’s zoom now, in world units.

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#

Parameter	Type	Description
`options?`	`DestroyOptions`	Options parameter. A boolean will act as if all options have been set to that value

Returns#

void

Example#

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

Overrides#

Container.destroy

highlight()#

highlight(target: RulerTarget | null): this;

Experimental

Highlights the extent of objects or of a world rectangle, with a fade. null clears it. While it follows objects the ruler redraws every frame.

Parameters#

Parameter	Type
`target`	`RulerTarget` \| `null`

Returns#

this

side()#

side(p: PointData): RulerSide | null;

Experimental

Which bar a point in the ruler’s local space (CSS pixels) is on, or null.

Parameters#

Parameter	Type
`p`	`PointData`

Returns#

RulerSide | null

tick()#

tick(dt: number): boolean;

Experimental

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

Parameters#

Parameter	Type
`dt`	`number`

Returns#

boolean