Typescript HTML画布：绘制的项目保持缩放或平移

我没有发现任何错误，但当我按下鼠标并移动鼠标时，画布上的项目会朝着正确的方向移动，但不会停止，它只是在画布的右侧滑动，当我用鼠标滚轮放大或缩小时，它会缩放，但不会停止

当我停止移动鼠标滚轮时，我希望画布上的项目停止缩放，当我拖动鼠标后向上移动时，我也希望项目停止平移

密码箱：

加载画布的react组件是

import React, { useEffect, useRef } from 'react';
import { Grid } from './grid';

const App: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);


  const setGrid = () => {
    const grid = new Grid({w: 800, h: 800});
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        let now = 0;
        const tickLoop = (epoch: number) => {
          const tick = epoch - now;
          now = epoch;
          ctx.clearRect(0, 0, 800, 800);
          grid.update(tick);
          grid.draw(ctx);
          requestAnimationFrame(tickLoop);
        };
        requestAnimationFrame(tickLoop);
      }
    }
  };

  useEffect(() => {
    setGrid();
  });

  return (
    <React.Fragment>
      <canvas
        ref={canvasRef}
        width={800}
        height={800}
      ></canvas>

    </React.Fragment>
  );
};

export { App };

和输入处理程序

import { InputHandlerInterface } from './grid';

class InputHandler {
  mouseDown: boolean;
  constructor(grid: InputHandlerInterface) {
    this.mouseDown = false;

    window.addEventListener(
      'wheel',
      (event: WheelEvent) => {
        grid.setZoom(event);
      },
      false
    );
    window.addEventListener(
      'mousedown',
      (event) => {
        this.mouseDown = true;
        grid.setMouseDown(event, true);
      },
      false
    );
    window.addEventListener(
      'mouseup',
      (event) => {
        this.mouseDown = false;
        grid.setMouseDown(event, false);
      },
      false
    );
    window.addEventListener(
      'mousemove',
      (event) => {
        grid.setPan(event, this.mouseDown);
      },
      false
    );
  }
}

export { InputHandler };

import { InputHandlerInterface } from './grid';

class InputHandler {
  mouseDown: boolean;
  constructor(grid: InputHandlerInterface) {
    this.mouseDown = false;

    window.addEventListener(
      'wheel',
      (event: WheelEvent) => {
        grid.setZoom(event);
      },
      false
    );
    window.addEventListener(
      'mousedown',
      (event) => {
        this.mouseDown = true;
        grid.setMouseDown(event, true);
      },
      false
    );
    window.addEventListener(
      'mouseup',
      (event) => {
        this.mouseDown = false;
        grid.setMouseDown(event, false);
      },
      false
    );
    window.addEventListener(
      'mousemove',
      (event) => {
        grid.setPan(event, this.mouseDown);
      },
      false
    );
  }
}

export { InputHandler };