Geometry interfaces

幾何介面 是一個 CSS 模組,它提供了用於處理 2D 和 3D 圖形的介面——特別是用於處理點、矩形、四邊形以及 變換矩陣(用於平移/移動、縮放、旋轉、傾斜/剪下、翻轉圖形的操作,以及用於矩陣乘法/連結和求逆/撤銷這些操作)。

作為 Web 開發者,您並不總是直接使用幾何介面,而是使用依賴於它們在後臺工作的其他功能:CSS Transforms 的部分、Canvas APIWebXR Device API,以及(更直接地)VideoFrame.visibleRectElement.getClientRects()Element.getBoundingClientRect()

介面

DOMMatrix

表示一個 變換矩陣,用於平移/移動、縮放、旋轉、傾斜/剪下、翻轉圖形的操作,以及用於矩陣乘法/連結和求逆/撤銷這些操作。

DOMMatrixReadOnly

DOMMatrix 的只讀版本。

DOMPoint

表示座標系中的一個 2D 或 3D 點;它包含最多三個維度的座標值,以及一個可選的透視值。

DOMPointReadOnly

DOMPoint 的只讀版本。

DOMQuad

表示四個 DOMPoint 物件的集合,它們定義了一個 四邊形 的角。

DOMRect

表示矩形的大小和位置。

DOMRectReadOnly

DOMRect 的只讀版本。

示例

Path2D.addPath()CanvasPattern.setTransform() 文章中包含使用一些幾何介面的示例。

規範

規範
Geometry Interfaces Module Level 1
# DOMMatrix
Geometry Interfaces Module Level 1
# DOMPoint
Geometry Interfaces Module Level 1
# DOMQuad
Geometry Interfaces Module Level 1
# DOMRect

瀏覽器相容性

api.DOMMatrix

api.DOMMatrixReadOnly

api.DOMPoint

api.DOMPointReadOnly

api.DOMQuad

api.DOMRect

api.DOMRectReadOnly

另見