DOMMatrixReadOnly.rotateFromVector() — Methode · JavaScript-Referenz

Signatur

DOMMatrixReadOnly.prototype.rotateFromVector(x, y)

Beschreibung

rotateFromVector() berechnet einen Drehwinkel aus einer Richtung statt aus einer Gradzahl. Intern gilt winkel = atan2(y, x). Die aktuelle Matrix wird dann mit einer 2D-Rotation um die z-Achse multipliziert, und zwar von rechts (Post-Multiplikation). Das Ergebnis ist eine neue DOMMatrix. Die Matrix, auf der Sie die Methode aufrufen, wird nicht verändert.

Nützlich ist das immer dann, wenn eine Richtung als Vektor vorliegt: Ein Pfeil soll zum Mauszeiger zeigen, ein Sprite soll sich in Bewegungsrichtung drehen, oder ein Beschriftungstext soll entlang einer Linie laufen. Die Umrechnung mit Math.atan2() und von Bogenmaß in Grad entfällt dabei. Die Länge des Vektors spielt keine Rolle, nur seine Richtung zählt.

Weil multipliziert wird, hängt das Ergebnis von der Reihenfolge ab. m.translate(tx, ty).rotateFromVector(x, y) dreht um den verschobenen Ursprung. Bei umgekehrter Reihenfolge wird zuerst gedreht und danach im gedrehten Koordinatensystem verschoben. Soll die Matrix selbst verändert werden, verwenden Sie die Variante DOMMatrix.prototype.rotateFromVectorSelf().

Parameter

Name	Typ	Default	Beschreibung
$x	number	0	x-Komponente des Richtungsvektors.
$y	number	0	y-Komponente des Richtungsvektors. Sind `x` und `y` beide `0`, ist der Winkel `0`. Das Ergebnis ist dann eine unveränderte Kopie.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Eine neue DOMMatrix: die Ursprungsmatrix multipliziert mit der Rotation um atan2(y, x). Ob die Matrix 2D ist (is2D), wird von der Ursprungsmatrix übernommen.

Beispiele

Drehung um 45° aus dem Vektor (1, 1)

const m = new DOMMatrixReadOnly();
const rotated = m.rotateFromVector(1, 1);

// Winkel aus der Matrix zurückrechnen
const angle = Math.atan2(rotated.b, rotated.a) * 180 / Math.PI;
console.log(angle.toFixed(2));
console.log(rotated.a.toFixed(4), rotated.b.toFixed(4));
console.log(m.isIdentity); // Original bleibt unverändert

45.00 0.7071 0.7071 true

Pfeil-Element zeigt immer zum Mauszeiger

const arrow = document.querySelector('#arrow');
const origin = { x: 200, y: 150 };

document.addEventListener('pointermove', (event) => {
  const dx = event.clientX - origin.x;
  const dy = event.clientY - origin.y;

  const matrix = new DOMMatrix()
    .translate(origin.x, origin.y)
    .rotateFromVector(dx, dy); // kein atan2 und keine Grad-Umrechnung nötig

  arrow.style.transform = matrix.toString();
});

Sprite im Canvas in Bewegungsrichtung zeichnen

const ctx = document.querySelector('canvas').getContext('2d');
const ship = { x: 120, y: 80, vx: 3, vy: -2 };

const draw = () => {
  ctx.resetTransform();
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  const m = new DOMMatrix()
    .translate(ship.x, ship.y)
    .rotateFromVector(ship.vx, ship.vy);
  ctx.setTransform(m);

  // Dreieck, das entlang der lokalen x-Achse zeigt
  ctx.beginPath();
  ctx.moveTo(15, 0);
  ctx.lineTo(-10, -8);
  ctx.lineTo(-10, 8);
  ctx.closePath();
  ctx.fill();
};

draw();

// Wichtig · Fallstricke

Neue Matrix statt Änderung: rotateFromVector() verändert die Ursprungsmatrix nicht. Wird der Rückgabewert nicht gespeichert, geht das Ergebnis verloren. Für Änderungen direkt an der Matrix gibt es DOMMatrix.prototype.rotateFromVectorSelf().
Koordinatensystem: Im Bildschirm- und Canvas-Koordinatensystem zeigt die y-Achse nach unten. Ein positives y dreht daher optisch im Uhrzeigersinn.
Rundungsfehler: Bei Winkeln wie 90° entstehen Werte wie 6.123e-17 statt 0. Vergleichen Sie Matrixwerte deshalb mit einer Toleranz und nicht mit ===.
Nur 2D-Rotation: Gedreht wird ausschließlich um die z-Achse. Für Drehungen im Raum verwenden Sie rotate() oder rotateAxisAngle().
Kompatibilität: Wird von allen modernen Browsern unterstützt, auch in Web Workern. Node.js hat kein eingebautes DOMMatrix.

Siehe auch

DOMMatrixReadOnly DOMMatrixReadOnly.rotate() DOMMatrixReadOnly.rotateAxisAngle() DOMMatrix.rotateFromVectorSelf() DOMMatrixReadOnly.translate() Math.atan2()