手写一个无限画布 #3：如何在Canvas 层上建立事件体系你以为你点中了一个圆，其实你只是点中了一堆毫无意义的像素点。

你以为你点中了一个圆，其实你只是点中了一堆毫无意义的像素点。在画布里，所谓的“选中”，不过是一场精密的数学与色彩幻术。

上一篇我们终于搞定了渲染层，并明确选择了 Konva (Canvas 2D) 作为我们的底层渲染基石。现在，我们的屏幕上终于可以丝滑地渲染出极具表现力的图形了。

但是，当你试图把鼠标悬停在其中一个图形上，或者想拖拽一条连线时，你会遭遇一个巨大的反直觉打击：浏览器完全不知道你点的是什么。

在传统的前端开发中，原生 DOM 是一棵界限分明的树。鼠标移入一个 <div>，浏览器引擎会在底层自动做碰撞检测，并把 mouseenter 或 click 事件准确无误地派发给这个节点。如果你给 <div> 加了圆角（border-radius）甚至复杂的 clip-path，浏览器依然能完美识别出精确的边缘。这种体验太理所当然，以至于我们从未思考过背后的代价。

但在 Canvas 的世界里，这套秩序完全失效了。

对于浏览器来说，不管你在 Canvas 里画了多少个圆圈、多复杂的文字，它看到的永远只有一个扁平的 <canvas> 标签。当用户点击屏幕时，浏览器的原生 Event 对象只能递给你一个冷冰冰的坐标：{ clientX: 500, clientY: 400 }。至于这个坐标下是空气、是红色正方形，还是三个交叠在一起的半透明多边形，对不起，只能你自己算。

要在毫无知觉的像素油盆上，重新赋予图形被“感知”的能力，这就是 命中测试（Hit Testing） 的核心命题。

直觉陷阱：纯算几何碰撞

面对这个问题，多数人脑海里冒出的第一个念头一定是算数学题。

“既然我知道画布上每个方块的长宽、每个圆的半径，那鼠标点下去的时候，去遍历所有图形做个碰撞测试不就好了？”

比如点矩形，就看鼠标坐标是不是在它的上下左右边界内；点圆，就算勾股定理看距离是不是小于半径；如果是多边形，大不了掏出大学计算机图形学里教的“射线法（Ray-Casting）”，看看射线和多边形交点是奇数还是偶数。

在很多游戏开发新手教程里，这确实是讲解命中测试的第一课。

但只要你真的在业务里动手写过，就会立刻体会到这种朴素算法带来的“工程绝望”：

如果是最基础的方块和圆还好，可你在白板工具（如 Excalidraw / Figma）里，最常面对的是用户鼠标画出的一条粗细不均、极度扭曲的自由手绘墨迹（Freehand Draw）。成百上千个点连出来的畸形曲线，你拿什么算交点？

即使你咬着牙把每根线段都算了，还有图形的中空与穿透问题。当用户点在一个空心圆环的正中间，或者字母 "O" 的空白处时，根据最粗糙的外围包围盒（Bounding Box），它是被命中的；但这根本违反了用户“我明明点在透明的地方，我想点它背后元素”的心理预期。哪怕你真算出了鼠标确实落在图形线条上，你又怎么确保，这层图形的正上方，没有被另一个半透明的阴影盖住呢？

别忘了最绝杀的性能噩梦。不仅是点击，鼠标每在屏幕上划过一个像素，就会高频触发 mousemove。如果同屏有几千个杂乱的图形交叠，每移动一毫米就要把所有多边形的射线方程重新算一遍，你的 CPU 风扇会直接起飞，页面帧率瞬间崩盘。

想靠纯写 if-else 的几何穷举来搞定一个不仅带各种圆角、线宽、自交错，还带层级遮挡的生产级别白板交互，可以说是直接在给 CPU 判死刑。

优雅的黑魔法：离屏 Canvas 与 Color Picking

针对纯正向几何数学算不通的情况，业界的顶级绘图引擎往往会使用一招极度聪明且优雅的逆向黑魔法：利用颜色查表法（Color Picking）。这也是 Konva 最为核心的看家本领机制。

它的核心逻辑堪称“暗度陈仓”，分为以下几个精妙的步骤：

1. 建立影分身（Hidden Canvas）

在内存中，创建一个跟主屏幕尺寸完全一致的隐藏 Canvas（用户看不见它）。主屏幕负责渲染展现给用户看的漂亮图形，而这个“影分身”只专门用来做苦力——命中测试。

2. 分配身份色（Color Hash）

