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

这是一个问题，其中firefox工作得很好，而chrome有问题。 Opera还有其他问题，我需要地址和IExplore我还没有打扰过测试（现在不太在乎老实说）。在JavaScript中以旋转方向移动旋转元素

我有一个实验将在哪里旋转从上面看到使用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/

来源

2012-03-20 Piddien

“动作有点” 怎么样？它似乎工作正常。 – 2012-03-20 00:09:13

不，它跳过几个像素。至少在这里在Windows 7 chrome17.0.963.79 – Piddien 2012-03-20 00:14:09

尝试旋转30-40度然后向前移动，这应该重新创建令人讨厌的问题:( – Piddien 2012-03-20 00:19:55

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

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

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

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

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

来源

2012-03-20 00:25:44

谢谢你猜我必须使用浏览器特定的代码来访问Chrome浏览器 – Piddien 2012-03-20 00:32:14

我已经设置了一个小提琴希望有人可以帮助我概述一个解决方案。我很累，时间操作系统01:52在这里... http://jsfiddle.net/KfZ9z/ – Piddien 2012-03-20 00:52:37

请参阅编辑一个简单的解决方法。 – 2012-03-20 01:08:49

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

回答

相关问题