计算旋转的 HTML 元素的原点

Question

我目前正在处理一个关于如何在元素旋转之前找到初始点的问题。

在我的项目中，我有两个 div，它们不能彼此位于同一个容器中，这导致了我遇到的问题。

我正在尝试计算已经旋转的元素的初始点，以便我可以正确地将另一个元素放在它上面，然后应用相同的旋转度数。为了确保我有正确的坐标可以使用，我有一个 div，每次发生旋转时都会标记一个小方块。初始点的蓝色方块和旋转元素的中心点的红色方块。我以为我在 Javascript 中有公式，但似乎有些不对劲。我离 0 度或 180 度越远，我的其他元素就越远离它应该在的地方。以下是我目前拥有的公式。

var angle =（传入函数的整数。示例：45）
var rotateX = blueBox.getBoundingClientRect().left;
var rotateY = blueBox.getBoundingClientRect().top;
var centerX = redBox.getBoundingClientRect().left;
var centerY = redBox.getBoundingClientRect().top;

var dx = 旋转 X - 中心 X；
var dy = 旋转 Y - 中心 Y；

var toRadians = (Math.PI / 180);
var dx2 = dx * Math.cos(toRadians *angle) - dy * Math.sin(toRadians *angle);
var dy2 = dx * Math.sin(toRadians *angle) + dy * Math.cos(toRadians *angle);

var initialX = dx2 + centerX；
var initialY = dy2 + centerY;

elementToRotate.style.top = initialX + "px";
elementToRotate.style.left = initialY + "px";

//这只是将 CSS transform:rotate(45deg) 应用于元素
elementToRotate.rotateDegrees(angle);

我最初在这里使用公式：HTML5 Canvas: Calculating ax,y point when rotation

但是我很难让我的项目正常工作。非常感谢您对此的任何帮助。如果我需要提供任何其他信息，请告诉我。

http://jsfiddle.net/aSr7J/1/ 这是问题的 JS Fiddle。目标是计算黑色轮廓框内的 aqua 框。该计算适用于 0 度和 180 度，在 45 度时非常不正确。

Answer 1

差异的根源在于垂直 Y 坐标的测量方式。在 html 坐标中，正 Y 是向下的，而在数学中，它被假定为向上。

为了解决这个问题，只需更改这两行：

var dy = rotatedY - centerY;

到

var dy = centerY - rotatedY;

和改变

var initialY = dy2 + centerY;

到

var initialY = centerY - dy2;

这是JSFiddle。