DOMPointReadOnly: matrixTransform() Methode

Baseline Widely available

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

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

Die matrixTransform() Methode der DOMPointReadOnly Schnittstelle wendet eine als Objekt angegebene Matrixtransformation auf das DOMPointReadOnly Objekt an, erstellt und gibt ein neues DOMPointReadOnly Objekt zurück. Weder die Matrix noch der Punkt werden verändert.

Wenn die als Parameter übergebene Matrix 2D ist (die is2D ist true), dann handelt es sich um eine 2D-Transformation und die z-Koordinate des Punktes wird 0 und die w Perspektive des Punktes wird 1 sein. Andernfalls handelt es sich um eine 3D-Transformation.

Sie können auch mit der Methode DOMMatrixReadOnly.transformPoint() einen neuen DOMPoint mit einem Punkt und einer Matrix erstellen.

Syntax

matrixTransform()
matrixTransform(matrix)

Parameter

matrix: Ein DOMMatrix oder DOMMatrixReadOnly Objekt.

const originalPoint = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
const matrix = new DOMMatrix([1, 0, 0, 1, 15, 30]);

const transformedPoint = originalPoint.matrixTransform(matrix); // DOMPoint {x: 25, y: 50, z: 0, w: 1}

console.log(transformedPoint.toJSON()); // output: {x: 25, y: 50, z: 0, w: 1}

3D-Transformation

In diesem Beispiel wenden wir eine 3D-Matrixtransformation auf ein DOMPointReadOnly an:

const point = new DOMPointReadOnly(5, 10); // DOMPointReadOnly {x: 5, y: 10, z: 0, w: 1}
const matrix3D = new DOMMatrix().translate(0, 0, 10);
const transformedPoint = point.matrixTransform(matrix3D); // DOMPoint {x: 5, y: 10, z: 10, w: 1}