Spec-Zone.ru › Web APIs

Интерфейсы геометрии

Интерфейсы геометрии — это модуль CSS, предоставляющий интерфейсы для работы с 3D и 2D графикой — в частности, для работы с точками, прямоугольниками, четырёхугольными областями и матрицами преобразований (для операций, которые перемещают, масштабируют, вращают, наклоняют и отражают графику, а также для умножения/цепочки и обратного преобразования/отмены этих операций).

Как разработчик веб-приложений, вы не всегда используете интерфейсы геометрии напрямую, а вместо этого используете другие функции, которые полагаются на них за кулисами: части преобразований CSS, API Canvas, API устройств WebXR и (более непосредственно) VideoFrame.visibleRect, Element.getClientRects() и Element.getBoundingClientRect().

Интерфейсы

DOMMatrix

Представляет матрицу преобразований для операций, которые перемещают, масштабируют, вращают, наклоняют и отражают графику, а также для умножения/цепочки и обратного преобразования/отмены этих операций.

DOMMatrixReadOnly

Только для чтения версия DOMMatrix.

DOMPoint

Представляет точку в 2D или 3D системе координат; она включает значения координат вплоть до трёх измерений, а также необязательное значение перспективы.

DOMPointReadOnly

Только для чтения версия DOMPoint.

DOMQuad

Представляет набор из четырёх объектов DOMPoint, определяющих углы четырёхугольника.

DOMRect

Представляет размеры и положение прямоугольника.

DOMRectReadOnly

Только для чтения версия DOMRect.

Примеры

В статьях Path2D.addPath() и CanvasPattern.setTransform() есть примеры использования некоторых интерфейсов геометрии.

Спецификации

Спецификация
Модуль интерфейсов геометрии 1-го уровня
# DOMMatrix
Модуль интерфейсов геометрии 1-го уровня
# DOMPoint
Модуль интерфейсов геометрии 1-го уровня
# DOMQuad
Модуль интерфейсов геометрии 1-го уровня
# DOMRect

Совместимость с браузерами

