在谷歌浏览器中，getBoundingClientRect（）。x是未定义的 [英] In google chrome, getBoundingClientRect().x is undefined

问题描述

我正在画布上执行绘图操作。在我看来，计算光标位置相对于Canvase左上角的最佳方式是使用 .getBoundingClientRect（）：

  HTMLCanvasElement.prototype.relativeCoords = function（event）{
 var x，y; 
 //这是画布的当前屏幕矩形
 var rect = this.getBoundingClientRect（）; 
 
 //将鼠标偏移量重新计算为相对偏移量
 x = event.clientX  -  rect.x; 
 y = event.clientY  -  rect.y; 
 // Debug 
 console.log（x（，x，）= event.clientX（，event.clientX，） -  rect.x（，rect.x，） ）; 
 //返回数组
 return [x，y]; 
} 
  

我看到这段代码没有错，它在firefox中有效。 测试。

在google但是，我的调试行显示了这个：

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

我做错了什么？ 这是否符合规范？

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

根据规格说明：

getBoundingClientRect（）

getBoundingClientRect（）方法在被调用时必须返回以下算法的
结果：

1. 让列表成为在调用此方法的同一元素上调用 getClientRects（）的结果。 DOMRect 对象，它的 x ， y ， width 和 height 成员是否则，返回一个描述包含列表中第一个矩形的最小矩形的 DOMRect 对象。

以及所有
剩余的wh矩形 ：//dev.w3.org/fxtf/geometry/#DOMRectrel =noreferrer> DOMRect



 接口DOMRect：DOMRectReadOnly {
 inherit attribute unrestricted double x; 
继承属性unrestricted double y; 
继承属性unrestricted double width; 
继承属性unrestricted double height; 
}; 
  




解决方案

由返回的对象getBoundingClientRect （）在某些浏览器中可能有 x 和 y 属性，但并非全部。它始终有 left ， top ，右和 bottom 属性。





我推荐使用 MDN文档，而不是任何W3C规范，当你想知道浏览器实际上实现了什么。请参阅 MDB文档获取getBoundingClientRect（）以获得更准确的信息有关此功能的信息。





因此，您只需更改 rect.x 和 rect.y 到 rect.left 和 rect.top 。




I'm performing drawing operations on canvas. The best way to calculate cursor position relative to canvase top left corner is, in my opinion, usage of .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];
}

I see nothing wrong with this code and it works in firefox. Test it.

In google chrome however, my debug line prints this:

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

What am I doing wrong? Is this not according to the specifications?

Edit: seems my code follows W3C:

From the specs:

getBoundingClientRect()

The getBoundingClientRect() method, when invoked, must return the result of the following algorithm:

1. Let list be the result of invoking getClientRects() on the same element this method was invoked on.

2. If the list is empty return a DOMRect object whose x, y, width and height members are zero.

3. Otherwise, return a DOMRect object describing the smallest rectangle that includes the first rectangle in list and all of the remaining rectangles of which the height or width is not zero.

DOMRect

interface DOMRect : DOMRectReadOnly {
    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double width;
    inherit attribute unrestricted double height;
};

解决方案

The object returned by getBoundingClientRect() may have x and y properties in some browsers, but not all. It always has left, top, right, and bottom properties.

I recommend using the MDN docs instead of any W3C specs when you want to know what browsers actually implement. See the MDN docs for getBoundingClientRect() for more accurate information on this function.

So all you need to do is change your rect.x and rect.y to rect.left and rect.top.

这篇关于在谷歌浏览器中，getBoundingClientRect（）。x是未定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！