js三角学在旋转后居中

Question

哦，你们javascript众神！ 一个仍然记得学校三角学的人; - ）

请参阅下面的链接，我基本上试图将一些内容集中在一起，但正常的screenwidth-divwidth / 2样式方程由于角度不起作用。

目前只在firefox中 http://jsbin.com/uruvub/2/

非常感谢！

Answer 1

首先想象一个“红色坐标系”附在你红色框的左上角，红色y-axix由红色框的顶部边框给出并向右，红色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。