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でのマウス座標の取得

Canvasでは、適切なマウス座標を取得するのは少し注意が必要です。offsetX/YとLayerX/Yを使用できますが、LayerX / YはWebkit（ChromeとSafari）で非推奨になり、FirefoxにはoffsetX/Yがありません。

正しいマウス位置を取得するための最も防弾の方法を以下に示します。オフセットを一緒に追加して、ツリーを上に移動する必要があります。次に、オフセットにパディングまたは境界線を追加する必要があります。最後に、ページ上に固定位置の要素（ワードプレスの管理バーやつまずきバーなど）がある場合の座標の問題を修正するには、'soffsetTopと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は、控えめに言っても過言ではないものよりもはるかに正確になります。

現在、新しい「あらゆる状況で機能する防弾」マウスコードを持っていません。必要になると思われる場合は、後で入手できます。

編集：ダープ！追加するのを忘れたコードを最終的に提供してくれたchopperdaveに感謝します！

于 2011-08-26T20:51:20.297 に答える