首页 文章

计算旋转的HTML元素的原点

提问于
浏览 次
4

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

在我的项目中，我有两个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度时非常不正确 .

javascript css math

2 回答

  • 1

    差异的来源是如何测量垂直Y坐标 . 在html坐标中，正Y是向下的，而在数学中，假设是向上的 .

    要解决这个问题，只需更改以下两行：

    var dy = rotatedY - centerY;

    至

    var dy = centerY - rotatedY;

    并改变

    var initialY = dy2 + centerY;

    至

    var initialY = centerY - dy2;

    这是JSFiddle .

    回复于
  • 4

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

    注1：我没有't sure you'使用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";
}
    回复于

相关问题