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: Calculating a x,y point when rotated

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

http://jsfiddle.net/aSr7J/1/ 这是问题的JS小提琴。目标是计算黑色框内的水箱。计算适用于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 demo。

注1：我不确定你是否在使用jQuery，所以我没有使用它。但它会使转换副本更容易注意2：我在演示中使用了-webkit-前缀，因此如果您使用其他浏览器，可能需要更改这些前缀。 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";
}

计算旋转的HTML元素的原点

2 个答案: