@ue-too/board / index / convertFromViewport2World

函式: convertFromViewport2World()

convertFromViewport2World(pointInViewport, cameraPositionInWorldSpace, cameraZoomLevel, cameraRotation, worldHasFlippedYAxis): Point

定義於: packages/board/src/utils/coordinate-conversions/viewport-world.ts:50

Converts a point from viewport space to world space.

參數

pointInViewport

Point

The point in viewport coordinates to convert

cameraPositionInWorldSpace

Point

The camera's center position in world coordinates

cameraZoomLevel

number

The camera's zoom level (1.0 = normal, >1 = zoomed in, <1 = zoomed out)

cameraRotation

number

The camera's rotation angle in radians

worldHasFlippedYAxis

boolean = false

Whether world space uses inverted y-axis (default: false)

回傳

Point

The point in world coordinates

備註

This function applies the inverse of the camera transformation to convert from viewport coordinates to world coordinates. It's essential for translating user interactions (clicks, drags) into world-space positions.

The transformation applies these operations in reverse order:

1. Unzoom: Divide by zoom level (world units per viewport pixel)
2. Unrotate: Rotate by positive camera rotation (reverse the camera's rotation)
3. Flip Y (if needed): Negate y if world uses mathematical coordinates
4. Translate: Add camera position to get absolute world position

Mathematical formula:

worldPoint = rotate(pointInViewport / zoom, cameraRotation) + cameraPosition

範例

// Click at viewport center with zoomed and rotated camera
const viewportPoint = { x: 0, y: 0 };  // Center of viewport
const cameraPos = { x: 1000, y: 500 };
const zoom = 2.0;  // Zoomed in 2x
const rotation = Math.PI / 4;  // 45 degrees

const worldPoint = convertFromViewport2World(
  viewportPoint,
  cameraPos,
  zoom,
  rotation,
  false
);
// Result: { x: 1000, y: 500 } (camera position, since viewport center maps to camera position)

參閱

convertFromWorld2Viewport for inverse conversion