从屏幕坐标到对象中心坐标：2D坐标变换公式完整推导

在图形界面、游戏交互开发中，我们经常需要通过光标选中、拖拽、旋转等操控场景内的物体。但系统一般输出的原始数据均为屏幕像素坐标，该坐标系规则和物体自身的数学坐标系并不匹配，难以直接用于位置计算、姿态运算等逻辑。因此，我们需要完成从屏幕坐标到对象坐标的转换，本文将完整推导对应的坐标变换公式。

一、屏幕坐标到对象坐标的计算

1、几何计算

屏幕坐标与物体中心坐标的转换，可先从基础几何关系入手。我们规定物体坐标以自身中心为原点，那么转换逻辑十分直观：变换后的物体坐标 = 屏幕坐标 − 物体中心在屏幕上的坐标。通过简单的坐标差值运算，就能将屏幕坐标系下的点位，换算为以物体中心为基准的相对坐标。

如上图所示， P点坐标为（2，-2）， 对应圆形坐标为（3，-3）的对象坐标可以计算为P'为

\(\begin{cases} x' = x - x_0 \\ y' = y - y_0 \end{cases}\)
即：\(\begin{cases} x' = 2 - 3 \\ y' = -2 - (- 3) \end{cases}\)

P点在以E为中心的坐标为（-1， 1）

2、坐标的基

屏幕坐标我们可以看成以向量e1 e2为基的坐标：

\[\mathcal{E}:\boldsymbol{e_1}=\begin{pmatrix}1\\0\end{pmatrix},\quad\boldsymbol{e_2}=\begin{pmatrix}0\\-1\end{pmatrix} \]

对象坐标可以看成以向量m1 m2为基的坐标：

\[\mathcal{M}:\boldsymbol{m_1}=\begin{pmatrix}1\\0\end{pmatrix},\quad\boldsymbol{m_2}=\begin{pmatrix}0\\1\end{pmatrix} \]

注：向量是只有长度和大小的，先不考虑起始位置

对于向量 \(\boldsymbol\ p\)，分别在两组基下表示：

\[\boldsymbol\ p = x\boldsymbol{e_1}+y\boldsymbol{e_2} = x'\boldsymbol{m_1}+y'\boldsymbol{m_2} \]

\(\begin{pmatrix}x\\y\end{pmatrix}\)为屏幕坐标，\(\begin{pmatrix}x'\\y'\end{pmatrix}\)为对象坐标

将屏幕基底按列拼接，构成矩阵 \(\boldsymbol{E}\) ；对象基底按列拼接，构成矩阵$ \boldsymbol{M}$ 有

\[\boldsymbol{E}=(\boldsymbol{e_1},\boldsymbol{e_2})= \begin{pmatrix} 1 & 0 \\ 0 & -1 \end{pmatrix},\quad \boldsymbol{M}=(\boldsymbol{m_1},\boldsymbol{m_2})= \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix} \]

这里也可以证明矩阵可以转换（不重要）：两组向量张成相同空间 ⇒ 向量组可互相线性表示 ⇒ 对应的基底矩阵可逆 ⇒ 必然存在合法的坐标变换矩阵，支持双向坐标转换

