Camera

import { Camera } from 'pixi-silk/ui/camera';

Experimental

Pans and zooms a world container over an unbounded canvas. It writes the world’s position and scale, so do not set them yourself while a camera owns the world.

Zoom stays anchored under the cursor or between two fingers. Trackpads pinch to zoom and scroll to pan, mouse wheels follow CameraOptions.wheel. Middle or right drag, Space + drag and two-finger touch drags pan, and a fling keeps gliding. Pans never reach the scene, so the scene keeps its own clicks and drags.

The constructor adds listeners to the element and to window. It also sets the element’s CSS touch-action to none: pinches and one-finger drags then reach the camera and the scene instead of zooming or scrolling the page. Call Camera.destroy to remove both. Overlays drawn beside the world, not inside it, keep a constant size on screen. There is no rotation.

Experimental: the API may change in a minor release.

Constructors#

Constructor#

new Camera(options: CameraOptions): Camera;

Experimental

Parameters#

Returns#

Camera

Properties#

Accessors#

element#

Get Signature#

get element(): HTMLElement;

Experimental

The element that receives input. Its size is the size of the view.

Returns

HTMLElement

moving#

Get Signature#

get moving(): boolean;

Experimental

True while an animation or a fling runs.

Returns

boolean

view#

Get Signature#

get view(): WorldRect;

Experimental

The part of the world the element shows now, in world units. Allocates a new object.

Returns

WorldRect

world#

Get Signature#

get world(): Container;

Experimental

The container the camera moves and scales, as passed in CameraOptions.world.

Returns

Container

zoom#

Get Signature#

get zoom(): number;

Experimental

Zoom on screen now, 1 is 100%. During an animated zoom it is between the start and the target.

Returns

number

Methods#

centerOn()#

centerOn(
   p: PointData, 
   zoom?: number, 
   animate?: boolean
): this;

Experimental

Puts a world point in the middle of the element, optionally at a new zoom (clamped). Animates by default.

Parameters#

Returns#

this

destroy()#

destroy(): void;

Experimental

Removes every listener and stops animations. The world keeps its last transform. Signals stay readable.

Returns#

void

fit()#

fit(
   target?: 
  | Container<ContainerChild>
  | WorldRect, 
   padding?: number | CameraInsets, 
   animate?: boolean
): this;

Experimental

Frames a world rectangle or a container (default Camera.content) with padding CSS pixels around it, default 48. Padding per side ({ left: 260 }) keeps the content clear of docked panels. An empty target keeps the zoom and only centres. Animates by default.

Parameters#

Returns#

this

panBy()#

panBy(
   dx: number, 
   dy: number, 
   animate?: boolean
): this;

Experimental

Moves the world by dx, dy CSS pixels on screen. Jumps by default. During a zoom animation it shifts the target.

Parameters#

Returns#

this

reset()#

reset(animate?: boolean): this;

Experimental

Back to 100% with the world’s origin at the top left.

Parameters#

Returns#

this

screenToWorld()#

screenToWorld(p: PointData): PointData;

Experimental

Converts a point on the element (CSS pixels) to world units, using the view on screen now.

Parameters#

Returns#

PointData

tick()#

tick(dt: number): boolean;

Experimental

Advances animations by dt seconds, clamped to 0..0.1. Only needed with ticker: null. Returns true while the view still moves.

Parameters#

Returns#

boolean

worldToScreen()#

worldToScreen(p: PointData): PointData;

Experimental

Converts a world point to CSS pixels on the element. The inverse of Camera.screenToWorld.

Parameters#

Returns#

PointData

zoomBy()#

zoomBy(
   factor: number, 
   at?: PointData, 
   animate?: boolean
): this;

Experimental

Multiplies the zoom by factor, keeping the screen point at still (default the element’s centre). The result is clamped to Camera.zoomRange. Animates unless animate is false.

Parameters#

Returns#

this

zoomTo()#

zoomTo(
   zoom: number, 
   at?: PointData, 
   animate?: boolean
): this;

Experimental

Zooms to zoom (1 is 100%) around the screen point at, default the centre. Clamped like Camera.zoomBy.

Parameters#

Returns#

this