DOMMatrixReadOnly: метод transformPoint

Базовая поддержка Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Примечание: Эта функция доступна в Потоках веб-работы.

Метод transformPoint интерфейса DOMMatrixReadOnly создаёт новый объект DOMPoint, преобразуя указанную точку с помощью матрицы. Ни матрица, ни исходная точка не изменяются.

Вы также можете создать новый DOMPoint, применяя матрицу к точке с помощью метода DOMPointReadOnly.matrixTransform().

Синтаксис

DOMMatrixReadOnly.transformPoint();
DOMMatrixReadOnly.transformPoint(point);

Параметры

point

Экземпляр DOMPoint или DOMPointReadOnly, или объект, содержащий до четырёх следующих свойств:

x: Координата x точки в пространстве как число. Значение по умолчанию — 0.
y: Координата y точки в пространстве как число. Значение по умолчанию — 0.
z: Координата z, или глубинная координата, точки в пространстве как число. Значение по умолчанию — 0. Положительные значения ближе к пользователю, отрицательные — дальше.
w: Значение перспективы w точки как число. По умолчанию — 1.

Возвращаемое значение

Объект DOMPoint.

Примеры

Преобразование 2D

const matrix = new DOMMatrixReadOnly();
const point = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
let newPoint = matrix.transformPoint(point); // DOMPoint {x: 10, y: 20, z: 0, w: 1}

Преобразование 3D

В этом примере мы применяем 3D точку к 3D матрице:

// Matrix with translate(22, 37, 10) applied
const matrix3D = new DOMMatrixReadOnly([
  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 22, 37, 10, 1,
]);
const point3D = new DOMPointReadOnly(5, 10, 3); // DOMPointReadOnly {x: 5, y: 10, z: 3, w: 1}
const transformedPoint3D = point3D.matrixTransform(matrix3D); // DOMPoint {x: 27, y: 47, z: 13, w: 1}

Спецификации

Спецификация
Модуль интерфейсов геометрии Уровень 1 # dom-dommatrixreadonly-transformpoint

Совместимость с браузерами

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`transformPoint`	61	79	33	48	11	61	33	45	11	8.0	61

См. также

DOMPointReadOnly.matrixTransform()
CSS matrix() и matrix3d() функции

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly/transformPoint