Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Geometry interfaces
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Geometrie-Schnittstellen ist ein CSS-Modul, das Schnittstellen zum Arbeiten mit 3D- und 2D-Grafiken bereitstellt – insbesondere für die Arbeit mit Punkten, Rechtecken, Vierecken und Transformationsmatrizen (für Operationen, die Grafiken übersetzen/bewegen, skalieren, drehen, verzerren/scheren/neigen, und spiegeln sowie zum Multiplizieren/Verketten und Umkehren/Rückgängigmachen dieser Operationen).
Als Webentwickler verwenden Sie die Geometrie-Schnittstellen nicht immer direkt, sondern nutzen stattdessen andere Funktionen, die sie im Hintergrund verwenden: Teile von CSS-Transformationen, 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 übersetzen/bewegen, skalieren, drehen, verzerren/scheren/neigen, und spiegeln sowie zum Multiplizieren/Verketten und Umkehren/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 Perspektivwert.
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 zu Path2D.addPath() und CanvasPattern.setTransform() enthalten Beispiele, die einige der Geometrie-Schnittstellen verwenden.
Spezifikationen
Browser-Kompatibilität
>api.DOMMatrix
api.DOMMatrixReadOnly
api.DOMPoint
api.DOMPointReadOnly
api.DOMQuad
api.DOMRect
api.DOMRectReadOnly
Siehe auch
Path2D.addPath()CanvasPattern.setTransform()CanvasRenderingContext2D.getTransform()CanvasRenderingContext2D.setTransform()CSSTransformValue.toMatrix()CSSTransformComponent.toMatrix()Element.getBoundingClientRect()Element.getClientRects()VideoFrame.visibleRectXRLightEstimateXRRigidTransform