CSS轉換後的jQuery偏移問題

我正在製作一個用於縮放和平移圖像的移動web視圖;使用CSS變換（縮放）縮放和jQuery的「偏移（）」功能進行平移。CSS轉換後的jQuery偏移問題

我遇到的問題是，如果我將圖像放大或縮小之前做任何平移，圖像跳轉到視圖的左上角或右下角（分別）。初始跳轉後，平移和縮放恢復正常工作。如果我在縮放前平移，則不會發生任何問題。

我已經把問題縮小到了非常接近的範圍，就我所知，在平移手勢（touchmove）期間圖像的偏移量正在發生變化時。我使用的事件監聽器是相似的：

function touchmoveListener(event) { 
    // get current touch event coordinates 
    var curX = event.X; 
    var curY = event.Y; 

    // pan image by changing offset 
    var curOffset = $("#image").offset(); 
    var newOffset = { 
     left: curOffset.left + (curX - lastX), 
     top: curOffset.top + (curY - lastY) 
    }; 
    $("#image").offset(newOffset); 

    // store coordinates for future panning 
    lastX = curtX; 
    lastY = curY; 
}

我console.log'ed圖像的原始偏移，新計算的偏移量（前分配），最後圖像的新的分配後的偏移量。當我得到了放大，然後泛的問題（放大2.5倍，平移到左），我得到這樣的輸出：

original offset: {left: -215, top: -100} // normal original location, okay! 
computed offset: {left: -216, top: -100} // pan 1px to the left, looks good! 
assigned offset: {left: -441, top: -325} // what the...? both off by 225px!

我真的不知道是什麼問題，因爲我我記錄了正在傳遞給offset（）函數的確切對象的座標，但顯然分配的座標完全不同。有人知道這裏發生了什麼問題嗎？任何輸入將不勝感激。

注：

我看着jQuery的偏移量（）CSS變換的bug（http://bugs.jquery.com/ticket/8362），我使用的WebKit經過測試，但我遇到的問題是顯然與設置偏移，沒有訪問它。
lastX和lastY響應touchstart事件（touchmove觸發之前）被初始化，所以它不是一個問題，他們

感謝，

-Brendan

來源

2013-07-03 Brendan Cain

使用CSS轉換進行平移有什麼問題？ – zeroflagL

@zeroflagL CSS平移沒有任何錯誤（它確實使得縮放/平移無bug工作），只是通過個人隧道視角來弄清爲什麼offset（）方法不起作用:-P感謝輸入！ –

你如何放大？用手勢，控制或點擊/觸摸？ – zeroflagL

.offset(coordinates)改變的位置文檔的目標元素relative。

如果#image的初始位置不是relative，這可能會解釋當事件偵聽器首次初始化時您看到的定位跳轉 - 圖像的位置相對於文檔而不是其初始位置發生更改。

來源

2015-01-03 17:02:35

CSS轉換後的jQuery偏移問題

回答

相關問題