幾何インターフェイス
幾何インターフェイス は、 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()
の記事に、幾何インターフェイスを使用する例があります。
仕様書
ブラウザーの互換性
>api.DOMMatrix
Loading…
api.DOMMatrixReadOnly
Loading…
api.DOMPoint
Loading…
api.DOMPointReadOnly
Loading…
api.DOMQuad
Loading…
api.DOMRect
Loading…
api.DOMRectReadOnly
Loading…
関連情報
Path2D.addPath()
CanvasPattern.setTransform()
CanvasRenderingContext2D.getTransform()
CanvasRenderingContext2D.setTransform()
CSSTransformValue.toMatrix()
CSSTransformComponent.toMatrix()
Element.getBoundingClientRect()
Element.getClientRects()
VideoFrame.visibleRect
XRLightEstimate
XRRigidTransform