HTML5 /畫布鼠標位置時關閉放置在現場實際

我捕捉這樣HTML5 /畫布鼠標位置時關閉放置在現場實際

mouse_move: function(e) 
    { 
     mousePos.x = e.pageX - vr.o.context.canvas.offsetLeft; 
     mousePos.y = e.pageY - vr.o.context.canvas.offsetTop; 
    },

鼠標位置和它一直像一個夢在所有現代瀏覽器而開發，測試，即使在包裝紙的<canvas/>一個基本的DOM結構，以確保鼠標的位置調整...

很明顯，現在我把它在它不工作的實際網站...

您可以在這裏看到http://jondavidjohn.com/projects/

鼠標位置在實際光標的南邊相當多的方向結束，任何具體可能導致這種情況的東西？

SOLUTION

mouse_move: function(e) 
{ 
    mousePos.x = e.offsetX; 
    mousePos.y = e.offsetY; 
},

來源

2011-08-26 jondavidjohn

複製了：http://simonsarris.com/blog/510-making-html5-canvas-useful

獲取鼠標座標，畫布

獲得良好的鼠標座標是在畫布上有點棘手。您可以使用offsetX/Y和LayerX/Y，但在Webkit（Chrome和Safari）中不推薦使用LayerX/Y，並且Firefox沒有偏移X/Y。

獲得正確鼠標位置的最佳方法如下所示。你必須在樹上走來走去，把偏移量加在一起。然後，您必須添加任何填充或邊框到偏移量。最後，爲了在頁面上有固定位置的元素（如wordpress管理欄或stumbleupon欄）時修復座標問題，必須添加offsetTop和offsetLeft。

然後，您只需從e.pageX/Y值中減去該偏移量即可在幾乎所有可能的情況下獲得完美的座標。

// Creates an object with x and y defined, 
// set to the mouse position relative to the state's canvas 
// If you wanna be super-correct this can be tricky, 
// we have to worry about padding and borders 
CanvasState.prototype.getMouse = function(e) { 
    var element = this.canvas, offsetX = 0, offsetY = 0, mx, my; 

    // Compute the total offset 
    if (element.offsetParent !== undefined) { 
    do { 
     offsetX += element.offsetLeft; 
     offsetY += element.offsetTop; 
    } while ((element = element.offsetParent)); 
    } 

    // Add padding and border style widths to offset 
    // Also add the <html> offsets in case there's a position:fixed bar 
    offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft; 
    offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop; 

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

    // We return a simple javascript object (a hash) with x and y defined 
    return {x: mx, y: my}; 
}

來源

2012-04-01 04:44:22 chopperdave

哈哈，這很搞笑，答案與@SimonSarris在他自己的博客中競爭...... ...尷尬... – jondavidjohn

沒有競爭 - 只是更新線程以包括他在他的文章中提到的西蒙的代碼:) – chopperdave

好的工作@chopperdave，我已經忘記了這個Q，從來沒有給他完整的代碼！ –

使用e.offsetX和e.offsetY現在代替。

當你引入一些其他的東西，比如邊距和填充，它實際上會變得更加複雜，但是offsetX和offsetY會比你至少要說的更準確。

我現在沒有我的新「防彈工作」的鼠標代碼，如果您認爲需要它，我可以稍後爲您解決。

編輯：Derp！謝謝chopperdave終於提供我忘了添加的代碼！

來源

2011-08-26 20:51:20

上的畫布對象？ – jondavidjohn

是的，畫布上的邊框和填充將會把事情搞砸。 –

HTML5 /畫布鼠標位置時關閉放置在現場實際

回答

相關問題