DOMMatrix

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.

メモ: この機能はウェブワーカー内で利用可能です。

DOMMatrix は、二次元または三次元の回転や平行移動などの変換に適した 4×4 行列を表します。これは 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 が 2 つ目の列、というようになっています。

a, b, c, d, e, f

二次元の回転と平行移動を行うために必要となる、 4×4 行列の成分を表す倍精度浮動小数点数の値です。下記に示すように、これらは 4×4 行列の特定の成分の別名です。

二次元	三次元の等価物
`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(): 指定した原点を中心として、指定した倍率を適用して行列を変更します。また、それ自身を返します。既定では、倍率は 3 軸すべて 1 で、原点は (0, 0, 0) です。自分自身を返します。
DOMMatrix.scale3dSelf(): 指定された原点を中心とした 3 つの軸すべてに、指定された倍率を適用して行列を変更します。自分自身を返します。
DOMMatrix.rotateSelf(): 指定した度数だけ各軸の周りを回転することで、行列を変更します。自分自身を返します。
DOMMatrix.rotateAxisAngleSelf(): 指定されたベクトルを中心に、指定した角度だけ回転するように行列を変更します。自分自身を返します。
DOMMatrix.rotateFromVectorSelf(): 行列を、指定したベクトルと (1, 0) とのなす角だけ回転させることにより変更します。自分自身を返します。
DOMMatrix.setMatrixValue(): 行列の内容を、指定した変換で記述された行列で置き換えます。自分自身を返します。
DOMMatrix.skewXSelf(): X 軸に沿って、指定した傾き変換を適用して行列を変更します。自分自身を返します。
DOMMatrix.skewYSelf(): 指定した傾き変換を Y 軸に沿って適用することで、行列を変更します。自分自身を返します。

静的メソッド

fromFloat32Array(): 新しい DOMMatrix オブジェクトを作成し、指定された Float32Array の中の 6 個または 16 個の単精度（32 ビット）浮動小数点値で初期化します。
fromFloat64Array(): 新しい DOMMatrix オブジェクトを作成し、指定された Float64Array の中の 6 個または 16 個の倍精度（64 ビット）浮動小数点値で初期化します。
fromMatrix(): 新しい DOMMatrix オブジェクトを作成し、指定された既存の行列、またはそのプロパティの値を提供するオブジェクトで初期化します。