Question

这是firefox工作得很好的问题，而chrome有问题。 Opera还有其他我需要解决的问题和IExplore我还没有考虑过测试（现在不在乎是非常诚实）。

我有一个实验，我使用JqueryRotate（设置元素的旋转）和左右箭头键旋转从上面看到的汽车图片。使用javascript / jquery将汽车设置到中心（工作 - 没问题）。如果使用向上箭头，则汽车朝向其指向的方向向上移动 - 这是问题发生的地方。不要介意你不能同时转弯和开车，这将是固定的，没有概率。但是在我转动然后向前移动之后，图片会移动一下吗？为什么呢？

javascript：

    var angle = 0;
var degreeInRadians = 2*Math.PI/360;
var realX = 0; 
var realY = 0;

$(document).ready(function(){
    placeInCenter($("#carImage"));
});

$(document).keydown(function(e){
    //left
    if (e.keyCode == 37) { 
        rotateLeft($("#carImage"));
        return false;
    }
    //up
    if (e.keyCode == 38) { 
        moveForward($("#carImage"),1);
        return false;
    }   
    //right
    if (e.keyCode == 39) { 
        rotateRight($("#carImage"));
        return false;
    }
    //down
    if (e.keyCode == 40) { 
        //TODO move the car forward
        return false;
    }    
});



function placeInCenter(element) {
    // get viewport height and width and divide it by 2
    centerY = window.innerHeight/2;
    centerX = window.innerWidth/2;

    //set absoulte positioning on element
    $(element).css("position", "absolute");
    // place the element
    $(element).offset({ top: centerY, left: centerX });
    //update realX and realY
    realX = centerX;
    realY = centerY;
}

function rotateRight(element) {
    if(angle <360) {
        angle++;
    }
    else {
        angle=0;
    }
    element.rotate(angle);
}

function rotateLeft(element) {
    if(angle > 0) {
        angle--;
    }
    else {
        angle=359;
    }
    element.rotate(angle);
}

function moveForward(element, speed) {
    //move the element to polar cordinate (speed,angle)
    realX = realX + Math.cos(degreeInRadians * angle);
    realY = realY + Math.sin(degreeInRadians * angle);

    $(element).offset({ top: realY, left: realX });
}

演示：http://www.perandersen.no/sandbox/fromAbove/

Answer 1

问题是WebKit似乎设置了从旋转元素的边界框偏移，而Firefox从原始边界框偏移它，然后应用旋转。

将手指放在汽车的角落，旋转它，然后向前移动。汽车边界框的左上角（旋转后最左边和最顶点）将与你的手指对齐。

如果您使用.css({ top: ... left: })而不是.offset()，它似乎在Firefox和WebKit中正常工作，并设置以下css样式：

#carImage {
    position: relative;
    margin-left: -100px;
    margin-top: -51px;    
}

演示：http://jsfiddle.net/jtbowden/2aeyP/2/

在JavaScript中沿旋转方向移动旋转元素

1 个答案: