幾何インターフェイス
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
幾何インターフェイス は、 3D および 2D グラフィックを操作するためのインターフェイスを提供する CSS モジュールです。特に、点、長方形、四角形、座標変換行列 （グラフィックを移動、拡大縮小、回転、歪め/傾け、反転、乗算/連鎖させ、逆演算/元に戻す処理）を演算するためのインターフェイスを提供します。
ウェブ開発者であれば、常に幾何インターフェイスを直接使用するわけではありませんが、その代わりに裏で幾何インターフェイスに頼っている他の機能、たとえば CSS 座標変換、キャンバス API 、WebXR 機器 API の一部、そして（より直接的に）VideoFrame.visibleRect、Element.getClientRects()、Element.getBoundingClientRect() などを使用しています。
インターフェイス
DOMMatrix-
座標変換行列を表します。グラフィックの平行移動、拡大縮小、回転、歪め/せん断/傾け、反転、乗算/連結、逆演算/取り消しなどの演算を行います。
DOMMatrixReadOnly-
DOMMatrixの読み取り専用版です。 DOMPoint-
座標系内の 2D または 3D の点を表します。 3D までの座標の値と、オプションの視点位置を含みます。
DOMPointReadOnly-
DOMPointの読み取り専用版です。 DOMQuadDOMRect-
長方形の大きさと位置を表します。
DOMRectReadOnly-
DOMRectの読み取り専用版です。
例
Path2D.addPath() と CanvasPattern.setTransform() の記事に、幾何インターフェイスを使用する例があります。
仕様書
| Specification |
|---|
| 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