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 |
浏览器兼容性
加载中…