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 des DOMPointReadOnly-Interfaces wendet eine als Objekt angegebene Matrixtransformation auf das DOMPointReadOnly-Objekt an und 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 (das is2D ist true), dann handelt es sich um eine 2D-Transformation und die z-Koordinate des Punktes wird 0 und die Perspektive w des Punktes wird 1 sein. Andernfalls handelt es sich um eine 3D-Transformation.

Sie können auch einen neuen DOMPoint mit einem Punkt und einer Matrix mit der DOMMatrixReadOnly.transformPoint()-Methode 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}