DOMMatrixReadOnly: transformPoint() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Note: This feature is available in Web Workers.
Phương thức transformPoint của giao diện DOMMatrixReadOnly tạo một đối tượng DOMPoint mới, biến đổi một điểm được chỉ định bằng ma trận. Cả ma trận lẫn điểm gốc đều không bị thay đổi.
Bạn cũng có thể tạo một DOMPoint mới bằng cách áp dụng ma trận lên một điểm với phương thức DOMPointReadOnly.matrixTransform().
Cú pháp
transformPoint()
transformPoint(point)
Tham số
point-
Một thực thể
DOMPointhoặcDOMPointReadOnly, hoặc một đối tượng chứa tối đa bốn thuộc tính sau:x-
Tọa độ
xcủa điểm trong không gian dưới dạng số. Giá trị mặc định là0. y-
Tọa độ
ycủa điểm trong không gian dưới dạng số. Giá trị mặc định là0. z-
Tọa độ
z, hay độ sâu, của điểm trong không gian dưới dạng số. Giá trị mặc định là0; giá trị dương gần người dùng hơn và giá trị âm lùi ra phía sau màn hình. w-
Giá trị phối cảnh
wcủa điểm, dưới dạng số. Giá trị mặc định là1.
Giá trị trả về
Một DOMPoint.
Ví dụ
Biến đổi 2D
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}
Biến đổi 3D
Trong ví dụ này, chúng ta áp dụng một điểm 3D lên một ma trận 3D:
// Ma trận với translate(22, 37, 10) được áp dụng
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}
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-transformpoint |
Tương thích trình duyệt
Xem thêm
DOMPointReadOnly.matrixTransform()- CSS
matrix()andmatrix3d()functions