Question

我在画布上执行绘图操作。在我看来，相对于画布左上角计算光标位置的最佳方法是使用.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中运行。 Test it.

在谷歌浏览器中，我的调试行打印出来：

x（NaN）= event.clientX（166） - rect.x（undefined）

我做错了什么？ ~~这不符合规格吗？~~

编辑：似乎我的代码遵循W3C：

来自规格：

`getBoundingClientRect()`

getBoundingClientRect()方法在调用时必须返回   以下算法的结果：



让list成为在调用此方法的同一元素上调用getClientRects()的结果。



如果列表为空，则返回DOMRect，x，y和width成员为零的height对象。



否则，返回一个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;
};

Answer 1

getBoundingClientRect()返回的对象在某些浏览器中可能包含x和y属性，但不是全部。它始终具有left，top，right和bottom属性。

当您想知道实际实现的浏览器时，我建议使用MDN docs而不是任何W3C规范。有关此功能的更准确信息，请参阅MDN docs for getBoundingClientRect()。

所以您需要做的就是将rect.x和rect.y更改为rect.left和rect.top。

Answer 2

你这样定义。

var rect.x = this.getBoundingClientRect().width;

var rect.y = this.getBoundingClientRect().height;

在谷歌浏览器中，getBoundingClientRect（）。x未定义

来自规格：

`getBoundingClientRect()`

`DOMRect`

2 个答案: