幾何インターフェイス

幾何インターフェイス は、 3D および 2D グラフィックを操作するためのインターフェイスを提供する CSS モジュールです。特に、点、長方形、四角形、座標変換行列 (グラフィックを移動、拡大縮小、回転、歪め/傾け、反転、乗算/連鎖させ、逆演算/元に戻す処理)を演算するためのインターフェイスを提供します。

ウェブ開発者であれば、常に幾何インターフェイスを直接使用するわけではありませんが、その代わりに裏で幾何インターフェイスに頼っている他の機能、たとえば CSS 座標変換キャンバス APIWebXR 機器 API の一部、そして(より直接的に)VideoFrame.visibleRect (en-US)Element.getClientRects()Element.getBoundingClientRect() などを使用しています。

インターフェイス

DOMMatrix

座標変換行列を表します。グラフィックの平行移動、拡大縮小、回転、歪め/せん断/傾け、反転、乗算/連結、逆演算/取り消しなどの演算を行います。

DOMMatrixReadOnly

DOMMatrix の読み取り専用版です。

DOMPoint

座標系内の 2D または 3D の点を表します。 3D までの座標の値と、オプションの視点位置を含みます。

DOMPointReadOnly

DOMPoint の読み取り専用版です。

DOMQuad

四辺形 の角を定義する 4 つの DOMPoint オブジェクトの集合を表します。

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

関連情報