Javascript 如何在视图中检测点是否与形状部分相交

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

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

使用JavaScript，如何检测点是否落在该区域？理想情况下，这种检查可能需要在低速设备上经常调用

CSS详细信息：其上有

位置：绝对

，旋转

45度

，并已使用

左：-135

和

顶部：0进行定位

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

如何做到这一点？下面是一个小示例（我想检测
相交的
元素的左上角是否与红色三角形相交）：


正文{
背景：#ffd0ff；
填充：12px；
保证金：0；
}
.腰带{
位置：绝对位置；
宽度：270px；
高度：80px；
排名：0；
左：-135px；
背景色：#e10a0a；
不透明度：0.5；
变换：旋转（-45度）；
}
.十字路口{
背景：rgba（0,255,0,0.5）；
填充：12px；
显示：内联块；
}

一些相交的div
您可以使用
文档。元素frompoint（x，y）
方法，例如：


函数ispointinement（x、y、选择器）{
let元素=document.querySelector（选择器）；
让elementFromPoint=document.elementFromPoint（x，y）；
返回元素==elementFromPoint；
}
功能是交互（选择器1、选择器2）{
让element1=document.querySelector（selector1）；
让element1Coords=element1.getBoundingClientRect（）；
返回ispointelement（element1Coords.top、element1Coords.left、selector2）；
}
设isIntersectionInRedArea=isIntersecting（'.intersection'，'div.sash'）；
log（`.intersection和div.sash是${isIntersectionInRedArea？''：'not'}相交。`）；
设isNonIntersectionInRedArea=isIntersecting（'.non-intersection'，div.sash'）；
log（`.non-intersection和div.sash是${isNonIntersectionInRedArea？''：'not'}相交。`）
正文{
背景：#ffd0ff；
填充：12px；
保证金：0；
}
.腰带{
位置：绝对位置；
宽度：270px；
高度：80px；
排名：0；
左：-135px；
背景色：#e10a0a；
不透明度：0.5；
变换：旋转（-45度）；
}
.十字路口{
背景：rgba（0,255,0,0.5）；
填充：12px；
显示：内联块；
}
1.非交叉路口{
背景：rgba（0,0,255,0.5）；
填充：12px；
显示：内联块；
}

一些相交的div
非相交div
所以你有一个粉红色区域，红色区域可以在那里移动，对吗？在这个粉红色区域的某个地方，你必须检查它是否在红色区域？如果是这样，如果该区域在红色区域内但在粉色区域外（因为红色区域部分在粉色区域外），该怎么办？@Aaron3219我已经用一个更好的例子更新了jsiddle（我想检测
交点
元素的左上角是否与红色三角形相交），忽略我之前的注释，这是一个很好的解决方案，适用于我的用例。虽然我不会将其绑定到
单击
事件，但使用
document.elementFromPoint
和
getBoundingClientRect（）。谢谢大家!@DuncanOgle还添加了一个使用
getBoundingClientRect（）
的示例。