Рабочие столы Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android
DOMRectReadOnly 61 79 62 48 10.1 61 62 45 10.3 8.0 61
Geometry_interfaces 612–61 7912–79 3127–313–27 489.5–48 10.14–11 6118–61 3127–314–27 4510.1–45 10.33.2–11 8.01.0–8.0 612–61
bottom 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2
fromRect_static 61 79 69 48 10.1 61 79 45 10.3 8.0 61
height 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2
left 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2
right 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2
toJSON 61 79 62 48 10.1 61 62 45 10.3 8.0 61
top 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2
width 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2
worker_support 61 79 69 48 10.1 61 79 45 10.3 8.0 61
x 61 79 31 48 10.1 61 31 45 10.3 8.0 61
y 61 79 31 48 10.1 61 31 45 10.3 8.0 61
END_OF_DOCUMENT_MARKER
Рабочий стол Мобильный
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet WebView Android
DOMRect 61 79 31 48 10.1 61 31 45 10.3 8.0 61
Geometry_interfaces 612–61 7912–79 273–27 489.5–48 10.14–11 6118–61 274–27 4510.1–45 10.33.2–11 8.01.0–8.0 612–61
fromRect_static 61 79 69 48 10.1 61 79 45 10.3 8.0 61
height 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2
width 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2
worker_support 61 79 69 48 10.1 61 79 45 10.3 8.0 61
x 61 79 31 48 10.1 61 31 45 10.3 8.0 61
y 61 79 31 48 10.1 61 31 45 10.3 8.0 61
Десктоп Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet WebView Android
DOMQuad 61 79 31 48 11 61 31 45 11 8.0 61
Geometry_interfaces 61 79 31 48 11 61 31 45 11 8.0 61
fromQuad_static 61 79 69 48 11 61 79 45 11 8.0 61
fromRect_static 61 79 69 48 11 61 79 45 11 8.0 61
getBounds 61 79 62 48 11 61 62 45 11 8.0 61
p1 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 48 11 61
31Before Firefox for Android 79, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 45 11 8.0 61
p2 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 48 11 61
31Before Firefox for Android 79, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 45 11 8.0 61
p3 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 48 11 61
31Before Firefox for Android 79, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 45 11 8.0 61
p4 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 48 11 61
31Before Firefox for Android 79, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 45 11 8.0 61
toJSON 61 79 62 48 11 61 62 45 11 8.0 61
worker_support 61 79 69 48 11 61 79 45 11 8.0 61
END_OF_DOCUMENT_MARKER
Рабочий стол Мобильный
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet WebView Android
DOMPointReadOnly 61 79 62 48 10.1 61 62 45 10.3 8.0 61
Geometry_interfaces 61 79 31 48 10.1 61 31 45 10.3 8.0 61
fromPoint_static 61 79 62 48 10.1 61 62 45 10.3 8.0 61
matrixTransform 61 79 69 48 11 61 79 45 11 8.0 61
toJSON 61 79 62 48 10.1 61 62 45 10.3 8.0 61
w 61 79 31 48 10.1 61 31 45 10.3 8.0 61
worker_support 61 79 69 48 10.1 61 79 45 10.3 8.0 61
x 61 79 31 48 10.1 61 31 45 10.3 8.0 61
y 61 79 31 48 10.1 61 31 45 10.3 8.0 61
z 61 79 31 48 10.1 61 31 45 10.3 8.0 61
Рабочий стол Мобильный
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet WebView Android
DOMPoint 61 79 31 48 10.1 61 31 45 10.3 8.0 61
Geometry_interfaces 61 79 31 48 10.1 61 31 45 10.3 8.0 61
fromPoint_static 61 79 62 48 10.1 61 62 45 10.3 8.0 61
w 61 79 31 48 10.1 61 31 45 10.3 8.0 61
worker_support 61 79 69 48 10.1 61 79 45 10.3 8.0 61
x 61 79 31 48 10.1 61 31 45 10.3 8.0 61
y 61 79 31 48 10.1 61 31 45 10.3 8.0 61
z 61 79 31 48 10.1 61 31 45 10.3 8.0 61
Настольный Мобильный
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
DOMMatrixReadOnly 61 79 62 48 11 61 62 45 11 8.0 61
Geometry_interfaces 61 79 33 48 11 61 33 45 11 8.0 61
a 61 79 33 48 11 61 33 45 11 8.0 61
b 61 79 33 48 11 61 33 45 11 8.0 61
c 61 79 33 48 11 61 33 45 11 8.0 61
d 61 79 33 48 11 61 33 45 11 8.0 61
e 61 79 33 48 11 61 33 45 11 8.0 61
f 61 79 33 48 11 61 33 45 11 8.0 61
flipX 61 79 33 48 11 61 33 45 11 8.0 61
flipY 61 79 33 48 11 61 33 45 11 8.0 61
fromFloat32Array_static 61 79 69 48 11 61 79 45 11 8.0 61
fromFloat64Array_static 61 79 69 48 11 61 79 45 11 8.0 61
fromMatrix_static 61 79 69 48 11 61 79 45 11 8.0 61
inverse 61 79 33 48 11 61 33 45 11 8.0 61
is2D 61 79 33 48 11 61 33 45 11 8.0 61
isIdentity 61 79 59 48 11 61 59 45 11 8.0 61
m11 61 79 33 48 11 61 33 45 11 8.0 61
m12 61 79 33 48 11 61 33 45 11 8.0 61
m13 61 79 33 48 11 61 33 45 11 8.0 61
m14 61 79 33 48 11 61 33 45 11 8.0 61
m21 61 79 33 48 11 61 33 45 11 8.0 61
m22 61 79 33 48 11 61 33 45 11 8.0 61
m23 61 79 33 48 11 61 33 45 11 8.0 61
m24 61 79 33 48 11 61 33 45 11 8.0 61
m31 61 79 33 48 11 61 33 45 11 8.0 61
m32 61 79 33 48 11 61 33 45 11 8.0 61
m33 61 79 33 48 11 61 33 45 11 8.0 61
m34 61 79 33 48 11 61 33 45 11 8.0 61
m41 61 79 33 48 11 61 33 45 11 8.0 61
m42 61 79 33 48 11 61 33 45 11 8.0 61
m43 61 79 33 48 11 61 33 45 11 8.0 61
m44 61 79 33 48 11 61 33 45 11 8.0 61
multiply 61 79 33 48 11 61 33 45 11 8.0 61
rotate 61 79 33 48 11 61 33 45 11 8.0 61
rotateAxisAngle 61 79 33 48 11 61 33 45 11 8.0 61
rotateFromVector 61 79 33 48 11 61 33 45 11 8.0 61
scale 61 79
33В Firefox 69 появилась поддержка современного шестипараметрического синтаксиса для scale(). Ранее поддерживался только старый трёхпараметрический синтаксис: scale(scaleX[, originX][, originY]]]).
 48 11 61
