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 |
瀏覽器相容性
載入中…