4

我需要在旋转后保留坐标信息，并且正在努力解决必要的数学问题。

我有一张带有某些裁剪坐标的图像。这些坐标以以下对象的形式给出：

{
      h:  139.68333435058594,
      w:  139.68333435058594,
      x:  60.31666564941406,
      x2: 200,
      y:  80,
      y2: 219.68333435058594
}

然后我正在旋转这个图像（它是一个画布元素），但我希望新坐标能够准确地反映旋转，保持原始作物完好无损。

例如，如果选择了 400x400 图像的左上角，则返回的坐标将为 x:0、y:0、x2:200、y2:200。向左旋转 -90 度时，新坐标应为：x:0, y:200, x2:200, y:400。

我将如何编写一个函数来计算这些新坐标？

非常感谢。

为了帮助正确地可视化这个问题，我提供了一张快速图片：

在此处输入图像描述

编辑：上图中的大方块是我正在旋转的照片。它围绕其中点旋转，并且裁剪坐标相对于图像本身。旋转时，实际坐标平面在重新计算新坐标之前被重置，这意味着图像/容器的左上角将始终为 0,0。

4

3 回答 3

3

该函数使用旋转矩阵算法

function rotate(x, y, xm, ym, a) {
    var cos = Math.cos, sin = Math.sin,
    a = a * Math.PI / 180, // Convert to radians 
    // Subtract midpoints, so that midpoint is translated to origin
    // and add it in the end again
    xr = (x - xm) * cos(a) - (y - ym) * sin(a)   + xm,
    yr = (x - xm) * sin(a) + (y - ym) * cos(a)   + ym;

    return [xr, yr];
}

alert(rotate(0, 0, 200, 200, -90));​ // 0,400

JSFiddle

于 2012-09-26T14:54:27.047 回答
2

左上角将是：

0, heightImg - heightCrop

右下角将是：

widthCrop, widthImg

这是假设作物在旋转前与左上角紧密贴合。

我稍后会计算出一般数学。

将点 (A) 绕点 (B) 旋转角度 (C) 的公式如下：

N.x = (A.x-B.x) * cos(c) - (A.y-B.y) * sin(c) + B.x
N.y = (A.y-B.y) * cos(c) + (A.x-B.x) * sin(c) + B.y

我们可以减少这些，因为我们旋转了 90 度。[cos(90) = 0, sin(90)=1]

N.x = 0 - (A.y-B.y) + B.x = B.x + B.y - A.y
N.y = 0 + (A.x-B.x) + B.y = B.y + A.x - B.x

所以使用这个公式和左上角的坐标会给你左下角的点。（x 是正确的，但您必须减去裁剪区域的高度才能获得新左上角的正确 y 值）

于 2012-09-26T14:52:28.840 回答
2

围绕 (0,0) 点（在您的坐标系中）逆时针旋转 90 度的矩阵是

  0 1
 -1 0

在代码中转换为：

new_x = y; new_y = -x;

但是您想围绕 (200,200) 旋转，因此您需要在旋转之前移动点，然后再将它们移回。

new_x = (y-200) + 200;
new_y = -(x-200) + 200;

简化，这只是

new_x = y; new_y = 400-x;

您应该能够像这样转换所有裁剪坐标。

于 2012-09-26T14:56:42.597 回答