Skip to content

@ue-too/board / index / cameraPositionToGet

函式: cameraPositionToGet() ​

cameraPositionToGet(pointInWorld, toPointInViewPort, cameraZoomLevel, cameraRotation): Point

定義於: packages/board/src/camera/utils/coordinate-conversion.ts:468

Calculates the camera position needed to place a world point at a specific viewport location. Useful for implementing "zoom to point" or "focus on object" features.

參數 ​

pointInWorld ​

Point

The world point to focus on

toPointInViewPort ​

Point

Where in the viewport this point should appear (origin at center)

cameraZoomLevel ​

number

Target zoom level

cameraRotation ​

number

Target rotation in radians

回傳 ​

Point

Camera position that achieves the desired framing

備註 ​

This is particularly useful for:

  • Zoom-to-cursor: Make clicked point stay under cursor while zooming
  • Pan-and-zoom: Smoothly navigate to show a specific object
  • Focus features: Center camera on a world object

The viewport point is in viewport coordinates (center origin). To center on a world point, use toPointInViewPort = {x: 0, y: 0}.

範例 ​

typescript
// Center camera on world point (1000, 500)
const newCameraPos = cameraPositionToGet(
  { x: 1000, y: 500 },  // world point to focus on
  { x: 0, y: 0 },        // center of viewport
  2.0,                   // zoom level
  0                      // rotation
);
camera.setPosition(newCameraPos);

// Zoom to cursor position
// Keep world point under cursor at (viewportX, viewportY)
const cursorViewport = {
  x: mouseX - canvas.width/2,
  y: mouseY - canvas.height/2
};
const worldAtCursor = camera.convertFromViewPort2WorldSpace(cursorViewport);
const newPos = cameraPositionToGet(worldAtCursor, cursorViewport, newZoom, rotation);
camera.setPosition(newPos);
camera.setZoomLevel(newZoom);