Signatur
Beschreibung
rotateFromVectorSelf() ist die verändernde Variante von DOMMatrixReadOnly.rotateFromVector(). Die Methode bestimmt den Drehwinkel nicht über eine Gradangabe, sondern aus einem Richtungsvektor: Der Winkel entspricht Math.atan2(y, x), also dem Winkel zwischen (x, y) und (1, 0). Mit diesem Winkel wird eine 2D-Drehung um die z-Achse auf die bestehende Matrix angewendet. Die Drehmatrix wird dabei rechts an die aktuelle Matrix multipliziert (this = this × R).
Nützlich ist das immer dann, wenn eine Richtung als Vektor vorliegt, etwa eine Bewegungsrichtung, ein Geschwindigkeitsvektor oder der Abstand zwischen zwei Punkten. Pfeile, Sprites oder Beschriftungen lassen sich so an einer Richtung ausrichten, ohne dass man selbst Math.atan2() aufrufen und von Bogenmaß in Grad umrechnen muss.
Da die Methode die Matrix selbst verändert und this zurückgibt, kann man sie mit anderen *Self()-Methoden wie translateSelf() oder scaleSelf() verketten. Soll die ursprüngliche Matrix erhalten bleiben, verwendet man stattdessen rotateFromVector(). Diese Methode liefert eine neue Matrix.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $x | number | 0 | x-Komponente des Richtungsvektors. |
| $y | number | 0 | y-Komponente des Richtungsvektors. |
Rückgabewert
DOMMatrix-Instanz (this). Dadurch lassen sich weitere Aufrufe anhängen.Beispiele
Einfache Drehung um 45° über den Vektor (1, 1)
const m = new DOMMatrix();
m.rotateFromVectorSelf(1, 1);
// Werte zur besseren Lesbarkeit runden
const round = (n) => Number(n.toFixed(4));
console.log(round(m.a), round(m.b), round(m.c), round(m.d));
console.log(m.is2D);Pfeil im Canvas an der Mausbewegung ausrichten
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let last = { x: canvas.width / 2, y: canvas.height / 2 };
canvas.addEventListener('pointermove', (event) => {
const dx = event.offsetX - last.x;
const dy = event.offsetY - last.y;
if (dx === 0 && dy === 0) return;
// An die Mausposition verschieben und in Bewegungsrichtung drehen
const matrix = new DOMMatrix()
.translateSelf(event.offsetX, event.offsetY)
.rotateFromVectorSelf(dx, dy);
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setTransform(matrix);
// Pfeil zeigt im lokalen Koordinatensystem nach rechts (1, 0)
ctx.beginPath();
ctx.moveTo(-20, -8);
ctx.lineTo(10, 0);
ctx.lineTo(-20, 8);
ctx.closePath();
ctx.fill();
last = { x: event.offsetX, y: event.offsetY };
});Unterschied zu rotateFromVector()
const original = new DOMMatrix();
// Liefert eine neue Matrix, das Original bleibt unverändert
const copy = original.rotateFromVector(0, 1);
console.log(original.isIdentity); // true
// Verändert das Original selbst
const same = original.rotateFromVectorSelf(0, 1);
console.log(same === original); // true
console.log(Math.round(original.b), Math.round(original.c));// Wichtig · Fallstricke
- Verändert die Matrix: Wird dieselbe
DOMMatrixan mehreren Stellen verwendet, wirkt sich die Drehung überall aus. Wer das nicht will, nimmtrotateFromVector()oder erstellt vorher eine Kopie mitDOMMatrix.fromMatrix(m). - Nur die Richtung zählt: Die Länge des Vektors spielt keine Rolle,
(2, 2)und(1, 1)ergeben dieselbe Drehung. Der Nullvektor(0, 0), der auch ohne Argumente verwendet wird, ergibt einen Winkel von 0°. Die Matrix bleibt dann unverändert. - Koordinatensystem: Im Bildschirm- und Canvas-Koordinatensystem zeigt die y-Achse nach unten. Ein positives
ydreht deshalb optisch im Uhrzeigersinn. - Reihenfolge: Die Drehung wird rechts an die Matrix multipliziert und wirkt damit im lokalen Koordinatensystem.
translateSelf().rotateFromVectorSelf()dreht also um den verschobenen Ursprung. - Rundung: Wegen der Gleitkomma-Arithmetik entstehen Werte wie
6.123e-17statt0. Vor einem Vergleich sollte man runden. - Kompatibilität: Die Methode gibt es nur bei
DOMMatrix, nicht beiDOMMatrixReadOnly. Sie ist auch in Web Workern verfügbar. In Node.js gibt esDOMMatrixnicht ohne Polyfill.