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

Question

我需要在旋转后保留坐标信息，并且正在为必要的数学而苦苦挣扎。

我有一张图片，带有特定的裁剪坐标。这些坐标作为以下对象给出:

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

然后我旋转这个图像(它是一个 Canvas 元素)，但我希望新坐标能够准确地反射(reflect)旋转，保持原始裁剪完好无损。

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

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

非常感谢。

为了帮助正确地形象化这个问题，我提供了一张快速图片:

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

Answer 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