HTML5畫布：旋轉時計算x，y點

我開發了一個HTML5 Canvas應用程序，它涉及到讀取一個xml文件，該文件描述了需要在畫布上繪製的箭頭，直形和其他形狀的位置。的XML佈局的HTML5畫布：旋轉時計算x，y點

實施例：

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/>

如果對象被旋轉它涉及計算一個點的位置（稱爲P的物體的旋轉後的新的位置）時圍繞另一點（向左旋轉，最佳）。我試圖想出一個通用函數/公式我可以用它來計算這個點P但我的數學有點弱&我無法確定我打算使用什麼弧/切線公式。

你能幫我想出一個公式，我可以用它來計算點P的旋轉，可以是正數&負數？

enter image description here

在上面的例子：點（14446）是左，頂部點&點（226496）是對象的中間點時不轉動，從而在點=（左+寬度/ 2 ，頂部+高度/ 2），藍點是旋轉時的中點。我知道如何計算點（14,446）&（226,496）之間的線長度，但不知道如何計算藍色點x，y位置 - BTW：該線的長度與藍色點&之間的線相同（14,446）

len = sqrt((496-446)^2 + (226-14)^2); 
    = 227.56;

來源

2012-01-28 Jake M

這很簡單。在各地的角度Theta座標的座標系（X，Y）的原點旋轉被改變，因爲

x' = x * cos(Theta) - y * sin(Theta); 
y' = x * sin(Theta) + y * cos(Theta);

因此，所有你需要的是旋轉的角度轉換成您擁有點之一。讓我們以更簡化的方式寫出它：（x1，y1）=（14,446）和（x2，y2）=（226,496）。你正試圖圍繞（x1，y1）「旋轉」（x2，y2）。在原點爲（x1，y1）的新座標系中計算（dx2，dy2）。

(dx2,dy2) = (x2-x1,y2-y1);

現在旋轉（正角度是逆時針）：

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees); 
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees);

的最後一步是在（X1，Y1）回到原來的翻譯從原點到該點的座標爲（0,0 ）;

x2' = dx2' + x1; 
y2' = dy2' + y1;

PS：也看過這個:) http://en.wikipedia.org/wiki/Rotation_matrix，不要忘了，在不同的編程語言最三角函數處理大多與弧度..

PPS：我希望我沒嚇死你 - 問如果你有任何問題。

來源

2012-01-28 06:38:30 Cheery

我覺得你的情況，你應該能夠計算等式的以下系統這個旋轉位置：

x = R * Math.cos(angle - angle0); 
y = R * Math.sin(angle - angle0); 
angle = deg * Math.PI/180; 
angle0 = Math.atan(y0/x0);

R侑矢徑（在你的例子len）的長度。
deg以度數旋轉的角度，即i。g 120 °
x and y您正在尋找的最終位置的座標。
angle是實際的旋轉角度（rad，不是梯度）。
angle0是初始角度點被旋轉到相對於X軸。我們需要使用Math.atan進行預先計算。

尚未測試。所以試試吧。但是這個想法就是這樣 - 利用三角函數。

來源

2012-01-28 06:38:34 dfsq

有應該提到當你處理反正切...這將給予同樣的角度時（X，Y）的一件事是在我或III象限，（x，y）在II或IV象限中。角度的正確值應根據x和y的符號來選擇。 – Cheery 2012-01-28 06:53:25

-1

座標計算的一個例子：Dice roll

來源

2013-11-12 15:23:20

請注意，[只有鏈接的答案]（http://meta.stackoverflow.com/tags/link-only-answers/info）不鼓勵，所以答案應該是搜索解決方案的終點（vs.而另一個引用的中途停留時間往往會隨着時間推移而過時）。請考慮在此添加獨立的摘要，並將鏈接保留爲參考。 – kleopatra 2013-11-12 15:24:50

HTML5畫布：旋轉時計算x，y點

回答

相關問題