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 2020년 1월.

Geometry interfaces는 3D 및 2D 그래픽 작업, 특히 점, 사각형, 사변형 및 변환 행렬(transformation matrices)(그래픽 이동/이동, 크기 조정, 회전, 기울이기/가르기/비틀기 및 뒤집기 작업과 이러한 작업의 곱하기/연결 및 반전/실행 취소 작업)을 위한 인터페이스를 제공하는 CSS 모듈입니다.

웹 개발자는 항상 geometry interfaces를 직접 사용하지 않고 뒤에서 이를 사용하는 다른 기능, 즉 CSS Transforms의 일부, Canvas API 및 WebXR Device API, (더 직접적으로는) VideoFrame.visibleRect와 Element.getClientRects(), Element.getBoundingClientRect()를 사용합니다.

인터페이스

DOMMatrix: 그래픽 이동/이동, 크기 조정, 회전, 기울이기/가르기/비틀기 및 뒤집기 작업과 이러한 작업의 곱하기/연결 및 반전/실행 취소 작업을 위한 변환 행렬을 나타냅니다.
DOMMatrixReadOnly: DOMMatrix의 읽기 전용 버전.
DOMPoint: 좌표계의 2D 또는 3D 점을 나타내며, 최대 3차원의 좌표 값과 선택적 원근값을 포함합니다.
DOMPointReadOnly: DOMPoint의 읽기 전용 버전.
DOMQuad: 사변형(quadrilateral)의 모서리를 정의하는 네 개의 DOMPoint 객체 모음을 나타냅니다.
DOMRect: 직사각형의 크기와 위치를 나타냅니다.
DOMRectReadOnly: DOMRect의 읽기 전용 버전.

예제

Path2D.addPath() 및 CanvasPattern.setTransform() 문서에는 일부 Geometry interfaces를 사용하는 예제가 있습니다.

명세서

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

Help improve MDN

Learn how to contribute

This page was last modified on 2023년 9월 24일 by MDN contributors.

View this page on GitHub • Report a problem with this content

Geometry interfaces

인터페이스

예제

명세서

브라우저 호환성

api.DOMMatrix

api.DOMMatrixReadOnly

api.DOMPoint

api.DOMPointReadOnly

api.DOMQuad

api.DOMRect

api.DOMRectReadOnly

같이 보기

Help improve MDN