Question

我试图围绕另一个元素旋转元素。我把这些代码放在一起，即使代码工作正常，我对元素的旋转也有一点问题。它不是非常准确。蓝点在底部离开轨道。

我玩了代码但无法解决问题。您可以查看fiddle example.

rotateObj函数取自Felix Eve's answer.

function markCircleCenter(circ, orig) {
    if (typeof circ == "string") {
        var elm = document.getElementById(circ);
    } else { var circle = circ; }
    if (typeof orig == "string") {
        var mark = document.getElementById(orig);
    } else { var elm = orig; }
    var width       = parseInt(window.getComputedStyle(elm).width, 10);
    var height      = parseInt(window.getComputedStyle(elm).height, 10);
    var top         = parseInt(window.getComputedStyle(elm).top, 10);
    var left        = parseInt(window.getComputedStyle(elm).left, 10);
    var markWidth   = parseInt(window.getComputedStyle(mark).width, 10);
    var markHeight  = parseInt(window.getComputedStyle(mark).height, 10);
    var circle = {
        circle: elm,
        x: width/2 + left,
        y: height/2 + top,
    };
    mark.style.position = "absolute";
    mark.style.top      = circle.y - markWidth/2 + "px";
    mark.style.left     = circle.x - markHeight/2 + "px";
    document.body.insertBefore(mark, elm.nextSibling);
    return circle;
}

function placeObjIntoOrbit(obj) {
    if (typeof obj == "string") {
        var obj = document.getElementById(obj);
    } else { var obj = obj; }
    var objPos = {
        obj: obj,
        x: origin.x,
        y: parseInt(window.getComputedStyle(origin.circle).top, 10) - parseInt(window.getComputedStyle(obj).width, 10) / 2,
    };
    obj.style.position  = "absolute";
    obj.style.top       = objPos.y  + "px";
    obj.style.left      = objPos.x  + "px";
    return objPos;
}

function rotateObj(pointX, pointY, originX, originY, angle) {
    var angle = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
        y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY,
    };
}

var angle   = 0;
var origin  = markCircleCenter("circle", "origin");
var point   = placeObjIntoOrbit("point");

function spin() {
    if (angle >= 360) { angle = 0; }
    angle += 2;
    var newCoor = rotateObj(point.x, point.y, origin.x, origin.y, angle);
    point.obj.style.left = newCoor.x + "px";
    point.obj.style.top  = newCoor.y + "px";
}
setInterval("spin('point')", 1000/30);

Answer 1

您正在计算点的中心，但使用其左上角来定位它。您需要在定位时考虑点的尺寸。尝试将函数spin()中的最后两行更改为：

point.obj.style.left = (newCoor.x - 4) + "px";
point.obj.style.top  = (newCoor.y - 4) + "px";

（你应该摆脱＆＃34; - 4＆＃34;并替换该点的宽度和高度的一半，但这会更简洁地得到这个想法。）

绕特定点旋转

1 个答案: