DOMMatrix: setMatrixValue() 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 setMatrixValue() của giao diện DOMMatrix thay thế nội dung của ma trận bằng ma trận được mô tả bởi phép biến đổi hoặc các phép biến đổi được chỉ định, và trả về chính nó.

Cú pháp

setMatrixValue(transformList)

Tham số

transformList: Một chuỗi. Giá trị của nó theo cùng cú pháp với giá trị thuộc tính CSS transform.

Giá trị trả về

Trả về chính nó; DOMMatrix với các giá trị đã được cập nhật.

Trong ví dụ này, chúng ta tạo một ma trận, áp dụng phép biến đổi 3D sử dụng phương thức DOMMatrix.translateSelf(), hoàn nguyên về phép biến đổi 2D sử dụng phương thức setMatrixValue(), rồi hoàn nguyên lại về phép biến đổi 3D với một lần gọi phương thức setMatrixValue() khác.

const matrix = new DOMMatrix();

console.log(matrix.toString()); // matrix(1, 0, 0, 1, 0, 0)
console.log(matrix.is2D); // true

matrix.translateSelf(30, 40, 50);
console.log(matrix.toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.is2D); // false

matrix.setMatrixValue("matrix(1, 0, 0, 1, 15, 45)");
console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 15, 45)
console.log(matrix.is2D); // true

matrix.setMatrixValue(
  "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)",
);
console.log(matrix.toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.is2D); // false