javascript - 将绝对坐标转换为相对坐标

Question

我有一个图像，我可以在单击的任何位置放置标记。: http://jsbin.com/ojahel/10/edit

我需要将这些标记位置保存在 json 数组中，然后将其发送到服务器。我已经做到了。但我认为我发送的坐标是绝对的。因为我需要在另一个页面中使用它们，并且当我显示与之前相同的图像时，标记不在同一位置，因为它们不是放置在相对于图像本身的坐标上，而是相对于屏幕坐标上。

知道如何在提交表单时转换它们，然后在另一个页面中显示图像时使用另一个函数将相对坐标“转换”为绝对坐标吗？

Answer 1

我认为您必须找出您的图像放置在第一页上的坐标。我们称它们为 x_abs(图片),y_abs(图片)。然后你可以通过计算标记的相对坐标

x_rel(marker) = x_abs(marker) - x_abs(picture)
y_rel(marker) = y_abs(marker) - y_abs(picture)

在下一页上，您必须再次找出图像的放置位置，并通过以下方式保留标记的绝对坐标

x_abs(marker) = x_rel(marker) + x_abs(picture)
y_abs(marker) = y_abs(marker) + y_abs(picture)

请注意，x_abs(图片)、y_abs(图片)现在指的是第二页中图片的绝对坐标。希望有帮助