DOMPointReadOnly：matrixTransform() 方法
注意：此功能在 Web Workers 中可用。
DOMPointReadOnly 接口的 matrixTransform() 方法将指定为对象的矩阵变换应用于 DOMPointReadOnly 对象，创建并返回一个新的 DOMPointReadOnly 对象。矩阵和点都不会被修改。
如果作为参数传递的矩阵是 2D 的（is2D 为 true），则这是一个 2D 变换，点的 z 坐标将为 0，点的 w 透视将为 1。否则，这是一个 3D 变换。
您还可以使用 DOMMatrixReadOnly.transformPoint() 方法，使用点和矩阵创建一个新的 DOMPoint。
语法
js
matrixTransform()
matrixTransform(matrix)
参数
matrix-
一个
DOMMatrix或DOMMatrixReadOnly对象。
返回值
一个新的 DOMPoint 对象。
示例
2D 变换
在此示例中，我们将一个 2D 矩阵变换应用于 DOMPointReadOnly，创建一个新的 DOMPoint。
js
const originalPoint = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
const matrix = new DOMMatrix([1, 0, 0, 1, 15, 30]);
const transformedPoint = originalPoint.matrixTransform(matrix); // DOMPoint {x: 25, y: 50, z: 0, w: 1}
console.log(transformedPoint.toJSON()); // output: {x: 25, y: 50, z: 0, w: 1}
3D 变换
在此示例中，我们将一个 3D 矩阵变换应用于 DOMPointReadOnly。
js
const point = new DOMPointReadOnly(5, 10); // DOMPointReadOnly {x: 5, y: 10, z: 0, w: 1}
const matrix3D = new DOMMatrix().translate(0, 0, 10);
const transformedPoint = point.matrixTransform(matrix3D); // DOMPoint {x: 5, y: 10, z: 10, w: 1}
规范
| 规范 |
|---|
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-matrixtransform |
浏览器兼容性
加载中…