@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);