DOMPointReadOnly: matrixTransform()

Статический метод matrixTransform() интерфейса DOMPointReadOnly применяет заданное в виде объекта преобразование матрицы к объекту DOMPointReadOnly, создавая и возвращая новый объект DOMPointReadOnly. Ни матрица, ни точка не изменяются.

Если переданная в качестве параметра матрица является 2D (метод DOMMatrix.is_2d равен true), то это 2D преобразование, и координата z точки будет 0, а перспектива точки w будет 1. В противном случае это 3D преобразование.

Вы также можете создать новый DOMPoint с точкой и матрицей с помощью метода DOMMatrixReadOnly.transformPoint().

matrix

Объект DOMMatrix или DOMMatrixReadOnly.

Новый объект DOMPoint.

В этом примере мы применяем 2D преобразование матрицы к DOMPointReadOnly, создавая новый 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}

В этом примере мы применяем 3D преобразование матрицы к 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}

• DOMPoint
• DOMMatrix
• DOMMatrixReadOnly.transformPoint()
• Функции CSS matrix() и matrix3d()