.intersectRect()

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

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

intersectRect(...rects)

Примеры 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>

Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть видимой страницы на экране).

const rec1 = util.$('#rect1').getBoundingClientRect();
const rec2 = util.$('#rect2').getBoundingClientRect();

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

Результат

false

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

#rect2 {
    top: 25px;
    left: -25px;
}

• Прямоугольник #1
• Прямоугольник #2

Результат

true

Примечание: чтобы определить, находится ли точка внутри прямоугольника или нет см. .pointInRect().