DOMMatrix: setMatrixValue() メソッド

Baseline 広く利用可能

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

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

setMatrixValue() は DOMMatrix インターフェイスのメソッドで、指定された座標変換または一連の座標変換によって記述される行列で、行列の内容を置き換え、自分自身を返します。

構文

setMatrixValue(transformList)

引数

transformList: 文字列です。この値は CSS の transform プロパティ値と同じ構文に従います。

返値

自分自身を返します。更新された値の DOMMatrix です。

例

この例では、行列を作成し、DOMMatrix.translateSelf() メソッドを使用して三次元変換を適用し、setMatrixValue() メソッドを使用して二次元変換に戻し、さらに別の setMatrixValue() メソッド呼び出しで再び三次元変換に戻します。

const matrix = new DOMMatrix();

console.log(matrix.toString()); // matrix(1, 0, 0, 1, 0, 0)
console.log(matrix.is2D); // true

matrix.translateSelf(30, 40, 50);
console.log(matrix.toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.is2D); // false

matrix.setMatrixValue("matrix(1, 0, 0, 1, 15, 45)");
console.log(matrix.toString()); // 出力: matrix(1, 0, 0, 1, 15, 45)
console.log(matrix.is2D); // true

matrix.setMatrixValue(
  "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)",
);
console.log(matrix.toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.is2D); // false