屏幕坐标、画布坐标、世界坐标

1. 屏幕坐标 (Screen Coordinates)

• 定义：物理显示设备（如显示器）上的像素位置。

• 原点：屏幕左上角 (0, 0)。

• 方向：

  • X轴：从左向右增加

  • Y轴：从上向下增加（与数学坐标系相反）

• 单位：像素（pixel）。

• 特点：绝对位置，与用户看到的界面直接对应。

2. 画布坐标 (Canvas Coordinates)

• 定义：画布元素（<canvas>）自身的坐标系统。

• 原点：画布左上角 (0, 0)。

• 方向：与屏幕坐标一致（X向右，Y向下）。

• 单位：像素（由画布尺寸 width/height决定）。

• 关键点：

  • 画布坐标是相对于画布左上角的偏移量。

  • 如果画布未缩放/平移，画布坐标与屏幕坐标在画布区域内一致。

  • 缩放/平移时：需通过变换矩阵映射到真实世界坐标（见下文）。

3. 真实世界坐标 (World Coordinates)

• 定义：开发者定义的逻辑坐标系（例如地图中的经纬度、物理模型中的米）。

• 原点/方向：自定义（如中心为原点、Y轴向上等）。

• 单位：任意（如毫米、逻辑单位）。

• 作用：用于描述场景中对象的抽象位置，与渲染无关。

🔄 坐标转换关系

(1) 屏幕坐标 ↔ 画布坐标

• 无滚动/叠加时：

// 屏幕坐标 → 画布坐标
canvasX = screenX - canvas.offsetLeft;
canvasY = screenY - canvas.offsetTop;

// 画布坐标 → 屏幕坐标
screenX = canvasX + canvas.offsetLeft;
screenY = canvasY + canvas.offsetTop;

• 有滚动/变换时：需考虑容器滚动、CSS变换（如缩放、旋转），需用 getBoundingClientRect()：

const rect = canvas.getBoundingClientRect();
canvasX = screenX - rect.left;
canvasY = screenY - rect.top;

(2) 画布坐标 ↔ 真实世界坐标

通过 ​​变换矩阵​​（Scale/Translate/Rotate）转换：

// 示例：将真实世界坐标 (worldX, worldY) 映射到画布
ctx.setTransform(scaleX, 0, 0, scaleY, offsetX, offsetY);
ctx.transform(1, 0, 0, -1, 0, canvas.height); // Y轴翻转
const canvasX = worldX * scaleX + offsetX;
const canvasY = -worldY * scaleY + offsetY + canvas.height; // Y方向处理

// 逆向转换（屏幕坐标 → 真实世界坐标）
const worldX = (canvasX - offsetX) / scaleX;
const worldY = (offsetY + canvas.height - canvasY) / scaleY; // 恢复Y轴方向

关键转换：真实世界坐标 →（应用变换）→ 画布坐标 →（绘制）→ 屏幕显示

核心关系：

真实世界坐标 → 通过数学变换 → 画布坐标 → 通过布局偏移 → 屏幕坐标。