DOMMatrix

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

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

Примечание: Эта функция доступна в Web Workers.

Интерфейс DOMMatrix представляет 4×4 матрицы, подходящие для 2D и 3D операций, включая поворот и трансляцию. Это изменяемая версия интерфейса DOMMatrixReadOnly. Интерфейс доступен внутри веб-воркеров.

WebKitCSSMatrix и SVGMatrix являются псевдонимами DOMMatrix.

Конструктор

DOMMatrix(): Создаёт и возвращает новый объект DOMMatrix.

Свойства экземпляра

Этот интерфейс наследует свойства от DOMMatrixReadOnly, хотя некоторые из этих свойств изменены на изменяемые.

m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44

Значения с плавающей запятой двойной точности, представляющие каждый компонент 4×4 матрицы, где m11 по m14 — первый столбец, m21 по m24 — второй столбец и так далее.

a, b, c, d, e, f

Значения с плавающей запятой двойной точности, представляющие компоненты 4×4 матрицы, необходимые для выполнения 2D поворотов и трансляций. Это псевдонимы для определенных компонентов 4×4 матрицы, как показано ниже.

`2D`	`3D equivalent`
`a`	`m11`
`b`	`m12`
`c`	`m21`
`d`	`m22`
`e`	`m41`
`f`	`m42`

Методы экземпляра

Этот интерфейс включает следующие методы, а также методы, унаследованные от DOMMatrixReadOnly.

DOMMatrix.invertSelf(): Изменяет матрицу, инвертируя её. Если матрица не может быть инвертирована, её компоненты устанавливаются в NaN, и is2D возвращает false.
DOMMatrix.multiplySelf(): Изменяет матрицу, постумножив её на указанную DOMMatrix. Это эквивалентно скалярному произведению A⋅B, где матрица A — исходная матрица, а B — матрица, переданная в метод. Возвращает себя.
DOMMatrix.preMultiplySelf(): Изменяет матрицу, предварительно умножив её на указанную DOMMatrix. Возвращает себя.
DOMMatrix.translateSelf(): Изменяет матрицу, применяя указанный вектор. По умолчанию вектор равен [0, 0, 0]. Возвращает себя.
DOMMatrix.scaleSelf(): Изменяет матрицу, применяя указанные коэффициенты масштабирования, с центром, расположенным в указанной точке начала отсчета. Также возвращает себя. По умолчанию коэффициент масштабирования составляет 1 по всем трём осям, а точка начала отсчета — (0, 0, 0). Возвращает себя.
DOMMatrix.scale3dSelf(): Изменяет матрицу, применяя указанный коэффициент масштабирования ко всем трём осям, с центром в заданной точке начала отсчета. Возвращает себя.
DOMMatrix.rotateSelf(): Изменяет матрицу, поворачивая её вокруг каждой оси на указанное число градусов. Возвращает себя.
DOMMatrix.rotateAxisAngleSelf(): Изменяет матрицу, поворачивая её на указанный угол вокруг заданного вектора. Возвращает себя.
DOMMatrix.rotateFromVectorSelf(): Изменяет матрицу, поворачивая её на угол между указанным вектором и (1, 0). Возвращает себя.
DOMMatrix.setMatrixValue(): Заменяет содержимое матрицы матрицей, описанной указанным преобразованием или преобразованиями. Возвращает себя.
DOMMatrix.skewXSelf(): Изменяет матрицу, применяя указанное косое преобразование вдоль оси X. Возвращает себя.
DOMMatrix.skewYSelf(): Изменяет матрицу, применяя указанное косое преобразование вдоль оси Y. Возвращает себя.

Статические методы

Этот интерфейс наследует методы от DOMMatrixReadOnly.

fromFloat32Array(): Создаёт новый изменяемый объект DOMMatrix, используя массив значений с плавающей запятой одинарной точности (32 бита). Если массив содержит шесть значений, результат — 2D матрица; если массив содержит 16 значений, результат — 3D матрица. В противном случае выбрасывается исключение TypeError.
fromFloat64Array(): Создаёт новый изменяемый объект DOMMatrix, используя массив значений с плавающей запятой двойной точности (64 бита). Если массив содержит шесть значений, результат — 2D матрица; если массив содержит 16 значений, результат — 3D матрица. В противном случае выбрасывается исключение TypeError.
fromMatrix(): Создаёт новый изменяемый объект DOMMatrix, используя существующую матрицу или объект, который предоставляет значения для её свойств.

Примечания по использованию

Матрица, определённая интерфейсом DOMMatrix, состоит из четырёх строк по четыре столбца каждая. Хотя объяснение связанной математики выходит за рамки этой статьи, этого размера 4×4 достаточно для описания любого преобразования, которое вы можете применить к 2D или 3D геометриям.

