Baseline Widely available
Note: This feature is available in Web Workers.
The matrixTransform() method of the DOMPointReadOnly interface applies a matrix transform specified as an object to the DOMPointReadOnly object, creating and returning a new DOMPointReadOnly object. Neither the matrix nor the point are altered.
If the matrix passed as a parameter is 2D (the is2D is true) then this is a 2D transformation and the point's z coordinate will be 0 and point's w perspective will be 1. Otherwise this is a 3D transformation.
You can also create a new DOMPoint with a point and matrix with the DOMMatrixReadOnly.transformPoint() method.
matrixTransform()
matrixTransform(matrix)
A new DOMPoint object.
In this example, we apply a 2D matrix transform to a DOMPointReadOnly, creating a new DOMPoint:
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}
In this example, we apply a 3D matrix transform to a DOMPointReadOnly:
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}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4