计算旋转HTML元素的原点

Question

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

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

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

var angle=(传递给函数的整数。示例：45)var rotatedX=blueBox.getBoundingClientRect().left；var rotatedY=blueBox.getBoundingClientRect().top；var centerX=redBox.getBoundingClientRect().left；var centerY=redBox.getBoundingClientRect().top；var dx=旋转X-中心X；var dy=旋转Y-中心Y；var to Radians=(Math.PI/180)；var dx2=dx*Math.cos(toRadians*角度)-dy*Math.sin(toRadians*角度)；var dy2=dx*Math.sin(toRadians*角度)+dy*Math.cos(toRadians*角度)；var initialX=dx2+centerX；var initialY=dy2+centerY；elementToRotate.style.top=initialX+"px"；elementToRotate.style.left=initialY+"px"；//这只是将CSS转换：rotate(45deg)应用于元素elementToRotate.delectes(角度)

我最初在这里计算公式：HTML5画布：旋转时计算x，y点

但是我很难让我的项目正常运行。非常感谢在这方面的任何帮助。如果我需要提供任何其他信息，请告诉我。

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。

Answer 2

我尝试了一种不同的方法，但也许它可以帮助您。我并没有真正计算旋转，只是对另一个div应用了相同的变换并计算了偏移。这是我的jsfiddle演示。

注1：我不确定你在用jQuery，所以我没有用它。但它会让转换复制更容易
注意2：我在演示中使用了CCD_2前缀，所以如果您使用其他浏览器，可能需要更改这些前缀。javascript代码也处理其他前缀。

代码为：

function alignRedToBlue() {
var blue = document.getElementById("blue"),
blueStyle = window.getComputedStyle(blue, null),
red = document.getElementById("red"),
props = ["transform", "-moz-transform","-webkit-transform", "-ms-transform", "-o-transform"],
index, prop;
for (index in props) {
prop = props[index];
red.style[prop] = blueStyle.getPropertyValue(prop);
}
red.style.top = blue.offsetTop + (blue.offsetHeight - red.offsetHeight) / 2 + "px";
red.style.left = blue.offsetLeft + (blue.offsetWidth - red.offsetWidth) / 2 + "px";
}