如何用javascript检查碰撞？

Question

嗨，我想用 java 脚本检查 Div 和 Img 标签之间的冲突。 我的 Div 的 id 名称是 MainDiv。在这个 div 中有太多具有绝对位置和不同宽度和高度的 img 标签。 另外还有 div id 名称选择。 这种情况是，当用户在 mainDiv 中左键单击开始绘制矩形（选择）时，如果选择的内容在 mainDiv 中具有碰撞 img 标签，则选择背景颜色会变得太红，如果没有保持绿色。

我现在编写这个 JavaScript：

     const MainDiv = document.getElementById('MainDiv');
 const selection = document.getElementById('selection');
 const dimensionsInfo = document.getElementById('dimensionsInfo');
 let startX, startY, startOffsetX, startOffsetY;
 let width,height;
 
     MainDiv.addEventListener('mousedown', startDrawing);
     MainDiv.addEventListener('mousemove', drawRectangle);
     MainDiv.addEventListener('mouseup', stopDrawing);
 

 function startDrawing(event) {

     if (getComputedStyle(event.target).cursor === 'pointer') {
         return;
     }

     startX = event.clientX;
     startY = event.clientY;
     startOffsetX = event.offsetX;
     startOffsetY = event.offsetY;

     selection.style.display = 'block';
     dimensionsInfo.style.display = 'block';
 }

 function drawRectangle(event) {
     if (startX && startY) {

         const MainDivOffsetX = MainDiv.getBoundingClientRect().left;
         const MainDivEndDrawX = MainDiv.offsetWidth + MainDivOffsetX;

         const MainDivOffsetY = MainDiv.getBoundingClientRect().top;
         const MainDivEndDrawY = MainDiv.offsetHeight + MainDivOffsetY;

         if (event.clientX >= MainDivOffsetX && event.clientX <= MainDivEndDrawX) {
             width = (event.clientX - startX); 
         }

         if (event.clientY >= MainDivOffsetY && event.clientY <= MainDivEndDrawY) {
             height = (event.clientY - startY);
         }

        
         const area = Math.abs(width * height);
         const sum = Math.abs(area * 100).toLocaleString();


         selection.style.width = Math.abs(width) + 'px';
         selection.style.height = Math.abs(height) + 'px';
         selection.style.left = width < 0 ? event.clientX + 'px' : startX + 'px';
         selection.style.top = height < 0 ? event.clientY + 'px' : startY + 'px';

         const startAdsX = startX < event.clientX ? startOffsetX : startOffsetX - Math.abs(width);
         const startAdsY = startY < event.clientY ? startOffsetY : startOffsetY - Math.abs(height);

         dimensionsInfo.style.left = event.clientX + 'px';
         dimensionsInfo.style.top = event.clientY + 'px';



         const targetElement = document.elementsFromPoint(event.clientX, event.clientY);
         let intersectsWithImage = false;

         for (let i = 0; i < targetElement.length; i++) {
             if (targetElement[i].tagName === 'IMG') {
                 intersectsWithImage = true;
             }
         }
         if (intersectsWithImage === true) {
             selection.style.backgroundColor = 'rgba(255, 127, 127, 0.3)';

         }
         else{
             selection.style.backgroundColor = 'rgba(144, 238, 144, 0.3)';
        

         }
         
         
     }
 }

在此代码中，我使用 document.elementsFromPoint 来检查光标位置是否在图像标签中。但这样，当光标在img中时，颜色才会变成红色，如果光标在外面，但发生碰撞，则颜色保持绿色。 另外，我不想使用 queryselectorsall，因为我在 mainDiv 中有太多 img 标签，如果我使用它，会占用很大的处理器能力。 我也试试这个：

let targetElement;
   for (let x = startAdsX; x <= startAdsX + width; x++) {
       for (let y = startAdsY; y <= startAdsY + height; y++) {
           targetElement = document.elementsFromPoint(x, y);
           for (let i = 0; i < targetElement.length; i++) {
               if (targetElement[i].tagName === 'img') {
               intersectsWithImage = true;
                 }
             }
}
}

通过这种方式，我得到了选择区域的所有点并比较碰撞。但这样的流程太多了。 那么如何解决这个问题？

Answer 1

为此，您可以在 div 和图像上使用 getBoundingClientRect() 方法，然后比较结果。例如：

MainDiv.getBoundingClientRect()

.

此方法输出一个

DOMRect

对象，其具有以下属性：

left

、

top

、

right

、

bottom

、

x

、

y

、

width

和

height

。

将这些属性与通过在图像上应用相同方法返回的另一组属性进行比较。