DOMMatrixReadOnly: toString() メソッド

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

toString() は DOMMatrixReadOnly インターフェイスの文字列化関数で、この行列の値を、matrix() または matrix3d() の CSS 座標変換関数の形の文字列として返します。これは、6 個または 16 個の座標値をカンマで区切ったリストで、それぞれ "matrix( または "matrix3d( で始まり、)" で終わります。

二次元行列の場合、要素 a から f の合計 6 つの値が列挙され、matrix(a, b, c, d, e, f) の形式を取ります。この構文の詳細については、CSS の matrix() 関数を参照してください。

三次元行列の場合、返される文字列には 16 個の要素すべてが含まれており、matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) の形式を取ります。三次元表記の構文の詳細については、CSS の matrix3d() 関数を参照してください。

js
const matrix = new DOMMatrixReadOnly();
console.log(matrix.translate(20, 30).toString()); // matrix(1, 0, 0, 1, 20, 30)
console.log(matrix.translate(30, 40, 50).toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.skewY(15).skewX(5).rotate(3).translate(20, 50).toString());
// matrix(1.003, 0.321, 0.035, 1.01, 21.816, 56.824)
console.log(
  matrix.skewY(15).skewX(5).rotate(3).translate(20, 50, 60).toString(),
);
// matrix3d(1.003, 0.321, 0, 0, 0.0350, 1.008, 0, 0, 0, 0, 1, 0, 21.816, 56.824, 60, 1)