Системы координат

В системах координат, используемых веб-технологиями, принято называть горизонтальное смещение координатой x, где отрицательное значение указывает позицию слева от начала координат, а положительное — справа. Координата y определяет вертикальное смещение, где отрицательное значение находится выше начала координат, а положительное — ниже.

В веб-технологиях стандартное начало координат находится в верхнем левом углу данного контекста (положительные значения координаты y находятся ниже начала координат). Обратите внимание, что это отличается от большинства математических моделей, где начало координат находится в нижнем левом углу, а положительные значения координаты y находятся выше начала координат.

При использовании третьей оси для наложения объектов спереди назад, мы используем ось z. Ось z направлена от наблюдателя к поверхности экрана. Атрибут CSS z-index влияет на то, где расположенные элементы находятся на этой оси, создавая эффект удаления от или приближения к наблюдателю.

Существует четыре стандартные системы координат, используемые моделью объектов CSS. Чтобы помочь визуализировать основные системы, на следующем рисунке показан монитор с окном браузера, содержащим содержимое, прокрученное за пределы области просмотра. Содержимое страницы, прокрученное за пределы области просмотра, показано полупрозрачным слоем над окном браузера, чтобы указать, где будет находиться начало координат для координат "страницы". На рисунке выделены начала координат систем "клиент", "страница" и "область просмотра".

Координаты, указанные с помощью модели "смещение", используют верхний левый угол элемента, на котором выполняется проверка или на котором произошло событие.

Например, при возникновении события события мыши, позиция мыши, как указано в свойствах события offsetX и offsetY, задаётся относительно верхнего левого угла узла, которому было доставлено событие. Начало координат смещено на padding-edge , что является границей между областью отступа и областью рамки.

Система координат "область просмотра" (или "клиент") использует в качестве начала координат верхний левый угол области просмотра или контекста просмотра, в котором произошло событие. Это вся область просмотра, в которой представлен документ.

Например, на настольном компьютере свойства MouseEvent.clientX и MouseEvent.clientY указывают позицию курсора мыши в момент возникновения события относительно верхнего левого угла window. При использовании стилуса или указателя координаты Touch.clientX и Touch.clientY в событии касания относятся к тому же началу координат.

Верхний левый угол окна всегда имеет координаты (0, 0), независимо от содержимого документа или выполненной прокрутки. Другими словами, прокрутка документа изменит координаты области просмотра заданной позиции в документе.

Система координат "страница" определяет позицию пикселя относительно верхнего левого угла всего рендеренного Document. Это означает, что точка в элементе внутри документа будет иметь те же координаты после горизонтальной или вертикальной прокрутки пользователя в документе, если элемент не перемещается из-за изменений макета.

Свойства событий мыши pageX и pageY предоставляют позицию мыши в момент генерации события, относительно верхнего левого угла документа. Координаты Touch.pageX и Touch.pageY в событии касания относятся к тому же началу координат.

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

Свойства MouseEvent.screenX и MouseEvent.screenY предоставляют координаты позиции события мыши относительно начала координат экрана. Координаты Touch.screenX и Touch.screenY в событии касания относятся к тому же началу координат.

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

В JavaScript код настраивает обработчики событий во внутренней области, вызывая addEventListener() для каждого из типов mouseenter, mousemove и mouseleave. Для каждого из событий вызывается функция setCoords(), которая устанавливает внутренний текст элемента <p> с координатами для каждой системы.

const log = document.querySelector(".log");
const inner = document.querySelector(".inner");

function setCoords(e) {
  log.innerText = `
    Offset X/Y: ${e.offsetX}, ${e.offsetY}
    Viewport X/Y: ${e.clientX}, ${e.clientY}
    Page X/Y: ${e.pageX}, ${e.pageY}
    Screen X/Y: ${e.screenX}, ${e.screenY}`;
}

inner.addEventListener("mousemove", setCoords);
inner.addEventListener("mouseenter", setCoords);
inner.addEventListener("mouseleave", setCoords);

HTML содержит элемент <p> с классом "log", который отображает данные из событий мыши.

<div class="outer">
  <div class="inner">
    <p class="log">Mouse over this section to view coordinates</p>
  </div>
</div>

Класс "outer" для содержащей рамки преднамеренно слишком широк, чтобы можно было увидеть эффекты координат мыши, когда содержимое прокручено. Абзац "inner" — это место, где отслеживаются и регистрируются события мыши.

.outer {
  width: 1000px;
}

.inner {
  font-family: monospace;
  position: relative;
  width: 500px;
  height: 150px;
  top: 25px;
  left: 100px;
  background-color: darkblue;
  color: white;
  cursor: crosshair;
  user-select: none;
}

.log {
  position: relative;
  width: 100%;
  text-align: center;
}

Здесь вы можете увидеть результат в действии. При перемещении мыши внутри синей области следите за изменением значений координат X и Y мыши в различных системах координат.

• Использование CSS-преобразований: как изменить систему координат

• Координаты MouseEvent:

  • MouseEvent.offsetX и MouseEvent.offsetY
  • MouseEvent.clientX и MouseEvent.clientY
  • MouseEvent.pageX и MouseEvent.pageY
  • MouseEvent.screenX и MouseEvent.screenY

• Координаты Touch:

  • Touch.clientX и Touch.clientY
  • Touch.pageX и Touch.pageY
  • Touch.screenX и Touch.screenY