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

View in English Always switch to English

DOMMatrixReadOnly

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月.

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

DOMMatrixReadOnly インターフェイスは、 2D および 3D 演算に適した読み取り専用の 4×4 行列を表します。 DOMMatrix インターフェイスは、 DOMMatrixReadOnly をベースとして変更可能にしており、作成後に行列を変更することができます。

このインターフェイスはウェブワーカー内で利用できるはずですが、一部の実装はまだそうなっていません。

コンストラクター

DOMMatrixReadOnly()

新しい DOMMatrixReadOnly オブジェクトを作成します。

インスタンスプロパティ

このインターフェイスが継承しているプロパティはありません。

DOMMatrixReadOnly.is2D 読取専用

論理値フラグであり、値が true の場合、行列は 2D 行列として初期化されます。 false の場合、行列は 3D となります。

DOMMatrixReadOnly.isIdentity 読取専用

行列が恒等行列である場合に true となる論理値です。

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

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

2D 3D の相当品
a m11
b m12
c m21
d m22
e m41
f m42

インスタンスメソッド

このインターフェイスが継承しているメソッドはありません。以下のメソッドはいずれも元の行列を変更しません。

DOMMatrixReadOnly.flipX()

入力行列を X 軸で反転して作成した、新しい DOMMatrix を返します。これは、行列に DOMMatrix(-1, 0, 0, 1, 0, 0) を乗算することと等価です。元の行列は変更されません。

DOMMatrixReadOnly.flipY()

元の行列を Y 軸で反転して作成した、新しい DOMMatrix を返します。これは、行列に DOMMatrix(1, 0, 0, -1, 0, 0) を乗算することと等価です。元の行列は変更されません、

DOMMatrixReadOnly.inverse()

元の行列を反転して作成された新しい DOMMatrix を返します。元の行列は変更されません。

DOMMatrixReadOnly.multiply()

指定した行列と入力行列の積を計算して作成した、新しい DOMMatrix を返します。元の行列は変更されません。

DOMMatrixReadOnly.rotateAxisAngle()

指定されたベクトルを中心に、指定された角度だけ元の行列を回転させて作成した新しい DOMMatrix を返します。元の行列は変更されません。

DOMMatrixReadOnly.rotate()

元の行列を、指定した度数だけ回転させて作成した新しい DOMMatrix を返します。元の行列は変更されません。

DOMMatrixReadOnly.rotateFromVector()

指定したベクトルと (1, 0) とのなす角度だけ回転させた新しい DOMMatrix を返します。元の行列は変更されません。

DOMMatrixReadOnly.scale()

指定された原点を中心として、各軸で指定された量だけ拡大縮小して作成された新しい DOMMatrix を返します。既定では、X 軸と Z 軸は 1 倍に縮小され、Y 軸には既定値がありません。既定の原点は `(0, 0, 0)`` です。元の行列は変更されません。

DOMMatrixReadOnly.scale3d()

指定された原点を中心として、元の 3D 行列をすべて指定された係数で拡大縮小して作成された新しい DOMMatrix を返します。既定値は `(0, 0, 0)`` です。元の行列は変更されません。

DOMMatrixReadOnly.scaleNonUniform() 非推奨;

指定された原点を中心とした X, Y, Z 軸に、指定しただけ拡大縮小して作成した新しい DOMMatrix を返します。既定では、 Y 軸と Z 軸のスケール係数はどちらも 1 ですが、 X 軸のスケール係数を指定する必要があります。既定値は (0, 0, 0) です。元の行列は変更されません。

DOMMatrixReadOnly.skewX()

入力行列に対して、指定した歪み変換を X 軸方向に適用して作成した、新しい DOMMatrix を返します。元の行列は変更されません。

DOMMatrixReadOnly.skewY()

入力行列に対して、指定した歪み変換を Y 軸方向に適用して作成した、新しい DOMMatrix を返します。元の行列は変更されません。

DOMMatrixReadOnly.toFloat32Array()

単精度浮動小数点数の新しい Float32Array に、行列を構成する全 16 要素を入れたものを返します。

DOMMatrixReadOnly.toFloat64Array()

倍精度浮動小数点数の新しい Float64Array に、行列を構成する全 16 要素を入れたものを返します。

DOMMatrixReadOnly.toJSON()

DOMMatrixReadOnly オブジェクトを JSON 表現で返します。

DOMMatrixReadOnly.toString()

適切な CSS 行列記法を使用し、CSS 行列構文による行列の文字列記法を生成して返します。

DOMMatrixReadOnly.transformPoint()

行列を使用して指定した点を変換し、変換後の点を格納した新しい DOMPoint オブジェクトを返します。行列も元の点も変更されません。

DOMMatrixReadOnly.translate()

指定したベクトルを用いて変換元の行列に対応させた行列を格納した、新しい DOMMatrix を返します。既定値では、このベクトルは (0, 0, 0) です。元の行列は変更されません。

静的メソッド

fromFloat32Array()

新しい DOMMatrixReadOnly オブジェクトを作成し、6 個または 16 個の単精度(32 ビット)浮動小数点値の Float32Array で指定された値で初期化します。

fromFloat64Array()

新しい DOMMatrixReadOnly オブジェクトを作成し、6 個または 16 個の単精度(64 ビット)浮動小数点値の Float64Array で指定された値で初期化します。

fromMatrix()

新しい DOMMatrixReadOnly オブジェクトを作成し、既存の行列またはそのプロパティの値を提供するオブジェクトで初期化します。

仕様書

Specification
Geometry Interfaces Module Level 1
# DOMMatrix

ブラウザーの互換性

関連情報

  • これをベースとした変更可能な行列型である DOMMatrix
  • このインターフェイスから CSS の matrix() および matrix3d() 関数記法を生成し、 CSS の transform で使用することができます。