几何接口
几何接口是 CSS 模块，它提供用于处理 3D 和 2D 图形的接口，特别是用于处理点、矩形、四边形和变换矩阵（用于平移/移动、缩放、旋转、倾斜/剪切/倾斜和翻转图形的操作，以及用于乘法/链接和反转/撤消这些操作）。
作为 Web 开发人员，您并不总是直接使用几何接口，而是使用其他依赖于它们的特性：CSS 变换的部分、Canvas API、WebXR 设备 API以及（更直接地）VideoFrame.visibleRect、Element.getClientRects()和Element.getBoundingClientRect()。
接口
DOMMatrix-
表示变换矩阵，用于平移/移动、缩放、旋转、倾斜/剪切/倾斜和翻转图形的操作，以及用于乘法/链接和反转/撤消这些操作。
DOMMatrixReadOnly-
DOMMatrix的只读版本。 DOMPoint-
在坐标系中表示一个 2D 或 3D 点；它包括最多三个维度中坐标的值，以及一个可选的透视值。
DOMPointReadOnly-
DOMPoint的只读版本。 DOMQuadDOMRect-
表示矩形的大小和位置。
DOMRectReadOnly-
DOMRect的只读版本。
示例
Path2D.addPath()和CanvasPattern.setTransform()文章有一些使用某些几何接口的示例。
规范
| 规范 |
|---|
| 几何接口模块级别 1 # DOMMatrix |
| 几何接口模块级别 1 # DOMPoint |
| 几何接口模块级别 1 # DOMQuad |
| 几何接口模块级别 1 # DOMRect |
浏览器兼容性
api.DOMMatrix
BCD 表格仅在浏览器中加载
api.DOMMatrixReadOnly
BCD 表格仅在浏览器中加载
api.DOMPoint
BCD 表格仅在浏览器中加载
api.DOMPointReadOnly
BCD 表格仅在浏览器中加载
api.DOMQuad
BCD 表格仅在浏览器中加载
api.DOMRect
BCD 表格仅在浏览器中加载
api.DOMRectReadOnly
BCD 表格仅在浏览器中加载
另请参阅
Path2D.addPath()CanvasPattern.setTransform()CanvasRenderingContext2D.getTransform()CanvasRenderingContext2D.setTransform()CSSTransformValue.toMatrix()CSSTransformComponent.toMatrix()Element.getBoundingClientRect()Element.getClientRects()VideoFrame.visibleRectXRLightEstimateXRRigidTransform