DOMMatrixReadOnly: transformPoint-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die transformPoint-Methode des DOMMatrixReadOnly-Interfaces erstellt ein neues DOMPoint-Objekt, indem ein bestimmter Punkt durch die Matrix transformiert wird. Weder die Matrix noch der ursprüngliche Punkt werden verändert.

Sie können auch einen neuen DOMPoint erstellen, indem Sie eine Matrix auf einen Punkt mit der DOMPointReadOnly.matrixTransform()-Methode anwenden.

Syntax

js
DOMMatrixReadOnly.transformPoint();
DOMMatrixReadOnly.transformPoint(point);

Parameter

point

Eine Instanz von DOMPoint oder DOMPointReadOnly, oder ein Objekt, das bis zu vier der folgenden Eigenschaften enthält:

x

Die x-Koordinate des Punkts im Raum als Zahl. Der Standardwert ist 0.

y

Die y-Koordinate des Punkts im Raum als Zahl. Der Standardwert ist 0.

z

Die z-Koordinate, oder Tiefenkoordinate, des Punkts im Raum als Zahl. Der Standardwert ist 0. Positive Werte sind näher am Benutzer und negative Werte ziehen sich zurück in den Bildschirm.

w

Der w-Perspektivwert des Punkts als Zahl. Der Standardwert ist 1.

Rückgabewert

Ein DOMPoint.

Beispiele

2D-Transformation

js
const matrix = new DOMMatrixReadOnly();
const point = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
let newPoint = matrix.transformPoint(point); // DOMPoint {x: 10, y: 20, z: 0, w: 1}

3D-Transformation

In diesem Beispiel wenden wir einen 3D-Punkt auf eine 3D-Matrix an:

js
// Matrix with translate(22, 37, 10) applied
const matrix3D = new DOMMatrixReadOnly([
  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 22, 37, 10, 1,
]);
const point3D = new DOMPointReadOnly(5, 10, 3); // DOMPointReadOnly {x: 5, y: 10, z: 3, w: 1}
const transformedPoint3D = point3D.matrixTransform(matrix3D); // DOMPoint {x: 27, y: 47, z: 13, w: 1}

Spezifikationen

Specification
Geometry Interfaces Module Level 1
# dom-dommatrixreadonly-transformpoint

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch