Signatur
Beschreibung
transformPoint() multipliziert die Matrix mit einem Punkt, der als homogener Vektor (x, y, z, w) behandelt wird, und gibt das Ergebnis als neues DOMPoint zurück. Die Methode gibt es auf DOMMatrixReadOnly und damit auch auf DOMMatrix. Sie ist rein funktional, verändert also weder die Matrix noch den übergebenen Punkt.
Typische Einsatzfälle sind das Umrechnen zwischen Koordinatensystemen, etwa Mauskoordinaten in das transformierte Koordinatensystem eines <canvas> (über die inverse Matrix von CanvasRenderingContext2D.getTransform()), das Berechnen der Eckpunkte gedrehter oder skalierter Elemente für die Kollisionserkennung und das Projizieren von 3D-Punkten mit einer Perspektivmatrix.
Als Argument genügt ein einfaches Objekt nach DOMPointInit, also z. B. { x: 10, y: 20 }. Fehlende Komponenten werden mit x = 0, y = 0, z = 0 und w = 1 ergänzt. Das Gegenstück auf Punktseite ist DOMPoint.prototype.matrixTransform(matrix), das dasselbe Ergebnis liefert.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $point | DOMPointInit | DOMPoint | DOMPointReadOnly | { x: 0, y: 0, z: 0, w: 1 } | Der Punkt, der transformiert werden soll. Fehlende Eigenschaften werden ergänzt: x, y und z mit 0, w mit 1. |
Rückgabewert
DOMPoint mit den transformierten Koordinaten x, y, z und w. Bei Perspektivmatrizen kann w ungleich 1 sein.Beispiele
Punkt verschieben und skalieren
// Matrix = Translation × Skalierung → auf den Punkt wirkt zuerst die Skalierung, dann die Verschiebung
const matrix = new DOMMatrix().translate(10, 20).scale(2);
const p = matrix.transformPoint({ x: 5, y: 5 });
console.log(p.x, p.y, p.z, p.w);Mausklick in Canvas-Koordinaten umrechnen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Zeichenfläche verschieben, drehen und zoomen
ctx.translate(200, 150);
ctx.rotate(Math.PI / 6);
ctx.scale(1.5, 1.5);
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const screenPoint = {
x: (event.clientX - rect.left) * (canvas.width / rect.width),
y: (event.clientY - rect.top) * (canvas.height / rect.height),
};
// Mit der inversen Matrix zurück ins Weltkoordinatensystem
const inverse = ctx.getTransform().inverse();
const world = inverse.transformPoint(screenPoint);
console.log(`Weltkoordinaten: ${world.x.toFixed(1)}, ${world.y.toFixed(1)}`);
});Bounding Box eines gedrehten Rechtecks
const rotation = new DOMMatrix().rotate(90); // Winkel in Grad
const corners = [
{ x: 0, y: 0 },
{ x: 100, y: 0 },
{ x: 100, y: 50 },
{ x: 0, y: 50 },
].map((c) => rotation.transformPoint(c));
const xs = corners.map((p) => Math.round(p.x));
const ys = corners.map((p) => Math.round(p.y));
const bbox = {
minX: Math.min(...xs), maxX: Math.max(...xs),
minY: Math.min(...ys), maxY: Math.max(...ys),
};
console.log(JSON.stringify(bbox));Perspektivische Projektion mit Division durch w
// m34 = -1 / 100 → Perspektive mit Betrachterabstand 100
const perspective = new DOMMatrix([
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, -0.01,
0, 0, 0, 1,
]);
const p = perspective.transformPoint({ x: 100, y: 50, z: 50 });
console.log(p.w); // homogene Komponente
console.log(p.x / p.w, p.y / p.w); // projizierte 2D-Koordinaten