33В Firefox для Android 79 появилась поддержка современного шестипараметрического синтаксиса для scale(). Ранее поддерживался только старый трёхпараметрический синтаксис: scale(scaleX[, originX][, originY]]]).
 45 11 8.0 61
scale3d 61 79
33Начиная с Firefox 69, первый параметр (scale) теперь является необязательным со значением по умолчанию 1, согласно спецификации. Ранее он был обязательным.
 48 11 61
33Начиная с Firefox для Android 79, первый параметр (scale) теперь является необязательным со значением по умолчанию 1, согласно спецификации. Ранее он был обязательным.
 45 11 8.0 61
scaleNonUniform 73 79 33 60 17.4 73 33 52 17.4 11.0 73
skewX 61 79
33До Firefox 69, параметр sx был обязательным; теперь вы можете вызвать skewX() без входных данных. Значение 0 будет корректно принято.
 48 11 61
33До Firefox для Android 79, параметр sx был обязательным; теперь вы можете вызвать skewX() без входных данных. Значение 0 будет корректно принято.
 45 11 8.0 61
skewY 61 79
33До Firefox 69, параметр sy был обязательным; теперь вы можете вызвать skewY() без входных данных. Значение 0 будет корректно принято.
 48 11 61
33До Firefox для Android 79, параметр sy был обязательным; теперь вы можете вызвать skewY() без входных данных. Значение 0 будет корректно принято.
 45 11 8.0 61
