js三角法旋轉後居中對齊

Question

哦，你們是javascript的神！ 一個爲那些仍然記得學校三角學的人;-)

請參閱下面的鏈接，我本質上是試圖中心一些內容，但正常的screenwidth-divwidth/2樣式方程不工作，因爲角度。

只是Firefox現在 http://jsbin.com/uruvub/2/

非常感謝！

Answer 1

首先想象一下紅色框左上角附帶的「紅色座標系」，紅色y軸表示紅色框頂部邊界向右，右側給出紅色y軸，左邊給出紅色y軸紅色框的邊界和下降。灰色框在這個紅色的座標系中的位移(d_x, d_y)是：

d_x = (W - w)/2, W = width of red box, w = width of grey box 
d_y = (H - h)/2, H = height of red box, h = height of grey box 

同樣的位移矢量(d_x, d_y)的有效期爲綠盒子的右上角。

現在，我們需要在由您的X軸和Y軸給出的「黑色座標系」中表示此向量(d_x, d_y)。紅色系統系統可以通過角度a（您指定的角度）的旋轉和原點的移位轉換爲黑色系統。旋轉的矢量是

D_x = d_x * cos(a) - d_y * sin(a) 
D_y = d_x * sin(a) + d_y * cos(a) 

這是黑色系統相對於黑色系統中紅色框左上角的位移。

備註：根據旋轉方向的不同，您可能需要在上述公式中將a更改爲-a。