javascript - 旋转后获取相对的 x 和 y div

Question

所以这是我希望我在数学课上更加注意的一个:

http://i.imgur.com/noKxg.jpg

我有一个大容器 div，在其中我有一些旋转的内容 div。

我想做的是通过在视口(viewport)中四处移动 Main Div 在子 div 之间设置动画。如果我只是根据简单的 x/y(上/左)计算来做这件事，那将非常容易，但是当涉及到旋转时，我的数学就崩溃了。

我已经尝试了一些东西，但还没有真正破解它。

这是我的结果的简化版本，请随意摆弄:

http://jsfiddle.net/dXKJH/3/

我真的想不通!

[编辑]

我将此解决方案作为首选，因为我已经找到了一种使旋转插件与 MSIE6+ 一起工作的方法。

但是我不得不说，尽管我遵循了所有数学函数并且它们看起来很干净，但结果并不是像素完美，这与 PI 计算有关吗？似乎我制作的盒子越大，间隔越大，它们与左上角匹配的可能性就越小？奇怪。

还有谁能提醒我如果 Angular 超过 45 度我需要做什么三 Angular 事情，我找不到引用我记得几年前数学课上有 4 个象限之类的东西... rr 我多么希望我能多加注意..:-)

非常感谢您迄今为止提供的所有帮助!!

Answer 1

好吧，这就是我的进展......我把所有东西都变小了，以便更好地看到 div 的最终位置，并为此添加了滚动条。

要点:

• Math.sin/Math.cos 需要弧度，而不是度数
• CSS 围绕元素的中点旋转，而不是 (0, 0)(这适用于主 div 和框 divs;先平移-width/2,-height/2旋转,再平移回来)
• 使用 parseInt(x, 10) 确保您使用的是以 10 为基数

最终代码:http://jsfiddle.net/pimvdb/dXKJH/10/ .该解决方案还需要在 HTML 中硬编码位置和旋转，因为 .css 对旋转元素有一些怪癖。

$("#div-1").rotate("-10deg");
$("#div-2").rotate("10deg");
$("#div-3").rotate("15deg");
$("#div-4").rotate("75deg");

$("#main").click(function() {
    console.log($('body').scrollLeft(), $('body').scrollTop());
});

$("a").click(function(e){
    goTo($(this).attr("id").substring(4,5));
    return false;
});


function n(x) {
    return parseInt(x, 10);
}

function sin(x) {
    return Math.sin(x / 180 * Math.PI);
}

function cos(x) {
    return Math.cos(x / 180 * Math.PI);
}

function rotate(x, y, a) {
    var x2 = cos(a) * x - sin(a) * y;
    var y2 = sin(a) * x + cos(a) * y;
    return [x2, y2];
}


var offsets = [null,
              [0,100,-10],
              [100,200, 10],
              [300,100, 15],
              [400,100, 75]].map(function(v) {
                  if(!v) return v;
                  var rotated = rotate(-50, -50, v[2]);
                  rotated[0] += v[0] + 50;
                  rotated[1] += v[1] + 50;
                  return rotated.concat(v[2]);
               });


function goTo(num){
    var obj = $("#div-" + num);
    var angle = -n(obj.rotate());
    var pointX = offsets[num][0] - 500;
    var pointY = offsets[num][1] - 500;
    var rotated = rotate(pointX, pointY, angle);
    var newX = rotated[0] + 500;
    var newY = rotated[1] + 500;

    $("#main").animate({rotate: angle + "deg"}, 1000);  
    $("body").animate({scrollLeft: newX,
                       scrollTop:  newY}, 1000)
}