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。