DOMMatrixReadOnly: transformPoint() メソッド
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月.
メモ: この機能はウェブワーカー内で利用可能です。
transformPoint は DOMMatrixReadOnly インターフェイスのメソッドで、指定された点を行列によって座標変換し、新しい DOMPoint オブジェクトを作成します。行列も元の点も変更されません。
行列を点に適用して新しい DOMPoint を生成するのは DOMPointReadOnly.matrixTransform() メソッドでもできます。
構文
js
transformPoint()
transformPoint(point)
引数
返値
DOMPoint です。
例
二次元座標変換
js
const matrix = new DOMMatrixReadOnly();
const point = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
let newPoint = matrix.transformPoint(point); // DOMPoint {x: 10, y: 20, z: 0, w: 1}
三次元座標変換
この例では、三次元の点に三次元の行列を適用します。
js
// Matrix with translate(22, 37, 10) applied
const matrix3D = new DOMMatrixReadOnly([
1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 22, 37, 10, 1,
]);
const point3D = new DOMPointReadOnly(5, 10, 3); // DOMPointReadOnly {x: 5, y: 10, z: 3, w: 1}
const transformedPoint3D = point3D.matrixTransform(matrix3D); // DOMPoint {x: 27, y: 47, z: 13, w: 1}
仕様書
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-transformpoint |
ブラウザーの互換性
関連情報
DOMPointReadOnly.matrixTransform()- CSS の
matrix()関数とmatrix3d()関数