@ue-too/board / index / createCameraMatrix

函式: createCameraMatrix()

createCameraMatrix(cameraPos, zoom, rotation, devicePixelRatio, canvasWidth, canvasHeight): object

定義於: packages/board/src/camera/utils/matrix.ts:292

Creates a camera transformation matrix from camera parameters. This matrix transforms world coordinates to canvas pixel coordinates.

參數

cameraPos

Camera position in world coordinates

x

number

y

number

zoom

number

Zoom level (1.0 = 100%, 2.0 = 200%, etc.)

rotation

number

Camera rotation in radians

devicePixelRatio

number

Device pixel ratio (typically window.devicePixelRatio)

canvasWidth

number

Canvas width in CSS pixels (not canvas.width!)

canvasHeight

number

Canvas height in CSS pixels (not canvas.height!)

回傳

object

Transformation matrix for world→canvas conversion

a

a: number

b

b: number

c

c: number

d

d: number

e

e: number

f

f: number

備註

Important: canvasWidth and canvasHeight are CSS pixel dimensions, not the internal canvas buffer size (canvas.width/canvas.height). Use element.clientWidth/clientHeight or the CSS dimensions.

Transformation order:

1. Scale by devicePixelRatio (for high-DPI displays)
2. Translate to canvas center
3. Rotate by -camera.rotation (negated for correct direction)
4. Scale by zoom
5. Translate by -camera.position (world offset)

The resulting matrix can be applied to a canvas context:

const {a, b, c, d, e, f} = createCameraMatrix(...);
ctx.setTransform(a, b, c, d, e, f);
// Now draw at world coordinates

範例

const matrix = createCameraMatrix(
  { x: 100, y: 200 },          // camera position
  2.0,                          // 2x zoom
  Math.PI / 6,                  // 30° rotation
  window.devicePixelRatio,
  canvas.clientWidth,           // CSS width, not canvas.width!
  canvas.clientHeight
);

ctx.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
ctx.fillRect(100, 200, 50, 50);  // Draws at world coordinates (100, 200)

參閱

decomposeCameraMatrix for extracting camera parameters from a matrix