Geometry interfaces

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

웹 개발자는 항상 geometry interfaces를 직접 사용하지 않고 뒤에서 이를 사용하는 다른 기능, 즉 CSS Transforms의 일부, Canvas APIWebXR Device API, (더 직접적으로는) VideoFrame.visibleRectElement.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

브라우저 호환성

api.DOMMatrix

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMMatrix
DOMMatrix() constructor
a
b
c
d
e
f
fromFloat32Array() static method
fromFloat64Array() static method
fromMatrix() static method
invertSelf
m11
m12
m13
m14
m21
m22
m23
m24
m31
m32
m33
m34
m41
m42
m43
m44
multiplySelf
preMultiplySelf
rotateAxisAngleSelf
rotateFromVectorSelf
rotateSelf
scale3dSelf()
scaleSelf()
setMatrixValue
skewXSelf
skewYSelf
translateSelf
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

api.DOMMatrixReadOnly

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMMatrixReadOnly
DOMMatrixReadOnly() constructor
a
b
c
d
e
f
flipX()
flipY()
fromFloat32Array() static method
fromFloat64Array() static method
fromMatrix() static method
inverse()
is2D
isIdentity
m11
m12
m13
m14
m21
m22
m23
m24
m31
m32
m33
m34
m41
m42
m43
m44
multiply()
rotate()
rotateAxisAngle()
rotateFromVector()
scale()
scale3d()
scaleNonUniform()
Deprecated
skewX()
skewY()
toFloat32Array()
toFloat64Array()
toJSON()
toString()
transformPoint()
translate()
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.
See implementation notes.

api.DOMPoint

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMPoint
DOMPoint() constructor
fromPoint() static method
w
Available in workers
x
y
z

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.DOMPointReadOnly

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMPointReadOnly
DOMPointReadOnly() constructor
fromPoint() static method
matrixTransform()
toJSON()
w
Available in workers
x
y
z

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.DOMQuad

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMQuad
DOMQuad() constructor
fromQuad() static method
fromRect() static method
getBounds()
p1
p2
p3
p4
toJSON()
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

api.DOMRect

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMRect
DOMRect() constructor
fromRect() static method
height
width
Available in workers
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

api.DOMRectReadOnly

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMRectReadOnly
DOMRectReadOnly() constructor
bottom
fromRect() static method
height
left
right
toJSON
top
width
Available in workers
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

같이 보기