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

【问题标题】：how to get crop coordinates after a rotation javascript如何在旋转javascript后获取裁剪坐标
【发布时间】：2012-09-26 14:35:56
【问题描述】：

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

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

{
      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。

【问题讨论】：

您是否正在从中心旋转较大的正方形？
大正方形（本例中的照片）围绕其中点旋转。我只需要重新计算裁剪区域，以便它也可以旋转。
或者，更一般地说，您旋转的枢轴点是什么？
“裁剪区域”的新坐标将取决于画布的旋转位置
在这种情况下，对于这个应用程序，您需要想象画布被破坏并重新创建一个新版本以匹配旋转。更清楚一点，所有裁剪坐标都是相对于容器的，旋转时所有容器坐标都被重置，即左上角始终为 0,0。我希望这是有道理的

标签： javascript math

【解决方案1】：

这个函数使用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

【讨论】：

完美，这正是我想要的。谢谢！

【解决方案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;

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

【讨论】：

谢谢伊恩，虽然你的回答是正确的，但 chridam 为我提供了一个完整的功能，无论我向它抛出什么旋转，它都可以工作。无论如何干杯！

【解决方案3】：

左上角将是：

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

【讨论】：