1. ウェブ
  2. Web API
  3. DOMMatrix

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

DOMMatrix

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

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

DOMMatrix は、二次元または三次元の回転や平行移動などの変換に適した 4×4 行列を表します。 これは DOMMatrixReadOnly インターフェイスの変更可能なバージョンです。 このインターフェイスはウェブワーカー内で利用できるはずですが、一部の実装はまだそうなっていません。

WebKitCSSMatrix および SVGMatrix は DOMMatrix の別名です。

DOMMatrixReadOnly 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 オブジェクトを作成し、指定された既存の行列、またはそのプロパティの値を提供するオブジェクトで初期化します。

使用上のメモ

DOMMatrix インターフェイスで定義される行列は、4 行 4 列で構成されます。この記事で数学を説明することはできませんが、この 4×4 のサイズは、二次元または三次元のジオメトリーに適用する変換を記述するのに十分です。

4×4 の抽象行列を構成する 16 個の要素（m_11 から m_44）の位置を示します。

[m11m21m31m41m12m22m32m42m13m23m33m43m14m24m34m44]\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 インターフェイスは、マークアップ内のすべての行列に使用することを意図して設計されています。

仕様書

仕様書
Geometry Interfaces Module Level 1
# DOMMatrix

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告