Запутался в getBoundingClientRect
Запутался в функции getBoundingClientRect() в Javascript.
Согласно официальному документу, если const rect = getBoundingClientRect();, то имеем
rect.width = rect.right - rect.left;
rect.height = rect.bottom - rect.top;
Означает ли это, что левое правое положение включает левое и правое исключающее, то есть [левое, правое)? В противном случае должно быть
rect.height = rect.bottom - rect.top + 1;
Посмотрите на следующую 5x5 карту.
В режиме [inclusive, inclusive] ограничивающий прямоугольник все 1 должен быть left=2, right=4, top=3, bottom=4,
и у нас есть
width=right-left+1=4-2+1
height=bottom-top+1=4-3+1
Сетка 5x5
0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 1 1 1
0 0 1 1 1
Более конкретный вопрос:
что означает rect.left? Означает ли это расстояние слева от клиентского контейнера или i-го пикселя? А как насчет rect.right?
Добавляются дополнительные вопросы.
Все это объясняется в документы (вы сказали, что читали?).
Я просто пришел со страницы документа и запутался. Вопрос ясен? или надо уточнить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Рассмотрим это так:
Если серый квадрат представляет пространство экрана, то красный квадрат имеет ограничительную рамку:
{
x: 1, y: 1,
width: 3, height: 3
}
Это означает, что у него есть left=1, right=4 и, следовательно, right-left=width
Отлично, я поймал ошибку в своем коде! Есть ли официальный документ, например. где-то в mdn, объясняются такие подробности. Я не могу найти здесь.
Лучшее, что я могу найти, это developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/… . По сути, вы не должны нумеровать пиксели в уме, но считайте, что пиксели — это квадраты шириной 1, расположенные в целочисленных координатах в непрерывном пространстве. Довольно часто для координат объекта на экране используются десятичные значения. Тогда пиксели - это всего лишь приближение для целей отображения.
Точнее: пиксели как единица измерения (px) — это не то же самое, что настоящие пиксели на вашем дисплее. Последние представляют собой дискретные квадраты, что и приводит к вашим первоначальным рассуждениям. Первые представляют собой просто координаты в непрерывном пространстве, что становится более очевидным при увеличении масштаба (измеренные позиции больше не будут соответствовать пикселям экрана и часто будут нецелыми числами).
Да, это действительно отличается от системы позиционирования пикселей, которую я использовал раньше. Ваше объяснение действительно полезно.
0также является ценностью размещения.