DOMMatrixReadOnly: rotateFromVector() メソッド
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月.
メモ: この機能はウェブワーカー内で利用可能です。
rotateFromVector() は DOMMatrixReadOnly インターフェイスの読み取り専用プロパティで、指定されたベクトルと (1, 0) の間の角度でソース行列を回転させて作成された新しい DOMMatrix を返します。回転角度は、ベクトル (1,0)T と (x,y)T の間の時計回り方向の角度、すなわち (+/-)arctan(y/x) で決定されます。x と y が両方とも 0 の場合、角度は 0 と指定します。元の行列は変更されません。
指定されたベクトルと (1, 0) の間の角度で回転させながら行列を変化させるには、DOMMatrix.rotateFromVectorSelf() を参照してください。
構文
js
rotateFromVector()
rotateFromVector(rotX)
rotateFromVector(rotX, rotY)
引数
返値
DOMMatrix です。
例
js
const matrix = new DOMMatrix(); // 行列を作成
console.log(matrix.toString()); // 元の値
// 出力: "matrix(1, 0, 0, 1, 0, 0)"
console.log(matrix.rotateFromVector().toString()); // デフォルトで `0`
// 出力: matrix(1, 0, 0, 1, 0, 0)
console.log(matrix.rotateFromVector(10, 20).toString());
// matrix(0.447, 0.894, -0.894, 0.447, 0, 0)
console.log(matrix.rotateFromVector(-5, 5).toString());
// matrix(-0.707, 0.707, -0.707, -0.707, 0, 0)
console.log(matrix.toString()); // 行列は変更されない
// 出力: "matrix(1, 0, 0, 1, 0, 0)"
仕様書
| Specification |
|---|
| Geometry Interfaces Module Level 1> # dom-dommatrixreadonly-rotatefromvector> |
ブラウザーの互換性
関連情報
DOMMatrix.rotateFromVectorSelf()DOMMatrixReadOnly.rotate()DOMMatrixReadOnly.rotateAxisAngle()- CSS の
transformプロパティとrotate3d()関数 - CSS
rotateproperty - CSS 座標変換モジュール
- SVG の
transform属性 CanvasRenderingContext2Dインターフェイスとrotate()メソッド