Geometry interfaces

Geometrie-Interfaces ist ein CSS-Modul, das Schnittstellen für die Arbeit mit 3D- und 2D-Grafiken bietet – insbesondere für die Arbeit mit Punkten, Rechtecken, Vierecken und Transformationsmatrizen (für Operationen, die Grafiken verschieben/bewegen, skalieren, drehen, verzerren/scheren/neigen und umkehren, sowie zum Multiplizieren/Verketten und zum Invertieren/Rückgängigmachen dieser Operationen).

Als Webentwickler verwenden Sie die Geometrie-Interfaces nicht immer direkt, sondern nutzen andere Funktionen, die im Hintergrund auf ihnen basieren: Teile von CSS Transforms, die Canvas API, die WebXR Device API und (direkter) VideoFrame.visibleRect, Element.getClientRects() und Element.getBoundingClientRect().

Schnittstellen

DOMMatrix

Repräsentiert eine Transformationsmatrix für Operationen, die Grafiken verschieben/bewegen, skalieren, drehen, verzerren/scheren/neigen und umkehren, sowie zum Multiplizieren/Verketten und zum Invertieren/Rückgängigmachen dieser Operationen.

DOMMatrixReadOnly

Schreibgeschützte Version von DOMMatrix.

DOMPoint

Repräsentiert einen 2D- oder 3D-Punkt in einem Koordinatensystem; es enthält Werte für die Koordinaten in bis zu drei Dimensionen sowie einen optionalen Perspektivenwert.

DOMPointReadOnly

Schreibgeschützte Version von DOMPoint.

DOMQuad

Repräsentiert eine Sammlung von vier DOMPoint-Objekten, die die Ecken eines Vierecks definieren.

DOMRect

Repräsentiert die Größe und Position eines Rechtecks.

DOMRectReadOnly

Schreibgeschützte Version von DOMRect.

Beispiele

Die Artikel Path2D.addPath() und CanvasPattern.setTransform() enthalten Beispiele, die einige der Geometrie-Interfaces verwenden.

Spezifikationen

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

Browser-Kompatibilität

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.

Siehe auch