如何在旋转javascript后获取裁剪坐标

Question

我需要在轮换后保留坐标信息，并且正在努力学习必要的数学。

我有一个图像，有一定的裁剪坐标。这些坐标以下列对象给出：

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

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

e.g。如果选择400x400图像的左上四分之一，则返回的坐标为x：0，y：0，x2：200，y2：200。当向左旋转-90度时，新坐标应为：x：0，y：200，x2：200，y：400。

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

非常感谢。

为了帮助您正确地查看这个问题，我已经提供了一个快速图片：

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

Answer 1

左上角将是：

0, heightImg - heightCrop

右下角将是：

widthCrop, widthImg

这是假设裁剪在旋转前与左上角紧贴。

我会稍微解决一般数学问题。

以角度（C）围绕点（B）旋转点（A）的公式如下：

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值）

Answer 2

此功能使用Rotation Matrix算法

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

Answer 3

围绕（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;

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