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 January 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

js
matrixTransform()
matrixTransform(matrix)

Parameter

Rückgabewert

Ein neues DOMPoint Objekt.

Beispiele

2D-Transformation

In diesem Beispiel wenden wir eine 2D-Matrixtransformation auf ein DOMPointReadOnly an und erstellen einen neuen DOMPoint:

js
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:

js
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}

Spezifikationen

Specification
Geometry Interfaces Module Level 1
# dom-dompointreadonly-matrixtransform

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
matrixTransform()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch