Перемещение повернутого элемента в направлении вращения в JavaScript

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 смещает его от исходного ограничивающего прямоугольника, а затем применяет вращение.

Поместите палец в уголавтомобиль, поверните его, а затем двигайте его вперед.Верхний левый угол ограничительной рамки автомобиля (его крайняя левая и верхняя точки после поворота) выровняются с вашим пальцем.

Кажется, он отлично работает в Firefox и WebKit, если вы используете .css({ top: ... left: }) вместо .offset() и установите следующий стиль CSS:

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

Демо: http://jsfiddle.net/jtbowden/2aeyP/2/