嗨，我想计算两个旋转元素之间的垂直距离。当旋转角度为0时，我使用 el1.getBoundingClientRect().x - el2.getBoundingClientRect().x 来计算距离，它可以给出正确的距离，但是对于旋转的元素，它不起作用，因为它给出的是顶点之间的垂直距离（边界矩形的距离），那么我该如何获取x？谢谢！
https://codesandbox.io/s/epic-thunder-mxqbc?file=/src/index.js
计算两个旋转元素之间的距离。
3
- Beso Kakulia
2
1如果您知道旋转的角度，可以先将元素反向旋转，然后计算距离，最后再将元素旋转回来。 - Ripi2
是的，我也是这样，谢谢！ - Beso Kakulia
1个回答
2
如果两个矩形在旋转之前的顶点坐标差为
如果我们将第一个方程乘以
（假设您知道旋转状态下的顶点差异）
例如下面的例子：
旋转后：
(dx, dy)，那么在旋转角度为 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。
- MBo
7
我添加了示例 - MBo
您可以在此处检查 https://codesandbox.io/s/epic-thunder-mxqbc?file=/src/index.js，CSS旋转会旋转到元素的中心。@mrblewog 是的，我使用弧度。 - Beso Kakulia
y1-y对应的顶点值应该约为-4而不是95，这就是为什么您的计算结果有误的原因。 - MBo
我计算小矩形y与大矩形的差，我可以用同样的方式从底部计算，但结果不会是-4。 - Beso Kakulia
x1-x = 113 是左下顶点的坐标。对于这些顶点，我们可以看到较小的y差异。对于左上顶点的x差异小于100。 - MBo
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接