当我们要往主屏幕画一个崭新的图形（比如一个带有高斯模糊阴影的蓝色虚线圈）时，引擎会在内存里给这个图形分配一个全局唯一、随机生成的 RGB 颜色值（比如 #000001）。然后在内存的隐藏 Canvas 的同样坐标处，用这个唯一颜色 #000001 画一个同样轮廓的圆。无论主画布上的圆有多花哨，隐藏画布上的圆统统画成没有阴影、没有抗锯齿的纯色实心/实线。

与此同时，维护一个字典（Hash Map），记录：#000001 映射到蓝色虚线图对象引用。

3. O(1) 的降维打击：只读一个像素

见证奇迹的时刻到了。当前的场景是：主画布上画了成千上万个复杂的图形。隐藏画布上也用同样的布局画了成千上万个纯粹色块。

当用户在主屏幕上点击 (x: 500, y: 400) 时，引擎不去做任何数学几何碰撞计算，除了获取坐标外只做极其底层的一步：

走到隐藏 Canvas 面前。
精确地读取它 (500, 400) 这个坐标点上的 1 个像素的 RGB 颜色值（getImageData）。
如果读出来的颜色是黑色（完全透明），说明没点中任何东西。
如果读出来的颜色是 #000001，引擎立刻去 Hash Map 里查表——破案了！对应的是那个蓝色的虚线圈对象。

为什么这个方案是统治级的？

彻底无视几何形状的难度。不管你画的是自由手绘还是残缺的文字轮廓，只要它被渲染引擎画在屏幕上，那对应的颜色像素就实打实地落在了隐藏画布上。它巧妙地利用底层的 GPU 渲染规则来替你完成极度复杂的轮廓光栅化判定。
天然解决重叠遮挡。主画布怎么叠加层级的，隐藏画布也是按同样顺序绘制的。你在隐藏画布上读出来的那个带颜色像素，必然是最顶层、没被别人遮挡的那个对象的颜色。完全不需要自己遍历判断层级。
极端的性能空间换时间。把原本复杂的 $O(N \times 几何顶点数)$ 的每帧遍历计算，直接降维成了读取内存图像一个单像素点的 $O(1)$ 常数级查表时间。即使屏幕上有十万个对象，鼠标在上面疯狂移动也是绝对丝滑的。

站在巨人的肩膀：这就是 Konva

要在原生 Canvas 上实现一个可用于生产环境的稳健命中测试系统基建，工作量是极其庞大的。你要自己去维护那个巨大的离屏画布上下文同步、自己分配十六进制颜色、自己实现局部重绘优化、还要自己派发所有的模拟 DOM 冒泡事件。

这正是我们放弃从零手写引擎底层，转而选型采用 Konva 的终极原因。

Konva 在底层极其克制且优雅地封装了这套“离屏颜色拾取算法”。在开发者眼里，你完全感受不到那个诡异的“彩色隐藏画布”的存在。

它直接把这套脏活累活，包装成了我们最熟悉的、一如在写原生 DOM 一样的前端语法范式。这就让我们能够完全剥离繁复的数学几何泥潭，将精力投入在画布“事件分发与交互流控制”上：

// 这种久违的、确定的秩序感，对于开发无穷交互的白板来说是极其珍贵的。
import Konva from "konva";

const rect = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 50,
  fill: "blue",
  draggable: true, // 开启拖拽！底层所有复杂的变换全自动运算并重绘画布。
});

// 你仿佛重新拥有了原生的 DOM 事件绑定系统
rect.on("mouseenter", () => {
  document.body.style.cursor = "pointer";
  rect.fill("red"); // 悬浮触发变色响应
});

rect.on("mouseleave", () => {
  document.body.style.cursor = "default";
  rect.fill("blue");
});

// 即使有成百上千个图形交叠，它也能极速计算，精准捕捉顶层响应
rect.on("click", (e) => {
  console.log("极速且精准地点中了我：", e.target);
});

有了 Konva 兜底解决“感知盲区”，我们终于补齐了跨越无限画布最重要、也是最难缠的一块技术栈拼图。

我们不再是在冷冰冰的像素点数组上作画，而是真正在操控和编排一个个有边界、能响应手势、知晓自身存在的“实体对象”。

经历三篇的文章，我们已经打通了从“坐标系”、“底层渲染引擎选型博弈”到“重建事件分发秩序”的全部技术基建。

接下来，我们将长驱直入应用数据的深水区：在这块充满感知能力的画布上，我们该如何用正确的数据结构来对这些可被协同、可被导出、可被反序列化的对象进行定义？