如何实现Excalidraw画布仅鼠标滚轮缩放（无需Ctrl键）

你的代码能触发缩放，但光标位置不对的核心原因是模拟的WheelEvent没有正确传递光标坐标相关参数，Excalidraw的缩放逻辑依赖这些坐标计算缩放中心。另外，直接通过dispatchEvent模拟事件可能存在参数丢失情况，下面提供两种修正方案：

方案1：修正模拟WheelEvent的参数 #

确保新创建的WheelEvent完全继承原事件的光标坐标和关键属性，同时指定正确的画布元素派发事件：

useEffect(() => {
  const handleWheel = (event) => {
    if (!ctrlSimulate) return;
    event.preventDefault();
    event.stopPropagation();
    
    // 显式传递光标坐标及关键参数，避免解构丢失
    const wheelEvent = new WheelEvent("wheel", {
      ...event,
      ctrlKey: true,
      clientX: event.clientX,
      clientY: event.clientY,
      pageX: event.pageX,
      pageY: event.pageY,
      deltaMode: event.deltaMode
    });
    
    // 定位到Excalidraw画布元素，确保事件派发给正确目标
    const excalidrawCanvas = document.querySelector(".excalidraw__canvas");
    excalidrawCanvas?.dispatchEvent(wheelEvent);
  };

  if (ctrlSimulate) {
    window.addEventListener("wheel", handleWheel);
  } else {
    window.removeEventListener("wheel", handleWheel);
  }

  return () => window.removeEventListener("wheel", handleWheel);
}, [ctrlSimulate]);

方案2：直接调用Excalidraw官方缩放API（更可靠） #

如果能获取到Excalidraw实例，直接调用zoomToPoint方法可精准控制缩放中心：

import { useExcalidraw } from "@excalidraw/excalidraw";

// 在组件内获取Excalidraw实例
const excalidrawAPI = useExcalidraw();

useEffect(() => {
  const handleWheel = (event) => {
    if (!ctrlSimulate || !excalidrawAPI) return;
    event.preventDefault();
    event.stopPropagation();
    
    // 计算缩放比例：滚轮向上（deltaY负）放大，向下缩小
    const scaleFactor = event.deltaY < 0 ? 1.1 : 0.9;
    // 将屏幕光标坐标转换为画布内部坐标
    const canvasPoint = excalidrawAPI.screenToCanvas({ x: event.clientX, y: event.clientY });
    
    // 以光标位置为中心执行缩放
    excalidrawAPI.zoomToPoint(canvasPoint, scaleFactor);
  };

  if (ctrlSimulate) {
    window.addEventListener("wheel", handleWheel);
  } else {
    window.removeEventListener("wheel", handleWheel);
  }

  return () => window.removeEventListener("wheel", handleWheel);
}, [ctrlSimulate, excalidrawAPI]);

关键说明 #

• 方案1通过补全事件参数，让Excalidraw能读取到正确的光标位置作为缩放中心；
• 方案2使用官方API完全规避事件模拟的不确定性，是更推荐的实现方式；
• 注意监听目标要指向Excalidraw的画布元素，避免事件派发到无关节点。

内容的提问来源于stack exchange，提问作者Antonin Cuyala