javascript - 计算两个旋转元素之间的距离

Question

您好，我想计算两个旋转元素之间的垂直距离，当旋转为 0 时，我使用 el1.getBoundingClientRect().x - el2.getBoundingClientRect().x，它给出了正确的距离，但对于旋转元素，它不起作用，因为它给出了顶点之间的垂直距离(边界矩形的距离，我怎样才能得到 x？谢谢!

https://codesandbox.io/s/epic-thunder-mxqbc?file=/src/index.js

Answer 1

如果旋转前两个矩形的顶点坐标差为(dx, dy)，则旋转 Angular fi后新差为:

 nx = dx * cos(fi) - dy * sin(fi)
 ny = dx * sin(fi) + dy * cos(fi)

如果我们将第一个方程乘以cos(fi)，将第二个方程乘以sin(fi)，然后将它们相加，我们可以找到所需的值

dx = nx * cos(fi) + ny * sin(fi)

(假设你知道旋转状态下的顶点差异)

例如:dx 为 25，cos(fi)=4/5，sin(fi)=3/5
旋转后:nx = 5, ny = 35，我们可以得到dx = 5*4/5 + 25*3/5 = 4+21 = 25