Question

I m 捕捉 mo象这样的立场

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

and it has worked like a dream in all modern browsers while in development, Even tested Wrapping the <canvas/> in a basic dom structure to make sure mouse position adjusted...

显然,现在我把它放在它没有工作的实际地点......

You can see here http://jondavidjohn.com/projects/

mo的位置在实际 cur子以南的一段路上结束,而任何具体做法都可能造成这种情况?

SOLUTION

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

Answer 1

COPIED FROM: http://simonsarris.com/blog/510-making-html5-canvas-useful

在Canvas实现 mo化坐标

在Canvas实现良好的 mo化坐标。您可使用冲抵X/Y和GirX/Y,但LierX/Y被贴在网基(Chrome和Safari)中,而LexX/Y没有被冲抵。

The most bulletproof way to get the correct mouse position is shown below. You have to walk up the tree adding the offsets together. Then you must add any padding or border to the offset. Finally, to fix coordinate problems when you have fixed-position elements on the page (like the wordpress admin bar or a stumbleupon bar) you must add the ’s offsetTop and 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};
}

Answer 2

e. 注销X和e.offset 而是现在的Y。

当你介绍诸如间隙和dding等其他一些东西时,它实际上变得更加复杂,但被抵消。页: 1 Y将比你至少说什么更准确。

我现在看不到我的新的“防弹工作——在心中”,如果你认为你需要的话,我可以 later。

edit: Derp! Thanks chopperdave for finally providing the code I forgot to add!

友情链接