javascript - 如何检测点是否与 View 中部分形状相交

Question

我想要的解决方案:检测一个点是否落在下面的红色区域内。

现在的困难在于红色区域不是图像，它实际上是一个已旋转到位的 div。

使用 JavaScript，如何检测某个点是否落在该区域？理想情况下以有效的方式进行，因为可能需要经常在慢速设备上调用此检查。

CSS 详细信息:它上面有 position:absolute，旋转 45 度，并使用 left: -135 和 进行定位>顶部:0。

我目前的方法是尝试执行一些计算来确定 X 与视口(viewport)相交的位置，然后给出 Y(我可以从那里计算)，但我没有运气。在元素上使用 getBoundingClientRect() 会返回形状周围的正方形，但不会返回形状本身的正方形。

如何做到这一点？这是一个小例子(我想检测 intersecting 元素的左上角是否与红色三 Angular 形相交):

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>

Answer 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.log(`.intersection and div.sash are ${ isIntersectionInRedArea ? '' : 'not '}intersecting.`);


let isNonIntersectionInRedArea = isIntersecting('.non-intersection', 'div.sash');
console.log(`.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>