DOMMatrix: 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() コンストラクターは、二次元および三次元演算に適した 4x4 行列を表す新しい DOMMatrix オブジェクトを作成します。
構文
new DOMMatrix()
new DOMMatrix(initString)
new DOMMatrix(initArray)
引数
initString省略可-
CSS の
matrix()またはmatrix3d()の書式で書かれた二次元または三次元行列を表す文字列です。 initArray省略可-
列優先順で 6 個または 16 個の数値が含まれている配列。その他の長さの配列では
TypeErrorが発生します。- 6 要素の配列の場合は行列要素
[m11, m12, m21, m22, m41, m42]として解釈され、二次元行列を作成します。 - 16 要素の配列の場合は行列要素
[m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44]として解釈され、三次元行列を作成する。
この引数が省略された場合、恒等行列、すなわち、
[1, 0, 0, 1, 0, 0]と等しいものが作成されます。この引数が
Float32ArrayまたはFloat64Arrayとして指定される場合は、より高性能な静的メソッドDOMMatrix.fromFloat32Array()またはDOMMatrix.fromFloat64Array()の使用を検討してみてください。 - 6 要素の配列の場合は行列要素
返値
新しい DOMMatrix オブジェクトです。
例外
TypeError-
引数が文字列でない場合、または長さが 6 または 16 以外の配列である場合に発生します。
SyntaxError-
文字列引数が有効な CSS の
matrix()またはmatrix3d()の書式でない場合、発生します。
例
この例では、DOMPointReadOnly.matrixTransform() を呼び出す際の引数として使用する DOMMatrix を作成しています。
const point = new DOMPoint(5, 4);
const scaleX = 2;
const scaleY = 3;
const translateX = 12;
const translateY = 8;
const angle = Math.PI / 2;
const matrix = new DOMMatrix([
Math.cos(angle) * scaleX,
Math.sin(angle) * scaleX,
-Math.sin(angle) * scaleY,
Math.cos(angle) * scaleY,
translateX,
translateY,
]);
const transformedPoint = point.matrixTransform(matrix);
仕様書
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrix-dommatrix |