四叉树：二维空间的 “智能分区管理员”

想象一下，你手里有一张巨大的城市地图，上面密密麻麻地分布着十万个路灯。现在老板突然让你找出某条小巷里的三个路灯 ------ 如果像翻字典一样逐个排查，恐怕下班前都完不成任务。但如果这张地图早被划分成了街道片区，每个片区又细分出街区，街区再分成小巷，你就能像剥洋葱一样层层定位，这就是四叉树的核心智慧。

从像素格子到数学魔法

在计算机图形学的世界里，二维空间就像一块等待切割的披萨。四叉树这位 "披萨大师" 有个怪癖：每次都要把当前区域切成大小相等的四份 ------ 左上、右上、左下、右下，如同给正方形蛋糕划十字刀。这种划分不是随机的，而是遵循着简单又精妙的规则：当某个区域里的 "居民"（可以是点、图形或像素）数量超过阈值，就必须分家。

让我们用坐标系理解这个过程。假设初始空间是一个从 x0 到 x1、y0 到 y1 的正方形，就像一个边长为 100 的方盒子。当里面的点超过 4 个时，四叉树会找出这个正方形的中心 ------x 中点是（x0 加 x1）除以 2，y 中点同理。这两条中线如同魔术师的魔杖，瞬间把一个大盒子变成四个小盒子，每个孩子盒子的边长都是原来的一半。

这种划分会递归进行，直到每个小盒子里的 "居民" 数量都小于等于设定的阈值。就像俄罗斯套娃，每个盒子里可能藏着更小的盒子，也可能直接住着几个 "居民"。

JavaScript 中的四叉树实现

让我们用代码给这位 "分区管理员" 编写工作手册。下面的 JavaScript 类就像四叉树的身份证，记录着它的管辖范围和家庭成员：

kotlin 复制代码

class Quadtree {
  // 构造函数：初始化一个区域
  constructor(x, y, width, height, capacity) {
    this.x = x;         // 区域左上角x坐标
    this.y = y;         // 区域左上角y坐标
    this.width = width; // 区域宽度
    this.height = height; // 区域高度
    this.capacity = capacity; // 最大容纳数量
    this.points = [];   // 当前区域的居民
    this.children = null; // 四个子区域（初始为空）
  }
  // 划分区域：生四个"孩子"
  subdivide() {
    const halfW = this.width / 2;
    const halfH = this.height / 2;
    // 左上孩子
    this.children = [
      new Quadtree(this.x, this.y, halfW, halfH, this.capacity),
      // 右上孩子
      new Quadtree(this.x + halfW, this.y, halfW, halfH, this.capacity),
      // 左下孩子
      new Quadtree(this.x, this.y + halfH, halfW, halfH, this.capacity),
      // 右下孩子
      new Quadtree(this.x + halfW, this.y + halfH, halfW, halfH, this.capacity)
    ];
  }
  // 插入新居民
  insert(point) {
    // 如果点不在当前区域，直接拒绝
    if (!this.contains(point)) return false;
    // 还有空位且没生孩子，直接入住
    if (this.points.length < this.capacity && !this.children) {
      this.points.push(point);
      return true;
    }
    // 人满为患，赶紧分家
    if (!this.children) this.subdivide();
    // 让四个孩子决定谁接收这个新居民
    for (let child of this.children) {
      if (child.insert(point)) return true;
    }
    return false; // 理论上不会走到这步
  }
  // 检查点是否在当前区域内
  contains(point) {
    return (point.x >= this.x &&
            point.x <= this.x + this.width &&
            point.y >= this.y &&
            point.y <= this.y + this.height);
  }
  // 查找区域内的所有居民
  query(range, found) {
    // 如果当前区域和查询范围不搭界，直接返回
    if (!this.intersects(range)) return found;
    // 收集当前区域里的居民
    for (let p of this.points) {
      if (range.contains(p)) {
        found.push(p);
      }
    }
    // 让孩子们也交出符合条件的居民
    if (this.children) {
      for (let child of this.children) {
        child.query(range, found);
      }
    }
    return found;
  }
  // 检查两个区域是否重叠
  intersects(range) {
    return !(this.x > range.x + range.width ||
             this.x + this.width < range.x ||
             this.y > range.y + range.height ||
             this.y + this.height < range.y);
  }
}

像侦探一样高效搜索

假设我们要在游戏地图中检测碰撞 ------ 比如找出玩家角色周围 50 像素内的所有敌人。如果遍历整个地图的 1000 个角色，每次检测都要做 1000 次计算；而有了四叉树，我们只需：

找到玩家所在的最小区域

检查相邻的几个兄弟区域

最多只需查询几十个角色

这种效率提升在图形渲染中更明显。当你缩放地图时，远处的细节不需要渲染 ------ 四叉树会告诉你："这个区域太小了，里面的东西合并成一个点就行"，就像地图上远处的城市只用一个圆点表示。

生活中的四叉树哲学

其实四叉树的智慧早就渗透在生活里：图书馆的书架先按学科分类，再分大类，最后到具体书目；快递网点先按城市分区，再到街道，最后到小区。这种 "分而治之" 的思想，让计算机在处理海量空间数据时，从 "愚公移山" 变成了 "庖丁解牛"。

下次当你在地图软件上缩放查看路况时，不妨想想背后可能有一棵四叉树正在默默工作 ------ 它可能正把你当前视野里的车辆、行人、红绿灯，都妥善地放进不同的 "小盒子" 里，等待你的每一次点击查询。