PathGizmo

import { PathGizmo } from 'pixi-silk/ui/pathgizmo';

Experimental

Edits a cubic bezier path: anchors, handles and segments, plus a pen tool that adds anchors.

• Click an anchor to select it, Shift + click to add or remove it, drag to move the selection.
• Drag a handle to bend a curve. Alt + drag breaks the symmetry. Double-click an anchor to switch it between a corner and a smooth point.
• Click a segment to add an anchor there. The curve keeps its shape.
• Delete or Backspace removes the selected anchors. Arrow keys nudge them.
• The pen tool adds anchors: click for corners, drag for curves, click the first anchor to close. Escape or Enter stops.

Put the gizmo in a screen-space overlay. With space set to a camera’s world it follows pans and zooms, and anchors and handles keep their size on screen. Every edit is one undoable step when a history is given. The gizmo edits one path at a time and does not draw its fill or stroke: draw the path yourself from state.path.

Experimental: the API may change in a minor release.

Extends#

• Container

Constructors#

Constructor#

new PathGizmo(options?: PathGizmoOptions): PathGizmo;

Experimental

Parameters#

Returns#

PathGizmo

Overrides#

Container.constructor

Properties#

Accessors#

path#

Get Signature#

get path(): BezierPath;

Experimental

The path being edited, the same object as state.path.value. Treat it as read only.

Returns

BezierPath

selected#

Get Signature#

get selected(): readonly number[];

Experimental

Selected anchor indices.

Returns

readonly number[]

Methods#

deleteSelected()#

deleteSelected(): void;

Experimental

Removes the selected anchors as one undoable step. No-op when nothing is selected.

Returns#

void

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Stops the animation and the key listener.

Parameters#

Returns#

void

Overrides#

Container.destroy

edit()#

edit(
   label: string, 
   fn: (path: BezierPath) => BezierPath, 
   selected?: readonly number[]
): void;

Experimental

Applies an edit as one undoable step labelled label. fn gets the path and returns a new one, without mutating it. selected replaces the selection, if given.

Parameters#

Returns#

void

finish()#

finish(): void;

Experimental

Stops the pen and leaves the path open.

Returns#

void

insertAt()#

insertAt(segment: number, t: number): number;

Experimental

Adds an anchor on segment segment at t (0 to 1) without changing the shape, selects it and returns its index.

Parameters#

Returns#

number

nudge()#

nudge(dx: number, dy: number): void;

Experimental

Moves the selected anchors by (dx, dy). Quick repeats merge into one undo step.

Parameters#

Returns#

void

pick()#

pick(x: number, y: number): PathHit | null;

Experimental

What is under a point of the gizmo’s own space, or null. Handles win over anchors, anchors over segments.

Parameters#

Returns#

PathHit | null

select()#

select(indices: readonly number[], mode?: "add" | "replace" | "toggle" | "remove"): void;

Experimental

Selects anchors: replace (default), add, remove or toggle.

Parameters#

Returns#

void

selectInRect()#

selectInRect(rect: {
  height: number;
  width: number;
  x: number;
  y: number;
}, mode?: "add" | "replace" | "toggle" | "remove"): void;

Experimental

Selects the anchors inside a rectangle in path coordinates: the hook for a marquee.

Parameters#

Returns#

void

setClosed()#

setClosed(closed: boolean): void;

Experimental

Closes or opens the path. Closing needs at least two anchors.

Parameters#

Returns#

void

tick()#

tick(dt: number): boolean;

Experimental

Advances the animation by dt seconds (only needed with ticker: null). Returns true while moving.

Parameters#

Returns#

boolean

toggleType()#

toggleType(index: number): void;

Experimental

Switches anchor index between a corner and a smooth point.

Parameters#

Returns#

void