Geometry interfaces
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.
Geometry interfaces là một module CSS cung cấp các giao diện để làm việc với đồ họa 3D và 2D — đặc biệt là để làm việc với các điểm, hình chữ nhật, tứ giác và ma trận biến đổi (cho các phép tịnh tiến/di chuyển, co giãn, xoay, xiên/cắt và lật đồ họa, cũng như để nhân/kết hợp và đảo ngược/hoàn tác các phép đó).
Là nhà phát triển web, bạn không phải lúc nào cũng sử dụng trực tiếp các geometry interface, mà thay vào đó sử dụng các tính năng khác dựa vào chúng ở phía sau: các phần của CSS Transforms, Canvas API, WebXR Device API và (trực tiếp hơn) VideoFrame.visibleRect, Element.getClientRects() và Element.getBoundingClientRect().
Giao diện
DOMMatrix-
Đại diện cho ma trận biến đổi, cho các phép tịnh tiến/di chuyển, co giãn, xoay, xiên/cắt và lật đồ họa, cũng như để nhân/kết hợp và đảo ngược/hoàn tác các phép đó.
DOMMatrixReadOnly-
Phiên bản chỉ đọc của
DOMMatrix. DOMPoint-
Đại diện cho điểm 2D hoặc 3D trong hệ tọa độ; bao gồm các giá trị cho tọa độ trong tối đa ba chiều, cũng như giá trị phối cảnh tùy chọn.
DOMPointReadOnly-
Phiên bản chỉ đọc của
DOMPoint. DOMQuad-
Đại diện cho tập hợp bốn đối tượng
DOMPointxác định các góc của tứ giác. DOMRect-
Đại diện cho kích thước và vị trí của hình chữ nhật.
DOMRectReadOnly-
Phiên bản chỉ đọc của
DOMRect.
Ví dụ
Các bài viết Path2D.addPath() và CanvasPattern.setTransform() có các ví dụ sử dụng một số geometry interface.
Thông số kỹ thuật
| Specification |
|---|
| Geometry Interfaces Module Level 1 # DOMMatrix |
| Geometry Interfaces Module Level 1 # DOMPoint |
| Geometry Interfaces Module Level 1 # DOMQuad |
| Geometry Interfaces Module Level 1 # DOMRect |
Tương thích trình duyệt
api.DOMMatrix
api.DOMMatrixReadOnly
api.DOMPoint
api.DOMPointReadOnly
api.DOMQuad
api.DOMRect
api.DOMRectReadOnly
Xem thêm
Path2D.addPath()CanvasPattern.setTransform()CanvasRenderingContext2D.getTransform()CanvasRenderingContext2D.setTransform()CSSTransformValue.toMatrix()CSSTransformComponent.toMatrix()Element.getBoundingClientRect()Element.getClientRects()VideoFrame.visibleRectXRLightEstimateXRRigidTransform