web-dev-qa-db-ja.com

Google Chromeでは、getBoundingClientRect（）。xは未定義です

キャンバス上で描画操作を行っています。 canvaseの左上隅を基準にしてカーソルの位置を計算する最良の方法は、私の考えでは、.getBoundingClientRect()を使用することです。

_HTMLCanvasElement.prototype.relativeCoords = function(event) {
  var x,y;
  //This is the current screen rectangle of canvas
  var rect = this.getBoundingClientRect();

  //Recalculate mouse offsets to relative offsets
  x = event.clientX - rect.x;
  y = event.clientY - rect.y;
  //Debug
  console.log("x(",x,") = event.clientX(",event.clientX,") - rect.x(",rect.x,")");
  //Return as array
  return [x,y];
}
_

私はこのコードに何も問題がなく、Firefoxで動作します。 テストしてください

Google chromeしかし、私のデバッグ行はこれを出力します：

x(NaN) = event.clientX(_166_) - rect.x(undefined)

何が悪いのですか？ 仕様通りではないですか？

編集：私のコードはW3Cに従っているようです：

スペックから：

getBoundingClientRect()

getBoundingClientRect()メソッドは、呼び出されると、次のアルゴリズムの結果を返す必要があります。

  1. Listを、このメソッドが呼び出されたのと同じ要素でgetClientRects()を呼び出した結果とします。

  2. リストが空の場合、DOMRect、x、yおよびwidthメンバーがゼロであるheightオブジェクトを返します。

  3. それ以外の場合は、リストの最初の長方形と、高さまたは幅がゼロでない残りのすべての長方形を含む最小の長方形を表すDOMRectオブジェクトを返します。

DOMRect

_interface DOMRect : DOMRectReadOnly {
    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double width;
    inherit attribute unrestricted double height;
};
_
javascriptgoogle-chromegetboundingclientrect
18
Tomáš Zato - Reinstate Monica

getBoundingClientRect()によって返されるオブジェクトは、一部のブラウザではxおよびyプロパティを持つ場合がありますが、すべてではない場合があります。常にleft、top、right、およびbottomプロパティがあります。

ブラウザが実際に実装しているものを知りたい場合は、W3C仕様の代わりに MDN docs を使用することをお勧めします。この関数のより正確な情報については、 getBoundingClientRect（）のMDNドキュメント を参照してください。

だからあなたがする必要があるのはあなたのrect.xおよびrect.y〜rect.leftおよびrect.top。

30
Michael Geary