点相对于图像坐标的旋转

Question

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

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

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

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

下一个大问题是，当我绕中心（点 [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 度旋转应该是相当明显的。

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