幾何インターフェイス

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMMatrix
DOMMatrix() constructor
a
b
c
d
e
f
fromFloat32Array() static method
fromFloat64Array() static method
fromMatrix() static method
invertSelf
m11
m12
m13
m14
m21
m22
m23
m24
m31
m32
m33
m34
m41
m42
m43
m44
multiplySelf
preMultiplySelf
rotateAxisAngleSelf
rotateFromVectorSelf
rotateSelf
scale3dSelf()
scaleSelf()
setMatrixValue
skewXSelf
skewYSelf
translateSelf
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

api.DOMMatrixReadOnly

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMMatrixReadOnly
DOMMatrixReadOnly() constructor
a
b
c
d
e
f
flipX()
flipY()
fromFloat32Array() static method
fromFloat64Array() static method
fromMatrix() static method
inverse()
is2D
isIdentity
m11
m12
m13
m14
m21
m22
m23
m24
m31
m32
m33
m34
m41
m42
m43
m44
multiply()
rotate()
rotateAxisAngle()
rotateFromVector()
scale()
scale3d()
scaleNonUniform()
Deprecated
skewX()
skewY()
toFloat32Array()
toFloat64Array()
toJSON()
toString()
transformPoint()
translate()
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.
See implementation notes.

api.DOMPoint

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMPoint
DOMPoint() constructor
fromPoint() static method
w
Available in workers
x
y
z

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.DOMPointReadOnly

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMPointReadOnly
DOMPointReadOnly() constructor
fromPoint() static method
matrixTransform()
toJSON()
w
Available in workers
x
y
z

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.DOMQuad

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMQuad
DOMQuad() constructor
fromQuad() static method
fromRect() static method
getBounds()
p1
p2
p3
p4
toJSON()
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

api.DOMRect

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMRect
DOMRect() constructor
fromRect() static method
height
width
Available in workers
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

api.DOMRectReadOnly

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMRectReadOnly
DOMRectReadOnly() constructor
bottom
fromRect() static method
height
left
right
toJSON
top
width
Available in workers
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

関連情報