toFloat32Array 61 79 33 48 11 61 33 45 11 8.0 61
toFloat64Array 61 79 33 48 11 61 33 45 11 8.0 61
toJSON 61 79 62 48 11 61 62 45 11 8.0 61
toString 61 79 33 48 11 61 33 45 11 8.0 61
transformPoint 61 79 33 48 11 61 33 45 11 8.0 61
translate 61 79 33 48 11 61 33 45 11 8.0 61
worker_support 61 79 69 48 11 61 79 45 11 8.0 61
Настольный Мобильный
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
DOMMatrix 6152 79121212–79 33491.5 4815≤12.1 1154 611818 33494 4814≤12.1 1143 8.01.01.0 614.44.4
Geometry_interfaces 6152 79121212–79 33491.5 4815≤12.1 1154 611818 33494 4814≤12.1 1143 8.01.01.0 614.44.4
a 61 79 33 48 11 61 33 45 11 8.0 61
b 61 79 33 48 11 61 33 45 11 8.0 61
c 61 79 33 48 11 61 33 45 11 8.0 61
d 61 79 33 48 11 61 33 45 11 8.0 61
e 61 79 33 48 11 61 33 45 11 8.0 61
f 61 79 33 48 11 61 33 45 11 8.0 61
fromFloat32Array_static 61 79 69 48 11 61 79 45 11 8.0 61
fromFloat64Array_static 61 79 69 48 11 61 79 45 11 8.0 61
fromMatrix_static 61 79 69 48 11 61 79 45 11 8.0 61
invertSelf 61 79 33 48 11 61 33 45 11 8.0 61
m11 61 79 33 48 11 61 33 45 11 8.0 61
m12 61 79 33 48 11 61 33 45 11 8.0 61
m13 61 79 33 48 11 61 33 45 11 8.0 61
m14 61 79 33 48 11 61 33 45 11 8.0 61
m21 61 79 33 48 11 61 33 45 11 8.0 61
m22 61 79 33 48 11 61 33 45 11 8.0 61
m23 61 79 33 48 11 61 33 45 11 8.0 61
m24 61 79 33 48 11 61 33 45 11 8.0 61
m31 61 79 33 48 11 61 33 45 11 8.0 61
m32 61 79 33 48 11 61 33 45 11 8.0 61
m33 61 79 33 48 11 61 33 45 11 8.0 61
m34 61 79 33 48 11 61 33 45 11 8.0 61
m41 61 79 33 48 11 61 33 45 11 8.0 61
m42 61 79 33 48 11 61 33 45 11 8.0 61
m43 61 79 33 48 11 61 33 45 11 8.0 61
m44 61 79 33 48 11 61 33 45 11 8.0 61
multiplySelf 61 79 33 48 11 61 33 45 11 8.0 61
preMultiplySelf 61 79 33 48 11 61 33 45 11 8.0 61
rotateAxisAngleSelf 61 79 33 48 11 61 33 45 11 8.0 61
rotateFromVectorSelf 61 79 33 48 11 61 33 45 11 8.0 61
rotateSelf 61 79 33 48 11 61 33 45 11 8.0 61
scale3dSelf 61 79
33Начиная с Firefox 69, первый параметр (scale) теперь необязателен со значением по умолчанию 1, в соответствии со спецификацией. Раньше он был обязателен.
 48 11 61
33Начиная с Firefox для Android 79, первый параметр (scale) теперь необязателен со значением по умолчанию 1, в соответствии со спецификацией. Раньше он был обязателен.
 45 11 8.0 61
scaleSelf 61 79
33Firefox 69 ввёл поддержку современного синтаксиса с шестью параметрами для scaleSelf(). Ранее поддерживался только более старый синтаксис с тремя параметрами: scale(scaleX[, originX][, originY]]]).
 48 11 61
33Firefox для Android 79 ввёл поддержку современного синтаксиса с шестью параметрами для scaleSelf(). Ранее поддерживался только более старый синтаксис с тремя параметрами: scale(scaleX[, originX][, originY]]]).
 45 11 8.0 61
setMatrixValue 61 79 33 48 11 61 33 45 11 8.0 61
skewXSelf 61 79 33 48 11 61 33 45 11 8.0 61
skewYSelf 61 79 33 48 11 61 33 45 11 8.0 61
translateSelf 61 79 33 48 11 61 33 45 11 8.0 61
worker_support 61 79 69 48 11 61 79 45 11 8.0 61

api.DOMMatrix

Таблицы BCD загружаются только в браузере

api.DOMMatrixReadOnly

Таблицы BCD загружаются только в браузере

api.DOMPoint

Таблицы BCD загружаются только в браузере

api.DOMPointReadOnly

Таблицы BCD загружаются только в браузере

api.DOMQuad

Таблицы BCD загружаются только в браузере

api.DOMRect

Таблицы BCD загружаются только в браузере

api.DOMRectReadOnly

Таблицы BCD загружаются только в браузере

См. также

  • Path2D.addPath()
  • CanvasPattern.setTransform()
  • CanvasRenderingContext2D.getTransform()
  • CanvasRenderingContext2D.setTransform()
  • CSSTransformValue.toMatrix()
  • CSSTransformComponent.toMatrix()
  • Element.getBoundingClientRect()
  • Element.getClientRects()
  • VideoFrame.visibleRect
  • XRLightEstimate
  • XRRigidTransform

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API