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

Question

Это проблема, когда firefox работает отлично, в то время как хром имеет проблему. У 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/