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.
Geometrieschnittstellen sind ein CSS-Modul, das Schnittstellen für die Arbeit mit 3D- und 2D-Grafiken bereitstellt — insbesondere für die Arbeit mit Punkten, Rechtecken, Vierecken und Transformationsmatrizen (für Operationen zum Verschieben, Skalieren, Drehen, Scheren/Neigen und Spiegeln von Grafiken sowie zum Multiplizieren/Verketten und Invertieren/Rückgängigmachen dieser Operationen).
Als Webentwickler verwenden Sie die Geometrieschnittstellen nicht immer direkt, sondern stattdessen andere Funktionen, die sie im Hintergrund verwenden: Teile von CSS Transforms, die Canvas API, die WebXR Device API und (direkter) VideoFrame.visibleRect, Element.getClientRects() und Element.getBoundingClientRect().
Hinweis:
Die Geometrieschnittstellen sind für andere Web-APIs wie die oben aufgeführten vorgesehen und nicht als allgemeine Bibliothek für lineare Algebra. Die Transformationsmethoden, wie etwa DOMMatrixReadOnly.transformPoint(), dienen der Bequemlichkeit und können aufgrund internen Overheads deutlich langsamer sein als entsprechendes handgeschriebenes JavaScript. Erstellen Sie für rechenintensiven Code Profile verschiedener Ansätze und erwägen Sie, einfache JavaScript-Objekte oder Arrays für Zwischenberechnungen zu verwenden.
Schnittstellen
DOMMatrix-
Repräsentiert eine Transformationsmatrix für Operationen zum Verschieben, Skalieren, Drehen, Scheren/Neigen und Spiegeln von Grafiken sowie zum Multiplizieren/Verketten und Invertieren/Rückgängigmachen dieser Operationen.
DOMMatrixReadOnly-
Schreibgeschützte Version von
DOMMatrix. DOMPoint-
Repräsentiert einen 2D- oder 3D-Punkt in einem Koordinatensystem; er 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 Geometrieschnittstellen 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