Geometry interfaces
幾何介面 是一個 CSS 模組,它提供了用於處理 2D 和 3D 圖形的介面——特別是用於處理點、矩形、四邊形以及 變換矩陣(用於平移/移動、縮放、旋轉、傾斜/剪下、翻轉圖形的操作,以及用於矩陣乘法/連結和求逆/撤銷這些操作)。
作為 Web 開發者,您並不總是直接使用幾何介面,而是使用依賴於它們在後臺工作的其他功能:CSS Transforms 的部分、Canvas API、WebXR Device API,以及(更直接地)VideoFrame.visibleRect、Element.getClientRects() 和 Element.getBoundingClientRect()。
介面
DOMMatrix-
表示一個 變換矩陣,用於平移/移動、縮放、旋轉、傾斜/剪下、翻轉圖形的操作,以及用於矩陣乘法/連結和求逆/撤銷這些操作。
DOMMatrixReadOnly-
DOMMatrix的只讀版本。 DOMPoint-
表示座標系中的一個 2D 或 3D 點;它包含最多三個維度的座標值,以及一個可選的透視值。
DOMPointReadOnly-
DOMPoint的只讀版本。 DOMQuadDOMRect-
表示矩形的大小和位置。
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
載入中…
另見
Path2D.addPath()CanvasPattern.setTransform()CanvasRenderingContext2D.getTransform()CanvasRenderingContext2D.setTransform()CSSTransformValue.toMatrix()CSSTransformComponent.toMatrix()Element.getBoundingClientRect()Element.getClientRects()VideoFrame.visibleRectXRLightEstimateXRRigidTransform