Как определить, пересекается ли точка с фигурой частично в поле зрения
Решение, которое мне нужно: определить, попадает ли точка в красную область ниже.
Теперь трудность здесь в том, что красная область - это не изображение, а на самом деле div, который был повернут в нужное положение.
Используя JavaScript, как я могу определить, попадает ли точка в эту область? И в идеале эффективно, так как эту проверку, возможно, придется вызывать часто и на медленных устройствах.
Детали CSS: на нем есть position: absolute, он повернут 45 degrees и позиционирован с помощью left: -135 и top:0.
Мой текущий подход состоял в том, чтобы попытаться выполнить некоторые вычисления, чтобы определить, где X пересекается с окном просмотра, что затем даст мне Y (и я могу вычислить оттуда), но мне не повезло. Использование getBoundingClientRect() для элемента возвращает квадрат вокруг формы, но не самой формы.
Как это может быть сделано? Вот небольшой пример (я хочу определить, пересекается ли верхний левый угол элемента intersecting с красным треугольником):
body {
background: #ffd0ff;
padding: 12px;
margin: 0;
}
.sash {
position: absolute;
width: 270px;
height: 80px;
top: 0;
left: -135px;
background-color: #e10a0a;
opacity: 0.5;
transform: rotate(-45deg);
}
.intersection {
background: rgba(0, 255, 0, 0.5);
padding: 12px;
display: inline-block;
}<div class = "sash"></div>
<span class = "intersection">
Some intersecting div
</span>@Aaron3219 Aaron3219 Я обновил JSFiddle лучшим примером (я хочу определить, пересекается ли верхний левый угол элемента intersection с красным треугольником)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать метод document.elementFromPoint(x, y), например:
function isPointInElement(x, y, selector) {
let element = document.querySelector(selector);
let elementFromPoint = document.elementFromPoint(x, y);
return element == elementFromPoint;
}
function isIntersecting(selector1, selector2) {
let element1 = document.querySelector(selector1);
let element1Coords = element1.getBoundingClientRect();
return isPointInElement(element1Coords.top, element1Coords.left, selector2);
}
let isIntersectionInRedArea = isIntersecting('.intersection', 'div.sash');
console.info(`.intersection and div.sash are ${ isIntersectionInRedArea ? '' : 'not '}intersecting.`);
let isNonIntersectionInRedArea = isIntersecting('.non-intersection', 'div.sash');
console.info(`.non-intersection and div.sash are ${ isNonIntersectionInRedArea ? '' : 'not '}intersecting.`);body {
background: #ffd0ff;
padding: 12px;
margin: 0;
}
.sash {
position: absolute;
width: 270px;
height: 80px;
top: 0;
left: -135px;
background-color: #e10a0a;
opacity: 0.5;
transform: rotate(-45deg);
}
.intersection {
background: rgba(0, 255, 0, 0.5);
padding: 12px;
display: inline-block;
}
.non-intersection {
background: rgba(0, 0, 255, 0.5);
padding: 12px;
display: inline-block;
}<div class = "sash"></div>
<span class = "intersection">
Some intersecting div
</span>
<span class = "non-intersection">
Non intersecting div
</span>Игнорируйте мой предыдущий комментарий, это хорошее решение и работает для моего варианта использования. Хотя я не буду привязывать его к событию click, использование document.elementFromPoint с getBoundingClientRect() позволяет мне достичь того, что мне нужно. Спасибо!
@DuncanOgle Добавлен пример, в котором также используется getBoundingClientRect().
Итак, у вас есть розовая область, куда может двигаться красная область, верно? И где-то в этой розовой области у вас есть точка, где вы должны проверить, находится ли она в красной области? Если да, то что, если область находится внутри красной области, но за пределами розовой области (поскольку красная область частично находится за пределами розовой области)?