设：\(\boldsymbol X = \begin{pmatrix} x \\ y \end{pmatrix}\)：向量在屏幕坐标系下坐标, \(\boldsymbol X' = \begin{pmatrix} x' \\ y' \end{pmatrix}\)：向量在对象坐标系下坐标

则同一向量在两组基下满足关系：向量恒等式：\(\boldsymbol{E}\boldsymbol{X} = \boldsymbol{M}\boldsymbol{X}'\)

3、屏幕坐标 → 对象坐标

（1）计算坐标变换矩阵

已知屏幕坐标求对象坐标，就是已知 \(\boldsymbol X'\)，求解 \(\boldsymbol X\)，由上一步的公式 \(\boldsymbol{E}\boldsymbol{X} = \boldsymbol{M}\boldsymbol{X}'\)，两边左乘 \(\boldsymbol E^{-1}\) 有

\[\boldsymbol X = \boldsymbol E^{-1} \boldsymbol M \boldsymbol {X}' \]

通过伴随矩阵法求E的逆矩阵有

\[\boldsymbol{E}^{-1} = \frac{1}{-1} \begin{pmatrix} -1 & 0 \\ 0 & 1 \end{pmatrix} = \begin{pmatrix} 1 & 0 \\ 0 & -1 \end{pmatrix} \]

再计算\(\boldsymbol{E}^{-1} \boldsymbol M\) 有

\[ \boldsymbol{E}^{-1}\boldsymbol{M} = \begin{pmatrix} 1 & 0 \\ 0 & -1 \end{pmatrix} \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix} = \boldsymbol{\begin{pmatrix} 1 & 0 \\ 0 & -1 \end{pmatrix}} \]

接下来还是用P点坐标\(\boldsymbol{X}=\dbinom{2}{2}\)验证一下计算结果：

\(\boldsymbol{X}' = \begin{pmatrix} 1 & 0 \\ 0 & -1 \end{pmatrix} \begin{pmatrix} 2 \\ 2 \end{pmatrix} = \begin{pmatrix} 2 \\ -2 \end{pmatrix}\)

可以发现和前面几何计算结果是不一致的，这是因为二阶矩阵运算，本质是向量线性变换，而向量的定义是只有大小和方向，并不限制起始位置，默认是从原点开始的，为此需要引入齐次坐标

（2）齐次坐标

上一步的计算实现了坐标轴方向翻转，属于纯线性变换，无法表达坐标原点平移

对平面内任意位置点 ((x,y))，扩充一维分量 1，得到三维齐次坐标：
\(\begin{pmatrix} x \\ y \\ 1 \end{pmatrix}\)
所有二维几何变换，均可使用 \(3\times3\) 方阵表示

\[\boldsymbol{M}_{base} = \begin{pmatrix}1 & 0 & 0 \\0 & -1 & 0 \\0 & 0 & 1\end{pmatrix} \]

向量的第三个分量为常数1，所以 M * P 的结果，x' = 原来二阶变换的x值 + 一行三列的值， y’ = 原来二阶变换的y值 + 二行三列的值，故只需要替换这两个值作为偏移量（px ， py）即可，故有

\[\boldsymbol{M}_{total} = \begin{pmatrix}1 & 0 & x_p \\0 & -1 & y_p \\0 & 0 & 1\end{pmatrix} = \begin{pmatrix}1 & 0 & -3 \\0 & -1 & 3 \\0 & 0 & 1\end{pmatrix} \]

再来验证下计算结果：

\[P_{对象坐标} = \begin{pmatrix} x' \\ y' \\ 1 \end{pmatrix} = \begin{pmatrix} 1 & 0 & -3 \\ 0 & -1 & 3 \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} 2 \\ 2 \\ 1 \end{pmatrix} = \begin{pmatrix} -1 \\ 1 \\ 1 \end{pmatrix} \]

验证结果和几何计算结果一致；

4、对象坐标 → 屏幕坐标

（1）线形变换矩阵推导

由基底等式 \(\boldsymbol{E}\boldsymbol{X} = \boldsymbol{M}\boldsymbol{X}'\)，已知对象坐标 $ \boldsymbol{X}'$ 求解屏幕坐标 $ \boldsymbol{X}$，两边左乘 $ \boldsymbol{M}^{-1}$：

\(\boldsymbol{X} = \boldsymbol{M}^{-1}\boldsymbol{E}\boldsymbol{X}'\)

\(\boldsymbol{M}\) 为单位矩阵，因此 \(\boldsymbol{M}^{-1}=\boldsymbol{M}\)，代入计算：

\(\boldsymbol{M}^{-1}\boldsymbol{E} = \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}\begin{pmatrix} 1 & 0 \\ 0 & -1 \end{pmatrix}=\) $\begin{pmatrix} 1 & 0 \ 0 & -1 \end{pmatrix} $

（2）构造逆齐次变换矩阵

这里我们可以直接对上一步的变换矩阵求逆即可
已知屏幕转对象总齐次矩阵：

\(\boldsymbol{M}_{total} = \begin{pmatrix}1 & 0 & -3 \\0 & -1 & 3 \\0 & 0 & 1\end{pmatrix}\)

对其求逆，得到对象坐标转屏幕坐标的齐次变换矩阵：

\(\boldsymbol{M}_{total}^{-1} =\) \(\begin{pmatrix}1 & 0 & 3 \\ 0 & -1 & 3 \\ 0 & 0 & 1\end{pmatrix}\)

（3）代入数据验证

取对象坐标点 \(\dbinom{-1}{1}\)，对应齐次坐标 \(\begin{pmatrix} -1 \\ 1 \\ 1 \end{pmatrix}\)，计算：

\(\begin{pmatrix} x \\ y \\ 1 \end{pmatrix} =\)
\(\begin{pmatrix}1 & 0 & 3 \\ 0 & -1 & 3 \\0 & 0 & 1\end{pmatrix}\begin{pmatrix} -1 \\ 1 \\ 1 \end{pmatrix}\) = \(\begin{pmatrix} 2 \\ 2 \\ 1 \end{pmatrix}\)

计算结果为屏幕坐标 ((2,2))，与原始坐标一致，反向变换成立。