在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中以旋轉方向移動旋轉元素

回答

相關問題