DOMMatrixReadOnly：transformPoint() 方法
注意：此功能在 Web Workers 中可用。
DOMMatrixReadOnly 介面的 transformPoint 方法會建立一個新的 DOMPoint 物件，透過矩陣轉換指定的點。矩陣和原始點都不會被修改。
您也可以透過 DOMPointReadOnly.matrixTransform() 方法將矩陣應用於點，來建立一個新的 DOMPoint。
語法
js
transformPoint()
transformPoint(point)
引數
返回值
一個 DOMPoint。
示例
2D 變換
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}
3D 變換
在此示例中，我們將一個 3D 點應用於一個 3D 矩陣
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}
規範
| 規範 |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-transformpoint |
瀏覽器相容性
載入中…