相对于图像坐标的点旋转

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 从上边缘向下测量。旋转后，边缘的位置发生了变化，因此您现在需要计算出同一点相对于这个新框架的位置。所以 new x 是从 new 左边缘向右的距离，它曾经是底部；而新的y 是从新的顶部边缘向下的距离，它曾经是左边。即：

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

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

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