javascript - 计算旋转的 HTML 元素的原点

Question

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

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

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

var angle = (integer passed in to the function. Example: 45)var rotatedX = blueBox.getBoundingClientRect().left;var rotatedY = blueBox.getBoundingClientRect().top;var centerX = redBox.getBoundingClientRect().left;var centerY = redBox.getBoundingClientRect().top;var dx = rotatedX - centerX;var dy = rotatedY - centerY;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";//This just applies the CSS transform:rotate(45deg) to the elementelementToRotate.rotateDegrees(angle);

我最初在这里使用公式:HTML5 Canvas: Calculating a x,y point when rotated

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

http://jsfiddle.net/aSr7J/1/这是问题的 JS Fiddle。目标是计算黑色轮廓框内的水色框。该计算适用于 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 .