DOMMatrixReadOnly: flipY()-Methode
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.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die flipY()-Methode der DOMMatrixReadOnly-Schnittstelle erstellt eine neue Matrix, das Ergebnis der ursprünglichen Matrix, die um die y-Achse gespiegelt wird. Dies entspricht der Multiplikation der Matrix mit DOMMatrix(1, 0, 0, -1, 0, 0). Die ursprüngliche Matrix wird nicht verändert.
Syntax
flipY()
Parameter
Keine.
Rückgabewert
Eine DOMMatrix.
Beispiele
Invertieren eines Dreiecks
In diesem Beispiel enthält das SVG zwei identische Pfade in Form eines Dreiecks; beide sind so gezeichnet, dass sie die gleiche Größe und Position haben. Der Ansichtsbereich hat einen negativen y-Wert, der uns Inhalt von beiden Seiten der y-Achse zeigt. Dies ermöglicht es, dass das gespiegelte Dreieck nach der Transformation innerhalb des Ansichtsbereichs bleibt.
HTML
<svg height="200" width="100" viewBox="0 -100 100 200">
<path fill="red" d="M 0 0 L 100 0 L 50 100 Z" />
<path fill="blue" d="M 0 0 L 100 0 L 50 100 Z" id="flipped" />
</svg>
JavaScript
Das JavaScript erstellt eine Identitätsmatrix und verwendet dann die flipY()-Methode, um eine neue Matrix zu erstellen, die dann auf das blaue Dreieck angewendet wird und es entlang der y-Achse invertiert. Das rote Dreieck bleibt unverändert.
const flipped = document.getElementById("flipped");
const matrix = new DOMMatrix();
const flippedMatrix = matrix.flipY();
flipped.setAttribute("transform", flippedMatrix.toString());
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipy |