计算旋转HTML元素的原点

Question

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

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

我试图计算一个已经旋转的元素的初始点，这样我就可以正确地将另一个元素放置在它上面，然后应用相同的旋转度。为了确保使用正确的坐标，我有一个div，它在每次旋转时都会标记一个小正方形。蓝色方块表示初始点，红色方块表示元素旋转的中心点。我以为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 element
elementToRotate.rotateDegrees(angle);

我最初在这里计算公式：HTML5 Canvas：旋转时计算x、y点

但我在让我的项目正常工作方面经历了一段艰难的时光。在此方面的任何帮助都将不胜感激。如果我需要提供任何其他信息，请告诉我。

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

Answer 1

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

注1：我不确定您使用的是jQuery，所以我没有使用它。但这会使转换拷贝更容易
注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";
}

Answer 2

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

为了说明这一点，只需更改以下两行：

var dy = rotatedY - centerY;

到

var dy = centerY - rotatedY;

和改变

var initialY = dy2 + centerY;

到

var initialY = centerY - dy2;

这是JSFiddle。