19

キャンバスで描画操作を行っています。私の意見では、キャンバスの左上隅に対するカーソル位置を計算する最良の方法は、次の使用法です.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オブジェクトを返します。xywidthheight

  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;
};
4

1 に答える 1

33

によって返されるオブジェクトは、一部のブラウザーではおよびプロパティをgetBoundingClientRect()持つ場合がありますが、すべてではありません。、、、およびプロパティが常にあります。xylefttoprightbottom

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

rect.xしたがって、 andrect.yをrect.leftandに変更するだけですrect.top。

于 2015-04-20T07:44:43.923 に答える