DOMMatrixReadOnly: transformPoint() メソッド

Baseline 広く利用可能

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

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

transformPoint は DOMMatrixReadOnly インターフェイスのメソッドで、指定された点を行列によって座標変換し、新しい DOMPoint オブジェクトを作成します。行列も元の点も変更されません。

行列を点に適用して新しい DOMPoint を生成するのは DOMPointReadOnly.matrixTransform() メソッドでもできます。

構文

transformPoint()
transformPoint(point)

引数

point

DOMPoint または DOMPointReadOnly のインスタンス、または次のプロパティのうち最大 4 つを持つオブジェクトです。

x: 空間の点の x 座標を表す数値です。デフォルト値は 0 です。
y: 空間の点の y 座標を表す数値です。デフォルト値は 0 です。
z: 空間の点の z 座標、または奥行き座標を表す数値です。デフォルト値は 0 です。正の数はユーザーに近づき、負の数は画面の奥へ遠ざかります。
w: 点の w 視点値を表す数値です。デフォルト値は 1 です。

返値

DOMPoint です。

例

二次元座標変換

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}

三次元座標変換

この例では、三次元の点に三次元の行列を適用します。

// 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}

仕様書

仕様書
Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-transformpoint

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年2月17日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告