DOMMatrix (WebKitCSSMatrix)

DOMMatrix 接口表示 4×4 矩阵,适用于包括旋转和平移在内的 2D 和 3D 操作。它是 DOMMatrixReadOnly 接口的可变版本。

WebKitCSSMatrixSVGMatrixDOMMatrix 的别名。

此接口应在 Web 工作线程 中可用,但一些实现尚未允许使用它。

DOMMatrixReadOnly DOMMatrix

构造函数

DOMMatrix()

创建并返回一个新的 DOMMatrix 对象。

实例属性

此接口继承了 DOMMatrixReadOnly 的属性,但其中一些属性被修改为可变的。

is2D 只读

一个布尔标志,如果矩阵被初始化为一个 2D 矩阵,则其值为 true。如果为 false,则矩阵为 3D。

isIdentity 只读

一个布尔值,如果矩阵是 单位矩阵,则其值为 true。单位矩阵是其中每个值都为 0 的矩阵,除了从左上角到右下角的主对角线上的值(换句话说,在每个方向上的偏移量相等的地方)。

m11m12m13m14m21m22m23m24m31m32m33m34m41m42m43m44

双精度浮点数,表示 4×4 矩阵的每个分量,其中 m11m14 是第一列,m21m24 是第二列,依此类推。

abcdef

双精度浮点数,表示执行 2D 旋转和平移所需的 4×4 矩阵的各分量。这些是 4×4 矩阵中特定分量的别名,如下所示。

2D 3D 等效
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 前乘来修改矩阵。这相当于点积 B⋅A,其中矩阵 A 是源矩阵,B 是作为方法输入的矩阵。返回自身。

DOMMatrix.translateSelf()

通过应用指定的向量来修改矩阵。默认向量是 [0, 0, 0]。返回自身。

DOMMatrix.scaleNonUniformSelf() 已弃用

通过在以给定原点为中心的 X、Y 和 Z 轴上应用指定的缩放来修改矩阵。默认情况下,Y 轴和 Z 轴的缩放因子均为 1,但 X 轴的缩放因子必须指定。默认原点是 (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()

给定一个单精度 (32 位) 浮点数数组,创建一个新的可变 DOMMatrix 对象。如果数组有六个值,则结果是一个 2D 矩阵;如果数组有 16 个值,则结果是一个 3D 矩阵。否则,将抛出 TypeError 异常。

fromFloat64Array()

给定一个双精度 (64 位) 浮点数数组,创建一个新的可变 DOMMatrix 对象。如果数组有六个值,则结果是一个 2D 矩阵;如果数组有 16 个值,则结果是一个 3D 矩阵。否则,将抛出 TypeError 异常。

fromMatrix()

给定一个现有矩阵或一个提供其属性值的的对象,创建一个新的可变 DOMMatrix 对象。

使用说明

DOMMatrix 接口定义的矩阵由四个四列组成。虽然解释其中涉及的数学知识超出了本文的范围,但这个 4×4 大小足以描述你可能应用于 2D 或 3D 几何体的任何变换。

以下是构成 4×4 抽象矩阵的 16 个元素 (m_11 到 m_44) 的位置

[ 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 ] \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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