Вот расположение 16 элементов (m_11 по m_44), которые составляют абстрактную матрицу 4×4:

\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ]

Интерфейс DOMMatrix разработан с намерением использовать его для всех матриц в разметке.

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

Спецификация
Модуль геометрических интерфейсов Уровень 1 # DOMMatrix

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android

`DOMMatrix`	6152	79121212–79	33491.5	4815≤12.1	1154	611818	33494	4814≤12.1	1143	8.01.01.0	614.44.4
`DOMMatrix`	6152	79121212–79	33491.5	4815≤12.1	1154	611818	33494	4814≤12.1	1143	8.01.01.0	614.44.4
`a`	61	79	33	48	11	61	33	45	11	8.0	61
`b`	61	79	33	48	11	61	33	45	11	8.0	61
`c`	61	79	33	48	11	61	33	45	11	8.0	61
`d`	61	79	33	48	11	61	33	45	11	8.0	61
`e`	61	79	33	48	11	61	33	45	11	8.0	61
`f`	61	79	33	48	11	61	33	45	11	8.0	61
`fromFloat32Array_static`	61	79	69	48	11	61	79	45	11	8.0	61
`fromFloat64Array_static`	61	79	69	48	11	61	79	45	11	8.0	61
`fromMatrix_static`	61	79	69	48	11	61	79	45	11	8.0	61
`invertSelf`	61	79	33	48	11	61	33	45	11	8.0	61
`m11`	61	79	33	48	11	61	33	45	11	8.0	61
`m12`	61	79	33	48	11	61	33	45	11	8.0	61
`m13`	61	79	33	48	11	61	33	45	11	8.0	61
`m14`	61	79	33	48	11	61	33	45	11	8.0	61
`m21`	61	79	33	48	11	61	33	45	11	8.0	61
`m22`	61	79	33	48	11	61	33	45	11	8.0	61
`m23`	61	79	33	48	11	61	33	45	11	8.0	61
`m24`	61	79	33	48	11	61	33	45	11	8.0	61
`m31`	61	79	33	48	11	61	33	45	11	8.0	61
`m32`	61	79	33	48	11	61	33	45	11	8.0	61
`m33`	61	79	33	48	11	61	33	45	11	8.0	61
`m34`	61	79	33	48	11	61	33	45	11	8.0	61
`m41`	61	79	33	48	11	61	33	45	11	8.0	61
`m42`	61	79	33	48	11	61	33	45	11	8.0	61

`m43`	61	79	33	48	11	61	33	45	11	8.0	61
`m44`	61	79	33	48	11	61	33	45	11	8.0	61
`multiplySelf`	61	79	33	48	11	61	33	45	11	8.0	61
`preMultiplySelf`	61	79	33	48	11	61	33	45	11	8.0	61
`rotateAxisAngleSelf`	61	79	33	48	11	61	33	45	11	8.0	61
`rotateFromVectorSelf`	61	79	33	48	11	61	33	45	11	8.0	61
`rotateSelf`	61	79	33	48	11	61	33	45	11	8.0	61
`scale3dSelf`	61	79	33 Начиная с Firefox 69, первый параметр (`scale`) теперь является необязательным со значением по умолчанию 1, в соответствии со спецификацией. Раньше он был обязательным.	48	11	61	33 Начиная с Firefox для Android 79, первый параметр (`scale`) теперь является необязательным со значением по умолчанию 1, в соответствии со спецификацией. Раньше он был обязательным.	45	11	8.0	61
`scaleSelf`	61	79	33 Firefox 69 ввёл поддержку современной синтаксической конструкции с шестью параметрами для `scaleSelf()`. Раньше поддерживался только устаревший синтаксис с тремя параметрами: `scale(scaleX[, originX][, originY]]])`.	48	11	61	33 Firefox для Android 79 ввёл поддержку современной синтаксической конструкции с шестью параметрами для `scaleSelf()`. Раньше поддерживался только устаревший синтаксис с тремя параметрами: `scale(scaleX[, originX][, originY]]])`.	45	11	8.0	61
`setMatrixValue`	61	79	33	48	11	61	33	45	11	8.0	61
`skewXSelf`	61	79	33	48	11	61	33	45	11	8.0	61
`skewYSelf`	61	79	33	48	11	61	33	45	11	8.0	61
`translateSelf`	61	79	33	48	11	61	33	45	11	8.0	61
`worker_support`	61	79	69	48	11	61	79	45	11	8.0	61

См. также

© 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/DOMMatrix