框选算法的实现与封装(矩形与矩形的相交检测)

问题描述

找出框选区域内的节点这个问题可以转换为找出相交的矩形

原理描述

两个矩形相交有以下两种情况

1. 一个矩形包含另一个矩形
2. 一个矩形的两边与另一个矩形相交

我们找到两个矩形的中心点 黄色三角和绿色三角
沿着x轴和y轴取他们的投影 如下图中红线部分
那么 红线部分 必定分别小于 两个矩形宽度之和除以2和两个矩形高度之和除以2

实现

/**
 * 两个矩形是否相交
 * @description 判断两个矩形是否相交 - 投影计算法
 * @param x
 * @param y
 * @param width
 * @param height
 * @param x2
 * @param y2
 * @param width2
 * @param height2
 * @return boolean
 */
export const intersection_rectangle = (
  x: number,
  y: number,
  width: number,
  height: number,
  x2: number,
  y2: number,
  width2: number,
  height2: number
): boolean => {
  const centerX = x + width / 2;
  const centerY = y + height / 2;
  const centerX2 = x2 + width2 / 2;
  const centerY2 = y2 + height2 / 2;
  const x_axis_projection = Math.abs(centerX2 - centerX);
  const y_axis_projection = Math.abs(centerY2 - centerY);
  if (
    (width + width2) / 2 > x_axis_projection &&
    (height + height2) / 2 > y_axis_projection
  ) {
    return true;
  }
  return false;
};