Web 开发人员经常需要确定元素在页面中的位置，或者更普遍地说，它相对于另一个元素的位置。现有的执行此操作的 API 存在重大限制。新的 GeometryUtils 接口及其支持的接口 DOMPoint、DOMRect 和 DOMQuad 提供了 Web 标准 API 来解决这些问题。Firefox 是第一个实现这些 API 的浏览器；它们在 Firefox 31 Nightly 版本中可用。

检索元素几何图形的当前最佳标准化 API

目前，检索元素几何图形的最佳标准化 DOM API 是 element.getBoundingClientRect() 和 element.getClientRects()。这些返回相对于包含文档的视口元素的边框框矩形。这些 API 跨浏览器受支持，但存在一些限制

• 当存在复杂的 CSS 变换时，它们会返回包含变换边框框的最小轴对齐矩形。这会丢失信息。
• 无法获取内容框、填充框或边框框的坐标。在简单的情况下，您可以从 getBoundingClientRect()/getClientRects() 的结果中添加或减去计算出的样式值，但这很笨拙且难以正确实现。例如，当 <span> 分成几个片段时，它的左边界仅添加到其中一个片段中——第一个或最后一个，具体取决于文本的方向性。
• 无法获取相对于另一个元素的框几何图形。

介绍 getBoxQuads()

GeometryUtils.getBoxQuads() 方法在 Document、Element 和 TextNode 上实现，解决了这些问题。它返回一个 DOMQuad 列表，每个 CSS 片段一个（通常此列表只有一个
DOMQuad).

示例

var quads = document.getElementById("d").getBoxQuads();
// quads.length == 1
// quads[0].p1.x == 100
// quads[0].p1.y == 100
// quads[0].p3.x == 200
// quads[0].p3.y == 200

使用边界

DOMQuad 是四个 DOMPoint 的集合，定义了任意四边形的角。返回 DOMQuad 使 getBoxQuads() 即使在存在任意 2D 或 3D 变换时也能返回准确的信息。它有一个方便的 bounds 属性，在您只需要轴对齐边界矩形的情况下返回 DOMRectReadOnly。

例如

var quads = document.getElementById("d").getBoxQuads();
// quads[0].p1.x == 150
// quads[0].p1.y == 150 - 50*sqrt(2) (approx)
// quads[0].p3.x == 150
// quads[0].p3.y == 150 + 50*sqrt(2) (approx)
// quads[0].bounds.width == 100*sqrt(2) (approx)

传入选项

默认情况下，getBoxQuads() 返回相对于节点文档视口的边框框，但这可以通过传入一个可选的
包含以下（可选）成员的选项字典来自定义

• box："content"、"padding"、"border" 或 "margin" 之一，选择要返回的 CSS 框类型。
• relativeTo：Document、Element 或 TextNode；getBoxQuads() 返回相对于该节点边框框左上角的坐标（如果有多个片段，则为第一个片段的边框框）。对于文档，使用文档视口的原点。

示例

var quads = document.getElementById("e").getBoxQuads({
  relativeTo:document.getElementById("d")
});
// quads[0].p1.x == 0
// quads[0].p1.y == 0

quads = document.getElementById("e").getBoxQuads({
  relativeTo:document.getElementById("d"),
  box:"content"
});
// quads[0].p1.x == 20
// quads[0].p1.y == 20

relativeTo 节点不必是接收 getBoxQuads() 的节点的祖先。这些节点甚至可以在不同的文档中，尽管它们必须位于相同的最顶层浏览上下文（即浏览器选项卡）中。

浅尝辄止

如果您读到这里，您可能已经足够敏锐地注意到 GeometryUtils 中的其他方法——用于坐标转换的方法。这些将在以后的博文中介绍。