DOMPoint.x — Eigenschaft · JavaScript-Referenz

Signatur

DOMPoint.x

Beschreibung

Mit DOMPoint.x liest oder setzt man die horizontale Koordinate eines Punkts im 2D- oder 3D-Koordinatensystem. Positive Werte liegen normalerweise rechts vom Ursprung, negative links davon. Der Wert ist ein Gleitkommawert doppelter Genauigkeit (unrestricted double). Deshalb sind auch NaN und Infinity erlaubt.

Anders als bei der schreibgeschützten Basisklasse DOMPointReadOnly kann man x bei einem DOMPoint direkt ändern. Das ist praktisch, wenn man einen Punkt Schritt für Schritt verschiebt, z. B. bei Animationen, Canvas-Zeichnungen oder beim Umrechnen von Mauskoordinaten.

Oft benutzt man x zusammen mit DOMMatrix: point.matrixTransform(matrix) gibt einen neuen Punkt zurück, dessen x die transformierte Koordinate enthält. Auch SVG-Methoden wie SVGGeometryElement.getPointAtLength() liefern Punktobjekte mit x und y.

Rückgabewert

Typ

number

Beschreibung

Die horizontale Koordinate des Punkts als Gleitkommazahl. Der Standardwert ist 0, wenn im Konstruktor kein Wert angegeben wurde. Wenn man einen Wert zuweist, wird er in eine Zahl umgewandelt.

Beispiele

Punkt erzeugen und x lesen/setzen

const point = new DOMPoint(10, 20);
console.log(point.x);

// Punkt um 5 Einheiten nach rechts verschieben
point.x += 5;
console.log(point.x);

// Ohne Argumente ist x gleich 0
console.log(new DOMPoint().x);

10 15 0

x nach einer Matrix-Transformation auslesen

const origin = new DOMPoint(50, 0);
// Um 90 Grad drehen und um 100 px nach rechts verschieben
const matrix = new DOMMatrix().translate(100, 0).rotate(90);
const transformed = origin.matrixTransform(matrix);

console.log(Math.round(transformed.x));
console.log(origin.x); // Original bleibt unverändert

100 50

Mausposition in Canvas-Koordinaten umrechnen

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.setTransform(new DOMMatrix().translate(200, 100).scale(2));

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const screenPoint = new DOMPoint(
    event.clientX - rect.left,
    event.clientY - rect.top
  );
  // Bildschirmpunkt ins Zeichen-Koordinatensystem zurückrechnen
  const local = screenPoint.matrixTransform(ctx.getTransform().inverse());
  console.log(`Lokales x: ${local.x.toFixed(1)}`);
});

Punkt entlang eines SVG-Pfads abfragen

const path = document.querySelector('svg path');
const half = path.getPointAtLength(path.getTotalLength() / 2);
const marker = new DOMPoint(half.x, half.y);
console.log(`Mitte des Pfads bei x = ${marker.x}`);

// Wichtig · Fallstricke

Keine Validierung: Nicht-numerische Zuweisungen werden stillschweigend umgewandelt. So ergibt point.x = 'abc' den Wert NaN, point.x = '12' den Wert 12. Es wird kein Fehler geworfen.
Schreibschutz bei DOMPointReadOnly: Bei DOMPointReadOnly ist x nur lesbar. Eine Zuweisung wird im nicht-strikten Modus ignoriert und löst im strikten Modus einen TypeError aus.
Keine Referenzbindung: Transformationen wie matrixTransform() geben einen neuen Punkt zurück. Wenn man x am Ergebnis ändert, bleibt der Originalpunkt unverändert.
Gleitkomma-Ungenauigkeit: Nach Rotationen entstehen oft Werte wie 6.123e-15 statt 0. Vor Vergleichen sollte man runden.
Kompatibilität: Wird in allen aktuellen Browsern unterstützt. Ältere Versionen von Edge (vor Chromium) und Safari (vor 10.1) unterstützen es nur teilweise. In Node.js gibt es DOMPoint nicht nativ.

Siehe auch

DOMPoint DOMPoint.y DOMPoint.z DOMPoint.w DOMPointReadOnly DOMPointReadOnly.prototype.matrixTransform() DOMMatrix