3

我正在像这样捕获鼠标位置

    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/

鼠标位置在实际光标以南很远的地方结束，有什么特别的原因可能导致这种情况吗？

解决方案

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

2 回答 2

4

复制自： http ://simonsarris.com/blog/510-making-html5-canvas-useful

在画布上获取鼠标坐标

在 Canvas 上获得良好的鼠标坐标有点棘手。您可以使用 offsetX/Y 和 LayerX/Y，但在 webkit（Chrome 和 Safari）中不推荐使用 LayerX/Y，并且 Firefox 没有 offsetX/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-01T04:44:22.763 回答
2

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

当你引入一些其他的东西时，它实际上会变得更加复杂，比如边距和填充，但是 offsetX 和 offsetY 会比你至少要说的要准确得多。

我现在没有新的“防弹在任何情况下都可以工作”鼠标代码，如果您认为您需要它，我可以稍后为您获取。

编辑：Derp！感谢 chopperdave 终于提供了我忘记添加的代码！

于 2011-08-26T20:51:20.297 回答