4. 坐标系与变换：屏幕坐标系、极坐标系、仿射变换、旋转矩阵在指针动画中的应用
在 IVI 仪表指针动画渲染引擎中，坐标系与几何变换是驱动指针平滑、精准旋转的数学基础。本章将系统讲解屏幕坐标系、极坐标系、仿射变换以及旋转矩阵的核心概念，并揭示它们如何在指针动画中协同工作。
4.1 屏幕坐标系与极坐标系
指针动画涉及两种核心坐标系：屏幕坐标系（笛卡尔坐标系）用于定位像素位置，极坐标系用于描述指针的角度与长度。
| 坐标系 | 基本元素 | 在指针动画中的角色 |
|---|---|---|
| 屏幕坐标系 | 原点 (0,0) 在左上角，x 轴向右，y 轴向下 | 定义指针锚点、表盘中心、刻度位置的像素坐标 |
| 极坐标系 | 极点 (圆心)、极径 r、极角 θ | 描述指针长度、旋转角度，直接对应仪表读数 |
关键转换：指针动画引擎通常将仪表读数（如车速 0~240 km/h）映射为极角 θ，再通过三角函数转换为屏幕坐标，最终驱动指针绘制。
4.2 仿射变换与旋转矩阵
仿射变换是保持点、直线和平行性的几何变换，在指针动画中主要用于旋转、平移和缩放。旋转矩阵是仿射变换的核心子集。
4.2.1 二维旋转矩阵
绕原点逆时针旋转 θ 角度的标准旋转矩阵为：
R(θ) = | cosθ -sinθ |
| sinθ cosθ |指针上任意一点 P(x, y) 旋转后的新坐标 P'(x', y') 通过矩阵乘法计算：
x' = x * cosθ - y * sinθ
y' = x * sinθ + y * cosθ4.2.2 指针动画中的复合变换
仪表指针通常不绕原点旋转，而是绕表盘中心（锚点）旋转。这需要复合仿射变换：先平移到原点，旋转，再平移回原位置。
- 平移至原点：将指针锚点 (cx, cy) 移动到 (0, 0)。
- 应用旋转矩阵：绕原点旋转目标角度 θ。
- 平移回原位：将旋转后的坐标移回 (cx, cy)。
引擎实现要点：现代图形 API（如 Canvas 2D、OpenGL ES）内置矩阵堆栈，开发者只需调用
translate(cx, cy)、rotate(θ)、translate(-cx, -cy) 即可完成复合变换，无需手动计算矩阵乘法。
4.3 坐标系与变换在指针动画中的集成流程
下图展示了从仪表读数到指针渲染的完整坐标系与变换链路：
4.4 指针动画中的坐标系变换实战
以下代码片段演示了如何在 Canvas 中实现指针的复合变换动画：
// 指针锚点（表盘中心）
const cx = 200, cy = 200;
// 指针长度
const length = 120;
// 当前角度（弧度）
let angle = 0;
function drawPointer(ctx, angle) {
ctx.save();
// 1. 平移至表盘中心
ctx.translate(cx, cy);
// 2. 旋转指针
ctx.rotate(angle);
// 3. 绘制指针（从中心向外）
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(length, 0);
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 4;
ctx.stroke();
ctx.restore();
}
// 动画循环：角度随时间变化
function animate() {
angle += 0.02; // 每帧增加角度
ctx.clearRect(0, 0, 400, 400);
drawPointer(ctx, angle);
requestAnimationFrame(animate);
}
常见陷阱：Canvas 的
rotate() 默认绕当前原点旋转。如果忘记先 translate() 到指针锚点，指针将绕画布左上角旋转，导致动画完全错位。务必遵循“平移→旋转→绘制→恢复”的顺序。
4.5 极坐标与屏幕坐标的转换公式
在指针动画初始化或刻度绘制时，需要频繁在极坐标与屏幕坐标之间转换：
| 转换方向 | 公式 | 说明 |
|---|---|---|
| 极坐标 → 屏幕坐标 | x = cx + r * cos(θ)y = cy + r * sin(θ) |
已知角度和半径，求指针末端位置 |
| 屏幕坐标 → 极坐标 | r = sqrt((x-cx)² + (y-cy)²)θ = atan2(y-cy, x-cx) |
已知触摸点坐标，反推角度（用于交互） |
引擎优化技巧：在指针动画的每帧更新中，预计算
cos(θ) 和 sin(θ) 值，避免在循环中重复调用三角函数。对于固定步长的动画，可使用查找表（LUT）进一步提升性能。
4.6 本章小结
- 屏幕坐标系是像素定位的基础，极坐标系天然适配指针的旋转特性。
- 旋转矩阵是仿射变换的核心，通过
cosθ和sinθ实现精确角度旋转。 - 复合仿射变换（平移→旋转→平移）解决指针绕任意锚点旋转的问题。
- 坐标系转换公式是连接仪表读数、指针角度与屏幕像素的数学桥梁。