Measure

import { Measure } from 'pixi-silk/ui/measure';

Experimental

Distances and sizes for editors, drawn on an overlay.

Measure.between shows the redlines from one object to another (see redlines). Measure.size puts a W x H badge under an object.

Values are in the measured space (the world under a camera), so zooming never changes them. Put the overlay beside the world, not inside it, so lines and labels keep their size on screen. Both follow their objects every frame while shown, and grow in when the pair changes. Rotated objects are measured by their axis-aligned box. The overlay ignores pointer events.

Experimental: the API may change in a minor release.

Extends#

• Container

Constructors#

Constructor#

new Measure(options?: MeasureOptions): Measure;

Experimental

Parameters#

Returns#

Measure

Overrides#

Container.constructor

Accessors#

lines#

Get Signature#

get lines(): readonly {
  value: number;
  x0: number;
  x1: number;
  y0: number;
  y1: number;
}[];

Experimental

The redlines of the last frame, in the measured space. Empty while nothing is measured.

Returns

readonly { value: number; x0: number; x1: number; y0: number; y1: number; }[]

Methods#

between()#

between(a: MeasureTarget | null, b: MeasureTarget | null): this;

Experimental

Shows the distances from a to b, animated. null for either fades them out. The same pair again is a no-op.

Parameters#

Returns#

this

clear()#

clear(): this;

Experimental

Fades out the redlines and the size badge.

Returns#

this

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

size()#

size(target: MeasureTarget | null): this;

Experimental

Shows a W x H badge under target, in the measured space. null fades it out.

Parameters#

Returns#

this

tick()#

tick(dt: number): boolean;

Experimental

Advances by dt seconds, clamped to 0..0.1. Only needed with ticker: null. Returns true while something animates or shows.

Parameters#

Returns#

boolean