仅使用鼠标滚轮进行缩放

Question

我想允许像在谷歌地图上一样仅使用鼠标滚轮缩放画布（excalidraw API），而无需按 ctrl 键。

这是我尝试过的两件事：

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]);

或

  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]);

它正在缩放，但不完全在我的光标上，这非常令人沮丧，因为我认为它应该 任何帮助表示赞赏！

Answer 1

我很确定这是因为轮子的默认事件正在发生，即使我有一个preventDefault