相对于图像坐标的点旋转

Question

我正在使用Web界面为本地照片创建数据库，我希望能够在其中标记图像并旋转图像等等。在实施标签时（就像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测量，而从上边缘向下测量。旋转后，边的位置已更改，因此您现在需要计算相对于此新框架的相同点。因此，新的 x是从新的左边缘向右的距离，该距离以前是底部；新的y是从新的顶部边缘向下的距离，该距离以前是左侧。即：

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

将其扩展到180度和270度旋转应该是显而易见的。

如果需要处理局部旋转，则问题会更加复杂，因为必须定义与页面而不是图像边缘对齐的坐标轴，并且可以选择如何偏移它们。如果是这样，请发表评论，稍后我将尝试填写更多详细信息。