@ue-too/board / index / convertFromWindow2ViewPortWithCanvasOperator

函式: convertFromWindow2ViewPortWithCanvasOperator()

convertFromWindow2ViewPortWithCanvasOperator(point, canvas, viewportOriginInCanvasSpace, viewportHasFlippedYAxis): Point

定義於: packages/board/src/utils/coorindate-conversion.ts:106

Converts a point from window coordinates to viewport coordinates in one step.

參數

point

Point

The point in window coordinates (browser viewport)

canvas

Canvas

The canvas object with position and dimensions

viewportOriginInCanvasSpace

Point = ...

Viewport origin in canvas space (default: canvas center)

viewportHasFlippedYAxis

boolean = false

Whether viewport uses mathematical y-axis (default: false)

回傳

Point

The point in viewport coordinates

備註

This is a convenience function that combines two conversions:

1. Window to Canvas: convertFromWindow2Canvas
2. Canvas to Viewport: convertFromCanvas2ViewPort

It's particularly useful for processing input events (mouse clicks, touches) that need to be converted directly to viewport space for interaction handling.

The default viewport origin is the canvas center, which is common for mathematical/engineering applications where (0,0) should be in the middle.

範例

// Mouse click event
const clickPos = { x: event.clientX, y: event.clientY };

const canvas = {
  position: { x: 100, y: 50 },
  width: 800,
  height: 600
};

// Convert to centered viewport with y-up
const viewportPos = convertFromWindow2ViewPortWithCanvasOperator(
  clickPos,
  canvas,
  { x: 400, y: 300 },  // center of canvas
  true  // mathematical coordinates
);

// viewportPos is now relative to viewport center with y-up

參閱

• convertFromWindow2Canvas for window to canvas conversion
• convertFromCanvas2ViewPort for canvas to viewport conversion