不正確的layerX/layerY值？

我試圖實現一個功能作爲Firefox的加載項的一部分，使用戶可以繪製畫布。不正確的layerX/layerY值？

function draw(event,context,drawit) { 
var drawx = event.layerX; 
var drawy = event.layerY; 

if (!drawit) { 
     context.beginPath(); 
     context.strokeStyle='rgb(0,255,0)'; 
     context.lineWidth=1; 
     context.moveTo(drawx,drawy); 
     drawit = true; 
} else { 
     context.lineTo(drawx,drawy); 
     context.stroke(); 
}

};

這可以工作，但layerX/layerY的結果和繪製的線之間似乎有區別。只能在畫布元素的左上部分繪製。當鼠標指針到達元素的大約一半時，線條不會進一步移動。

我已經檢查過Firebug中的元素的位置，它看起來沒問題：畫布位於div元素內，並且都具有100％的定義寬度，而繪圖在元素的大約50％處結束。它也可以手動設置這些值，以便該線也被繪製在畫布元素的右側。有沒有人有一個想法是什麼問題？

來源

2010-08-27 Bob

當鼠標指針達到大約元素的一半時，行不再繼續。

這可能會發生很多原因。錯誤翻譯的上下文（來自旋轉/平移/縮放）和不匹配的畫布大小（您在html中寫入的內容以及您在代碼中考慮的內容）。

您是否確定LayerX和LayerY正在爲您提供正確的鼠標座標？你認爲layerx/y和繪製的東西有什麼不同？有抵消嗎？我問，因爲我的鼠標代碼是一個比較複雜的：

// Sets mx,my to the mouse position relative to the canvas 
// unfortunately this can be tricky, we have to worry about padding and borders 
function getMouse(e) { 
     var element = canvas, offsetX = 0, offsetY = 0; 

     if (element.offsetParent) { 
     do { 
      offsetX += element.offsetLeft; 
      offsetY += element.offsetTop; 
     } while ((element = element.offsetParent)); 
     } 

     // Add padding and border style widths to offset 
     offsetX += stylePaddingLeft; 
     offsetY += stylePaddingTop; 

     offsetX += styleBorderLeft; 
     offsetY += styleBorderTop; 

     mx = e.pageX - offsetX; 
     my = e.pageY - offsetY 
}

來源

2010-08-27 13:23:44

我沒有線索的區別是什麼，但似乎的鼠標移動速度更快的位置，所以10臺mousemovement約5個單位在畫布上。感謝您的代碼，我會嘗試一下，看看我是否能夠找到一個解決方案，讓行按預期移動。 – Bob 2010-08-27 14:46:13

好的，我找到了解決我的問題的方法：在畫布繪製中添加「position：absolute」後，在整個元素中起作用。 – Bob 2010-08-27 18:21:41

@Bob - 這是因爲'layerX'和'layerY'對於非定位元素而言是相對於*整個文檔*的。 – 2011-12-26 22:32:32

不正確的layerX/layerY值？

回答

相關問題