如何在旋转后获取作物坐标javascript

我需要在旋转之后保留坐标信息，并且在必要的数学上挣扎。如何在旋转后获取作物坐标javascript

我有一个图像，某些作物坐标。这些坐标给出以下对象：

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

我然后旋转这个图像（它是一个canvas元素），但我想新的坐标，以准确反映旋转，离开原来的作物完好。

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

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

非常感谢。

为了显示此问题的妥善我已经包括了一个快速的图像：

enter image description here

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

来源

2012-09-26 gordyr

你正在从中心旋转更大的广场？ – Shmiddty

大广场（在这种情况下的照片）正在围绕其中点旋转。我只需要重新计算裁剪区域，以便旋转。 – gordyr

或者更一般地说，你旋转的轴心点是什么？ – Shmiddty

此功能使用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

来源

2012-09-26 14:54:27 chridam

完美，这正是我所寻找的。谢谢！ – gordyr

左上角将是：

0, heightImg - heightCrop

右下为：

widthCrop, widthImg

这是假设作物与旋转之前左上角贴身。

我会稍微研究一般数学。

公式旋转通过角度（C）的点（A）周围的点（B）如下：

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-26 14:52:28 Shmiddty

为90度逆时针围绕（0,0）点旋转矩阵（你的坐标系中）是

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-26 14:56:42

谢谢伊恩，虽然你的回答是正确的，但是chridam为我提供了一个完整的函数，这个函数可以处理任何旋转。反正干杯！ – gordyr

如何在旋转后获取作物坐标javascript

回答

相关问题