相对于图像坐标的点旋转

Question

我正在使用网络界面为我的本地照片创建一个数据库，我希望能够在其中标记图像并旋转它们。在实施标签时（就像Facebook的标签系统一样），我遇到了一个有问题的领域。即：

假设我已经标记了（不是）我的图像：

当我旋转它时，我希望标签坐标与图像一起旋转，如下所示：

这是我的问题。我将坐标存储在CSS坐标系中的数据库（x，y）中，即左/上而不是数学左/下。 （这可能不是一个大问题？）

下一个大问题是当我围绕中心旋转（点[0,0]）时，我得到负坐标。例如，从[100,100]到[-100，-100]。这是不正确的，因为当我旋转图像时，我没有得到负坐标。坐标系只是正面的。

我的所有旋转代码都使用了矢量旋转公式：

$nx = $x * cos(deg2rad($rotation_angle)) - $y * sin(deg2rad($rotation_angle));
$ny = $x * sin(deg2rad($rotation_angle)) + $y * cos(deg2rad($rotation_angle));

我的问题是：我该如何解决这个问题？我曾尝试使用abs将负值转为正值，但会导致坐标错误。

Answer 1

如果您的旋转仅以90度为单位，如此处所示，则答案相当简单。诀窍在于您不是在固定的参照系内旋转坐标本身，而只是改变测量它们的参照系。 （嗯，两者是等价的，但在我看来，它更容易想象它。）

在原件中，您从左边缘向右测量x，从顶边向下测量y。在旋转之后，边缘已经改变了位置，因此您现在需要计算与该新帧相关的相同点的位置。所以 new x是距离 new 左边缘的距离，它曾经是底部;而新的y是从新的上边缘向下的距离，它曾经是左边的。即：

$ny = $x;
$nx = $height - $y;

将其扩展到180度和270度旋转应该是相当明显的。

如果你需要处理部分旋转，那么问题就更复杂了，因为你必须定义与页面对齐的坐标轴而不是图像边缘，你可以选择如何偏移它们。如果是这种情况，请发表评论，稍后我会尝试填写更多细节。