問題描述
我對(duì)三角學(xué)不是很熟悉，但我只有兩個(gè)點(diǎn)可以在 2D 中旋轉(zhuǎn):
I am not so familiar trigonometry, but I have only two points to rotate in 2D:
*nx, ny
. -
. -
. angle -
*cx,cy.................*x,y
cx, cy = 旋轉(zhuǎn)中心
x,y = 當(dāng)前 x,y
nx, ny = 新坐標(biāo)
cx, cy = rotation center
x,y = current x,y
nx, ny = new coordinates
如何計(jì)算某個(gè)角度的新點(diǎn)?
How to calculate new points in a certain angle?
推薦答案
function rotate(cx, cy, x, y, angle) {
var radians = (Math.PI / 180) * angle,
cos = Math.cos(radians),
sin = Math.sin(radians),
nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
return [nx, ny];
}
前兩個(gè)參數(shù)是中心點(diǎn)(第二個(gè)點(diǎn)將圍繞其旋轉(zhuǎn)的原點(diǎn))的 X 和 Y 坐標(biāo).接下來(lái)的兩個(gè)參數(shù)是我們將要旋轉(zhuǎn)的點(diǎn)的坐標(biāo).最后一個(gè)參數(shù)是角度，以度為單位.
The first two parameters are the X and Y coordinates of the central point (the origin around which the second point will be rotated). The next two parameters are the coordinates of the point that we'll be rotating. The last parameter is the angle, in degrees.
作為示例，我們將取點(diǎn) (2, 1) 并將其圍繞點(diǎn) (1, 1) 順時(shí)針旋轉(zhuǎn) 90 度.
As an example, we'll take the point (2, 1) and rotate it around the point (1, 1) by 90 degrees clockwise.
rotate(1, 1, 2, 1, 90);
// > [1, 0]
關(guān)于這個(gè)函數(shù)的三個(gè)注意事項(xiàng):
Three notes about this function:
對(duì)于順時(shí)針旋轉(zhuǎn)，最后一個(gè)參數(shù)
angle應(yīng)該是正數(shù).對(duì)于逆時(shí)針旋轉(zhuǎn)(如您提供的圖表)，它應(yīng)該是負(fù)數(shù).
For clockwise rotation, the last parameter
angleshould be positive. For counterclockwise rotation (like in the diagram you provided), it should be negative.
請(qǐng)注意，即使您提供的參數(shù)應(yīng)該產(chǎn)生一個(gè)坐標(biāo)是整數(shù)的點(diǎn)——即將點(diǎn) (5, 0) 圍繞原點(diǎn) (0, 0) 旋轉(zhuǎn) 90 度，這應(yīng)該產(chǎn)生 (0, -5) -- JavaScript 的舍入行為意味著任何一個(gè)坐標(biāo)仍然可能是一個(gè)非常接近預(yù)期整數(shù)的值，但仍然是一個(gè)浮點(diǎn)數(shù).例如:
Note that even if you provide arguments that should yield a point whose coordinates are whole numbers -- i.e. rotating the point (5, 0) by 90 degrees about the origin (0, 0), which should yield (0, -5) -- JavaScript's rounding behavior means that either coordinate could still be a value that's frustratingly close to the expected whole number, but is still a float. For example:
rotate(0, 0, 5, 0, 90);
// > [3.061616997868383e-16, -5]
因此，結(jié)果數(shù)組的兩個(gè)元素都應(yīng)該是浮點(diǎn)數(shù).您可以根據(jù)需要使用 Math.round()、Math.ceil() 或 Math.floor() 將它們轉(zhuǎn)換為整數(shù).
For this reason, both elements of the resulting array should be expected as a float. You can convert them to integers using Math.round(), Math.ceil(), or Math.floor() as needed.
最后，請(qǐng)注意，此函數(shù)假定 笛卡爾坐標(biāo)系，這意味著值當(dāng)您在坐標(biāo)平面中向上"時(shí)，Y 軸上的值會(huì)變得更高.在 HTML/CSS 中，Y 軸是倒置的——當(dāng)您將頁(yè)面向下移動(dòng)時(shí)，Y 軸上的值會(huì)變高.
Finally, note that this function assumes a Cartesian coordinate system, meaning that values on the Y axis become higher as you go "up" in the coordinate plane. In HTML / CSS, the Y axis is inverted -- values on the Y axis become higher as you move down the page.
這篇關(guān)于如何在Javascript中計(jì)算二維旋轉(zhuǎn)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！