判断两个矩形是否相交（面试题分享）

视图中有两个矩形，提供一个算法，判断出来拖拽之后两个矩形是否相交，不考虑旋转的情况，只考虑二维空间。

思路

因为没有任何旋转，所以问题可以直接简化为两个矩形中心点的判断。

当两个矩形有相交时，可以看到其两个中心点一定是满足x方向的距离小于安全距离，y方向的距离小于安全距离。

什么是安全距离，以目前水平没有任何旋转的情况来说，就是符合不相交的时候，其x方向的差值必须大于两者长度和的一半，y方向的差值必须大于两者长度和的一半。

具体实现

所需的两个矩形的基本坐标数据：

const square1 = [{
   x: 0,
   y:0
},{
   x: 10,
   y:0
},{
   x: 0,
   y:20
},{
   x: 10,
   y:20
   }]

   const square2 = [{
      x: 1,
      y:1
   },{
      x: 11,
      y:1
   },{
      x: 1,
      y:21
   },{
      x: 11,
      y:21
      }]

拖拽时，得到的两个拖拽距离的大小,要注意没有任何拖拽动作时，这个值是0.

const dragSquare1 = {x:0,y:0}
const dragSquare2 = {x:0,y:0}

判断是否相交的代码，其中center1，center2是两个矩形移动之后的坐标点。

/**
 * 
 * @param {*} square1 移动之后矩形左上角坐标点
 * @param {*} square2 移动之后矩形左上角坐标点
 * @returns 
 */
const hasCommonPart = (square1, square2) => {
    const safeDistance = {
        x:
            (defaultSquare1[1].x - defaultSquare1[0].x) / 2 +
            (defaultSquare2[1].x - defaultSquare2[0].x) / 2,
        y:
            (defaultSquare1[2].y - defaultSquare1[0].y) / 2 +
            (defaultSquare2[2].y - defaultSquare2[0].y) / 2 
    };
    const center1 = {
        x: defaultSquare1[0].x+square1.x + (defaultSquare1[1].x - defaultSquare1[0].x) / 2,
        y: defaultSquare1[0].y+square1.y + (defaultSquare1[2].y - defaultSquare1[0].y) / 2,
    };
    const center2 = {
        x:  defaultSquare2[0].x+  square2.x +(defaultSquare2[1].x - defaultSquare2[0].x) / 2 ,
        y: defaultSquare2[0].y+ square2.y+(defaultSquare2[2].y - defaultSquare2[0].y) / 2 ,
    };
    if (
        Math.abs(center1.x - center2.x) - safeDistance.x < 0 &&
        Math.abs(center1.y - center2.y) - safeDistance.y < 0
    ) {
        return "交叉";
    }
    return "没有交叉";
};

相关内容

拖拽能力

使用react-draggable,其中本文中的方法用到的返回值为data中的x,y的值。

import React from "react"
import Draggable from "react-draggable"
const Square = (props) => { 
   const [potint1, potint2, potint3, potint4] = props.points 
   const {handleDragFromParent} = props 
   let style = {
      'position': 'absolute',
      left: potint1.x,
      width: potint2.x - potint1.x,
      height: potint3.y - potint1.y,
      top: potint1.y,
      border:"1px solid #000"

   }
   const handleDrag = (e,data )=> { 
      const { x, y } = data;
      handleDragFromParent({x,y})
   }

   return <Draggable onDrag={handleDrag}><div style={ style} className="square"></div></Draggable>

}

export default Square

父组件中基本代码

需要包含多个拖拽组件，并为其传入初始的坐标点，当任何一个矩形被拖动的时候，需要传递给父组件，让父组件来判断，此次拖动是否符判断条件。这个部分，不适合，在子组件中实现。

function App() {
  const [square1, setSquare1] = useState({x:0,y:0});
  const [square2, setSquare2] = useState({x:0,y:0});
    const handleDrag = (index, points) => {
        if (index === 1) {
            setSquare1(points);
        }
        if (index === 2) {
            setSquare2(points);
        }
        console.log(hasCommonPart(square1, square2));
    };
    return (
        <div className="App">
            <Square
                points={defaultSquare1}
                handleDragFromParent={(res) => handleDrag(1, res)}
            />
            <Square
                points={defaultSquare2}
                handleDragFromParent={(res) => handleDrag(2, res)}
            />
        </div>
    );
}

export default App;

更多

• 这个问题的升级版本还有很多，比如将长方形换成三角形，圆形；或者允许长方形旋转一定的角度；或者增加三维空间，判断是否在3维空间里发生了碰撞或者重叠。你对这种纯技术问题感兴趣吗？

• 还有一个发散的角度是，一般这种矩形判断是否交叉重叠是用在什么场景下，如果正常逻辑是不允许重叠，改为判断其重叠区域有多大，或者允许其a包含b的情况，又应该是什么业务场景呢?从技术反思业务，可能让我们得到更多的答案。

• 如果你想获得更多面试题，博客，职场的分享，欢迎关注我的语雀主页(余杭子曰 · 语雀 (yuque.com))