需要空间索引是因为canvas拾取本质是o(n)碰撞检测问题，而空间索引（如四叉树）可将全量遍历降为局部筛选，大幅减少需判断的图形数量，提升拾取响应速度与稳定性。
Canvas 原生不保存图形信息，点中哪个图形全靠你手动判断。当图形数量多（比如上千个）时，逐个用 isPointInPath 或包围盒检测会明显卡顿。这时候引入空间索引算法，能大幅减少需要检测的对象数量，把“全量遍历”变成“局部筛选”，拾取响应更稳更快。
为什么需要空间索引？
Canvas 拾取本质是碰撞检测问题：给定鼠标坐标 (x, y)，找出所有可能包含该点的图形。朴素做法是遍历全部图形做矩形/路径判断——时间复杂度 O(n)。而真实场景中，大部分图形离点击位置很远，完全没必要参与计算。空间索引就是为快速排除这些“无关项”而生的结构。
- 它把画布按区域划分，每个区域只存“可能在此出现”的图形引用；
- 点击发生时，先定位到对应区域，再仅在该区域内的少量图形中做精确判断；
- 常见结构有四叉树（适合二维均匀分布）、R 树（适合矩形重叠多的场景）、网格哈希（实现最简单，适合固定尺寸或规则布局）。
四叉树是最实用的入门选择
对大多数 Canvas 应用（如白板、流程图、简单游戏），四叉树平衡了性能、实现难度和内存开销。它递归将画布划分为四个子象限，直到满足容量阈值（如每个节点最多存 4 个图形）或达到最小深度。
- 插入图形时，根据其包围盒决定落入哪一层哪一格；
- 拾取时，从根节点开始，只递归进入与点击点相交的子节点；
- Leaf 节点中存储的图形才调用
isPointInPath或自定义 hitTest 方法； - 开源库如
qtree-js或simple-quadtree可直接集成，无需从零造轮子。
配合对象缓存，效果更明显
空间索引解决“找谁判断”，而对象缓存解决“判断什么”。Fabric.js 等高级库默认开启 objectCaching，静态图形（如背景、图标）渲染一次后复用位图，避免重复路径计算。这样，四叉树筛出候选集后，hitTest 过程本身也更快。
- 动态图形（如正在拖拽的元素）应临时禁用缓存，确保视觉实时性；
- 缩放或旋转后，需调用
setCoords()更新包围盒，否则四叉树查询会失效； - 可结合
canvas.forEachObject批量更新坐标，再触发一次四叉树重建或增量插入。
别忽略坐标系对齐这个细节
Canvas 的事件坐标（clientX/clientY）默认基于视口，而图形坐标通常基于 canvas 元素左上角，且受 CSS 缩放、滚动偏移影响。如果没做正确转换，四叉树查出来的区域和实际图形位置就会错位。
- 用
canvas.getBoundingClientRect()获取 canvas 在视口中的真实位置； - 减去
left/top，再除以devicePixelRatio（处理高清屏）； - 若 canvas 有 CSS transform（如 scale），需额外反向变换鼠标坐标。
