Excalidraw实现纯鼠标滚轮缩放功能的技术解析

问题背景

在Excalidraw绘图工具中，默认情况下用户需要通过按住Ctrl键同时滚动鼠标滚轮才能实现画布的缩放操作。这种操作方式虽然能避免与普通滚动的冲突，但对于习惯Google Maps等地图服务操作方式的用户来说，直接使用鼠标滚轮缩放会更加自然便捷。

技术实现方案

初始尝试方案

开发者最初尝试通过以下两种方式实现纯滚轮缩放：

1. 全局事件监听方案：

useEffect(() => {
    const handleWheel = (event) => {
      if (!ctrlSimulate) return;
      event.preventDefault();
      event.stopPropagation();
      const wheelEvent = new WheelEvent("wheel", {
        ...event,
        deltaY:event.deltaY,
        ctrlKey: true
      });
      console.log(event.target)
      event.target.dispatchEvent(wheelEvent);
    };
    if (ctrlSimulate) {
      window.addEventListener("wheel", handleWheel);
    } else {
      window.removeEventListener("wheel", handleWheel);
    }
    return () => {
      window.removeEventListener("wheel", handleWheel);
    };
  }, [ctrlSimulate]);

2. 元素级事件处理方案：

useEffect(() => {
    const handleWheel = (event) => {
      if (!ctrlSimulate) return;
      event.preventDefault();
      event.stopPropagation();
      const wheelEvent = new WheelEvent("wheel", {
        ...event,
        deltaY:event.deltaY,
        ctrlKey: true
      });
      console.log(event.target)
      event.target.dispatchEvent(wheelEvent);
    };
    const el = document.querySelector("div")
    el.onwheel=handleWheel;
  }, [ctrlSimulate]);

这两种方案虽然都能触发缩放功能，但存在一个关键问题：缩放不是以鼠标指针为中心进行的，这导致了不佳的用户体验。

问题根源分析

经过调试发现，尽管代码中调用了event.preventDefault()，但默认的滚轮事件仍然会执行。这是因为事件监听器的执行顺序问题，浏览器会先执行默认行为，然后再执行自定义的事件处理程序。

最终解决方案

通过添加capture: true参数，将事件监听器设置为捕获阶段执行，确保在默认行为发生前拦截并处理滚轮事件：

window.addEventListener("wheel", handleWheel, { capture: true });

这个修改确保了：

1. 事件在捕获阶段就被处理
2. 能够有效阻止默认行为
3. 模拟的Ctrl+滚轮事件能够正确触发以鼠标为中心的缩放

技术要点解析

1. 事件传播机制：DOM事件分为捕获阶段、目标阶段和冒泡阶段，通过设置capture: true可以在捕获阶段拦截事件。

2. 事件合成：使用new WheelEvent()构造函数创建合成事件，可以精确控制事件的各个参数，包括模拟Ctrl键按下状态。

3. React Hooks使用：通过useEffect管理事件监听器的生命周期，确保组件卸载时正确清理资源。

4. 事件冒泡控制：event.stopPropagation()防止事件继续传播，避免重复处理。

最佳实践建议

1. 对于需要拦截默认行为的事件处理，优先考虑使用捕获阶段

2. 在React组件中处理原生DOM事件时，务必注意清理工作

3. 合成事件时确保包含所有必要属性，特别是位置信息

4. 对于复杂的交互场景，可以考虑使用专门的库如hammer.js或interact.js

这种实现方式不仅适用于Excalidraw，也可以应用于其他需要自定义滚轮行为的Web应用场景，如图表库、地图应用等。