.intersectRect(), .pointInRect()

Прямоугольник и JS

Определить, пересекаются ли два прямоугольника друг с другом или нет. Определить, находится ли точка внутри прямоугольника или нет.

Метод .intersectRect()

Функция для определения пересечения

JavaScript функция предназначена для определения того, пересекаются ли два прямоугольника друг с другом или нет.

intersectRect(...rects)

Метод .intersectRect() определяет, пересекаются ли два прямоугольника друг с другом или нет. Возвращает логическое значение true, если прямоугольники пересекаются, в противном случае вернётся false. Если нужно определить, находится ли точка внутри прямоугольника см. util.pointInRect().

Примеры intersectRect()

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

<ul class="uk-grid-collapse uk-child-width-1-2" uk-grid>
	<li>
		<div id="rect1" class="uk-card uk-card-primary uk-card-body">
			Прямоугольник #1
		</div>
	</li>
	<li>
		<div id="rect2" class="uk-card uk-card-secondary uk-card-body">
			Прямоугольник #2
		</div>
	</li>
</ul>
const rec1 = util.$('#rect1').getBoundingClientRect(),
      rec2 = util.$('#rect2').getBoundingClientRect();

console.log(util.intersectRect(rec1, rec2))

Результат

false

JavaScript функция вернёт true, если к примеру выше добавить смещение, при котором прямоугольники выглядели бы как видно ниже.

#rect2 {
    top: 25px;
    left: -25px;
}
  • Прямоугольник #1
  • Прямоугольник #2

Результат

true

Метод .pointInRect()

Функция определения точки

Определить, находится ли точка внутри прямоугольника или нет.

pointInRect(point, rect)

Метод .pointInRect() определяет, находится ли точка внутри прямоугольника или нет. Возвращает логическое значение true, если точка внутри прямоугольника, в противном случае вернётся false. Следующие параметры могут быть переданы функции:

Параметр Тип По умолчанию Описание
point Объект null Объект с x и y свойствами.
rect DOMRect null Этот объект содержит информацию об элементе.

Если нужно определить, пересекаются ли два прямоугольника друг с другом или нет см. util.intersectRect().

Использование pointInRect()

<div id="example-pointInRect" class="uk-card uk-card-primary uk-card-body">Карта Primary</div>
const myPoint = util.$('#example-pointInRect').getBoundingClientRect();

util.on(document, 'click', function (e) {
	console.log(util.pointInRect({ x: e.clientX, y: e.clientY }, myPoint));
});

Результат

Если нажать на карту, то эта функция вернет true, иначе false.

Примечание: В примере испольуется util.on() для наблюдения за нажатием мышкой по карте.