Что означает getBoundingClientRect()?

Question

У меня есть некоторые несоответствия при попытке нарисовать некоторые строки между элементами, которые я нахожу в DOM с помощью селекторов CSS, и полагаю, что это может быть связано с методом, который я вызываю getBoundingClientRect().

Если кто-то может предоставить любую информацию о том, как рассчитываются верхние, левые, нижние, правые для boundingClientRect, особенно в отношении холстов HTML, я был бы очень признателен.

Примером несогласованности, которую я получаю, является то, что когда я делаю canvas.getBoundingClientRect(). Top Я получаю 70. Затем у меня есть элемент в DOM, который я нахожу и вычисляет его верх, который равен 334. Когда я вычитаем два, чтобы найти смещение (334 - 70 = 264), однако, когда я рисую сетку на холсте, я отчетливо вижу, что элемент больше 275, почти 280.

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

Благодаря

Answer 1

В getBoundingClientRect возвращает координаты относительно окна просмотра. Это означает, что он не учитывает положение прокрутки окна (тела).

Свойства, отличные от ширины и высоты, относятся к верхнему левому краю окна просмотра.

Например, если окно прокручивается вниз 10px, вы должны добавить 10 к возвращаемому top значение, чтобы получить элемент верхнего левого corcer координаты относительно документа верхнего левого угла.

Возможно, ваше окно было прокручено и это испортило ваши расчеты.

Если вы используете jQuery, вы можете использовать его метод offset, который возвращает координаты относительно документа верхнего левого угла, и, кстати, использует getBoundingClientRect внутренне (по крайней мере, более новые версии).