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 der DOMMatrixReadOnly Schnittstelle erstellt ein neues DOMPoint Objekt, indem sie einen angegebenen Punkt durch die Matrix transformiert. 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
transformPoint()
transformPoint(point)
Parameter
point-
Eine Instanz von
DOMPointoderDOMPointReadOnly, oder ein Objekt, das bis zu vier der folgenden Eigenschaften enthält:x-
Die
x-Koordinate des Punktes im Raum als Zahl. Der Standardwert ist0. y-
Die
y-Koordinate des Punktes im Raum als Zahl. Der Standardwert ist0. z-
Die
z-Koordinate oder Tiefenkoordinate des Punktes im Raum als Zahl. Der Standardwert ist0. Positive Werte sind näher beim Benutzer und negative Werte entfernen sich zurück in den Bildschirm. w-
Der
wPerspektivwert des Punktes, als Zahl. Der Standard ist1.
Rückgabewert
Ein DOMPoint.
Beispiele
2D-Transformation
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:
// 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
DOMPointReadOnly.matrixTransform()- CSS
matrix()undmatrix3d()Funktionen