幾何インターフェイス
幾何インターフェイス は、 3D および 2D グラフィックを操作するためのインターフェイスを提供する CSS モジュールです。特に、点、長方形、四角形、座標変換行列 (グラフィックを移動、拡大縮小、回転、歪め/傾け、反転、乗算/連鎖させ、逆演算/元に戻す処理)を演算するためのインターフェイスを提供します。
ウェブ開発者であれば、常に幾何インターフェイスを直接使用するわけではありませんが、その代わりに裏で幾何インターフェイスに頼っている他の機能、たとえば CSS 座標変換、キャンバス API 、WebXR 機器 API の一部、そして(より直接的に)VideoFrame.visibleRect
、Element.getClientRects()
、Element.getBoundingClientRect()
などを使用しています。
インターフェイス
DOMMatrix
-
座標変換行列を表します。グラフィックの平行移動、拡大縮小、回転、歪め/せん断/傾け、反転、乗算/連結、逆演算/取り消しなどの演算を行います。
DOMMatrixReadOnly
-
DOMMatrix
の読み取り専用版です。 DOMPoint
-
座標系内の 2D または 3D の点を表します。 3D までの座標の値と、オプションの視点位置を含みます。
DOMPointReadOnly
-
DOMPoint
の読み取り専用版です。 DOMQuad
DOMRect
-
長方形の大きさと位置を表します。
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
BCD tables only load in the browser
api.DOMMatrixReadOnly
BCD tables only load in the browser
api.DOMPoint
BCD tables only load in the browser
api.DOMPointReadOnly
BCD tables only load in the browser
api.DOMQuad
BCD tables only load in the browser
api.DOMRect
BCD tables only load in the browser
api.DOMRectReadOnly
BCD tables only load in the browser
関連情報
Path2D.addPath()
CanvasPattern.setTransform()
CanvasRenderingContext2D.getTransform()
CanvasRenderingContext2D.setTransform()
CSSTransformValue.toMatrix()
CSSTransformComponent.toMatrix()
Element.getBoundingClientRect()
Element.getClientRects()
VideoFrame.visibleRect
XRLightEstimate
XRRigidTransform