DOMPointReadOnly.w — Eigenschaft · JavaScript-Referenz

Signatur

DOMPointReadOnly.w

Beschreibung

Die Eigenschaft w von DOMPointReadOnly enthält die vierte Komponente eines Punkts in homogenen Koordinaten (x, y, z, w). Diese Darstellung wird in der 3D-Grafik und bei CSS-Transformationen genutzt, damit sich Verschiebungen und perspektivische Projektionen als eine einzige 4×4-Matrixmultiplikation schreiben lassen.

Bei einem normalen Punkt im Raum ist w gleich 1. Nach einer perspektivischen Transformation (z. B. mit DOMMatrix.perspective oder einer Matrix, deren vierte Zeile nicht 0, 0, 0, 1 lautet) kann w einen anderen Wert annehmen. Die tatsächlichen kartesischen Koordinaten erhältst du dann durch die perspektivische Division: x / w, y / w, z / w.

Die Eigenschaft ist schreibgeschützt: Zuweisungen werden ignoriert (im Strict Mode lösen sie einen TypeError aus). Wenn du den Wert ändern willst, verwende die veränderbare Unterklasse DOMPoint oder erzeuge einen neuen Punkt.

Rückgabewert

Typ

number

Beschreibung

Die Perspektivkomponente des Punkts als doppelt genaue Gleitkommazahl (unrestricted double). Standardwert ist 1; auch NaN oder Infinity sind möglich.

Beispiele

w eines neuen Punkts auslesen

const p1 = new DOMPointReadOnly(10, 20, 30);
const p2 = new DOMPointReadOnly(10, 20, 30, 2);

console.log(p1.w); // Standardwert
console.log(p2.w);

1 2

Schreibschutz im Strict Mode

'use strict';
const p = DOMPointReadOnly.fromPoint({ x: 1, y: 2, w: 0.5 });

try {
  p.w = 1;
} catch (err) {
  console.log(err instanceof TypeError); // Getter ohne Setter
}
console.log(p.w);

true 0.5

Perspektivische Division nach einer Transformation

// Matrix mit Perspektive (entspricht CSS perspective(500px))
const matrix = new DOMMatrix();
matrix.m34 = -1 / 500;

const point = new DOMPointReadOnly(100, 50, 100);
const projected = point.matrixTransform(matrix);

console.log(projected.w.toFixed(2));

// In kartesische Koordinaten zurückrechnen
const toCartesian = ({ x, y, z, w }) => ({ x: x / w, y: y / w, z: z / w });
const { x, y } = toCartesian(projected);
console.log(x.toFixed(1), y.toFixed(1));

0.80 125.0 62.5

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an w ist im Sloppy Mode wirkungslos und löst im Strict Mode (also auch in ES-Modulen und Klassen) einen TypeError aus. Für veränderbare Punkte nimm DOMPoint.
Division durch null: Nach einer Projektion kann w den Wert 0 oder einen negativen Wert haben (Punkt liegt auf oder hinter der Betrachterebene). Prüfe das vor der perspektivischen Division, sonst entstehen Infinity oder NaN.
getBoundingClientRect() und die meisten 2D-Anwendungen ignorieren w. Relevant wird es erst bei 3D-Matrizen.
Kompatibilität: Wird in allen aktuellen Browsern unterstützt (Chrome/Edge 61+, Firefox 69+, Safari 10.1+) und steht auch in Web Workern zur Verfügung. Node.js stellt die Klasse nicht nativ bereit.

Siehe auch

DOMPointReadOnly DOMPointReadOnly.x DOMPointReadOnly.z DOMPoint DOMPointReadOnly.prototype.matrixTransform() DOMMatrix NotRestoredReasons.src