Camera

Imports

import { Camera } from "@snap-engine/core";
import { CameraControl } from "@snap-engine/asset-base";

Coordinate Conversion

const { x, y } = object.worldTransform;

const [cameraX, cameraY] = object.cameraPosition;
const [screenX, screenY] = object.screenPosition;

object.worldTransform = { x: 100, y: 200 };
object.cameraPosition = [50, 100];
object.screenPosition = [300, 400];

Camera API

The engine creates a stationary camera when a container is assigned. You can also assign a Camera instance directly.

import { Engine, Camera } from "@snap-engine/core";

const engine = new Engine();
const camera = new Camera(engine);

engine.camera = camera;
camera.containerDom = engine.containerElement;

camera.setCameraPosition(0, 0);
camera.setCameraCenterPosition(100, 100);

const center = camera.getCameraCenterPosition();
const zoom = camera.zoom;

canvasElement.style.transform = camera.canvasStyle;

Coordinate Methods

const [cameraX, cameraY] = camera.getCameraFromWorld(100, 200);
const [worldX, worldY] = camera.getWorldFromCamera(cameraX, cameraY);
const [screenX, screenY] = camera.getScreenFromCamera(cameraX, cameraY);
const [containerX, containerY] = camera.getCameraFromScreen(screenX, screenY);

const [cameraWidth, cameraHeight] = camera.getCameraDeltaFromWorldDelta(10, 10);
const [worldDeltaX, worldDeltaY] = camera.getWorldDeltaFromCameraDelta(50, 30);

CameraControl Setup

<div id="container" style="overflow: hidden; position: relative;">
  <div id="camera-wrapper">
    <div class="object">Object 1</div>
    <div class="object">Object 2</div>
  </div>
</div>

import { Engine } from "@snap-engine/core";
import { CameraControl } from "@snap-engine/asset-base";

const engine = new Engine();
const container = document.getElementById("container");
const wrapper = document.getElementById("camera-wrapper");

if (container && wrapper) {
  engine.element = container;

  const cameraControl = new CameraControl(engine, {
    zoomLock: false,
    panLock: false,
  });

  cameraControl.element = wrapper;
  cameraControl.setCameraCenterPosition(0, 0);
}

CameraControl Methods

cameraControl.setCameraPosition(0, 0);
cameraControl.setCameraCenterPosition(100, 100);

const center = cameraControl.getCameraCenterPosition();

cameraControl.zoomBy(0.1);
cameraControl.zoomBy(-0.1);
cameraControl.zoomBy(0.1, 200, 150);

Edge panning for drag owners

Enable programmatic edge panning when composing the camera with a drag system such as SnapLine:

const cameraControl = new CameraControl(engine, {
  edgePan: {
    enabled: true,
    edgeDistance: 48,
    maxSpeed: 600,
  },
});

Drag owners use startEdgePan(pointerId, position, onFrame), updateEdgePan(pointerId, position), and stopEdgePan(pointerId). The frame callback receives the pointer position converted through the camera after each pan, keeping dragged content anchored while the pointer is stationary.

Public API