Déplacement d’un élément pivoté dans le sens de la rotation en JavaScript

C’est un problème pour lequel firefox fonctionne parfaitement, alors que chrome est le problème. Opera a des problèmes supplémentaires que je dois résoudre et IExplore, je n’ai pas encore essayé de le tester (ne vous inquiétez pas pour l’instant, soyez tout à fait honnête).

J’ai une expérience qui consiste à faire pivoter l’image d’une voiture vue de dessus à l’aide de JqueryRotate (définit la rotation d’un élément) et des touches fléchées gauche / droite. La voiture est réglée au centre en utilisant javascript / jquery (fonctionne – pas de problème). Si la flèche vers le haut est utilisée, la voiture monte dans la direction indiquée – c’est ici que le problème se pose. Ne faites pas attention au fait que vous ne pouvez pas tourner et conduire en même temps, cela sera corrigé, pas de problème. Mais la photo bouge un peu après que je l’ai tournée puis avance? Pourquoi?

le 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  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 }); }

la démo: http://www.perandersen.no/sandbox/fromAbove/

Le problème est que WebKit semble définir un décalage par rapport au cadre de sélection de l’élément pivoté, alors que Firefox le décale du cadre de sélection d’origine, puis applique la rotation.

Placez votre doigt au coin de la voiture, faites-la pivoter, puis déplacez-la vers l’avant. Le coin supérieur gauche de la boîte de sélection de la voiture (ses points les plus à gauche et le plus haut après la rotation) s’alignera avec votre doigt.

Cela semble fonctionner correctement dans Firefox et WebKit si vous utilisez .css({ top: ... left: }) au lieu de .offset() et définissez le style css suivant:

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

Démo: http://jsfiddle.net/jtbowden/2aeyP/2/