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 /画布鼠标位置时关闭放置在现场实际

回答

相关问题