HTML5 Canvas多对象拖拽异常及对象内事件绑定需求

我来帮你搞定这两个Canvas拖拽的棘手问题！先拆解一下问题根源：

问题1：拖拽rect2后rect1失去交互 #

你现在的代码里，每个Rectangle实例都直接给canvas.canvas.onmousemove这类事件属性赋值——后面创建的rect2会直接覆盖rect1绑定的事件，导致只有最后一个创建的矩形能响应鼠标操作，前面的完全“失联”。

问题2：拖拽时擦除其他矩形 #

eraseRectangle用clearRect直接清除画布上的一块区域，这会把该区域内所有的形状都擦掉，不管是不是当前拖拽的矩形。

下面是修改后的完整解决方案，所有逻辑都在对象内部完成，不需要额外工厂类：

第一步：修改Rectangle类，修复事件与重绘逻辑 #

class Rectangle extends Shape {
  constructor(options, canvas, type = 'rectangle') {
    super(...); // 继承自父类
    this._options = options;
    this._canvas = canvas;
    this._context = canvas.context2D;
    this._type = type;
    this._hovered = false;
    this._dragged = false;
    // 存储拖拽时的鼠标偏移（避免鼠标跳到矩形左上角）
    this._dragOffsetX = 0;
    this._dragOffsetY = 0;

    // 用addEventListener绑定事件，避免覆盖
    this._canvas.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
    this._canvas.canvas.addEventListener('mousedown', (e) => this.onMouseDrag(e));
    this._canvas.canvas.addEventListener('mouseup', (e) => this.onMouseRelease(e));
    
    // 将当前矩形注册到Canvas的形状列表，用于全局重绘
    this._canvas.shapes.push(this);
    this.init();
  }

  static draw(options, canvas) {
    return new Rectangle(options, canvas);
  }

  init() {
    this._canvas.redraw(); // 初始化时触发全局重绘
  }

  // 统一处理鼠标移动事件：区分悬停和拖拽状态
  handleMouseMove(e) {
    if (this._dragged) {
      this.onMouseMoveDrag(e);
    } else {
      this.onMouseHover(e);
    }
  }

  onMouseHover(e) {
    const isHovered = this.isPointInShape(e.clientX, e.clientY);
    if (isHovered !== this._hovered) {
      this._hovered = isHovered;
      this._canvas.redraw(); // 重绘更新样式
      this._canvas.canvas.style.cursor = isHovered ? 'pointer' : 'default';
    }
  }

  onMouseDrag(e) {
    if (this.isPointInShape(e.clientX, e.clientY) && !this._dragged) {
      // 记录鼠标与矩形左上角的偏移量
      this._dragOffsetX = e.clientX - this.x;
      this._dragOffsetY = e.clientY - this.y;
      this._dragged = true;
      console.log('dragging');
    }
  }

  onMouseMoveDrag(e) {
    if (this._dragged) {
      // 根据偏移量更新矩形位置
      this.x = e.clientX - this._dragOffsetX;
      this.y = e.clientY - this._dragOffsetY;
      this._canvas.redraw(); // 拖拽时实时重绘
    }
  }

  onMouseRelease(e) {
    if (this._dragged) {
      this._dragged = false;
      console.log('release');
    }
  }

  // 封装点是否在矩形内的判断逻辑
  isPointInShape(x, y) {
    return x >= this.x && x <= this.x + this.width &&
           y >= this.y && y <= this.y + this.height;
  }

  // 统一绘制方法，根据状态切换样式
  draw() {
    const fillStyle = this._hovered ? this._options.border : this._options.background;
    const strokeStyle = this._hovered ? this._options.background : this._options.border;
    
    this._context.beginPath();
    this._context.fillStyle = fillStyle;
    this._context.strokeStyle = strokeStyle;
    this._context.rect(this.x, this.y, this.width, this.height);
    this._context.fill();
    this._context.stroke();
  }
}

第二步：扩展HTMLCanvas类，支持全局重绘 #

让Canvas对象管理所有创建的形状，并提供全局重绘方法：

class HTMLCanvas {
  static build(containerId, options) {
    const canvas = document.createElement('canvas');
    canvas.width = options.width;
    canvas.height = options.height;
    canvas.style.background = options.background;
    document.getElementById(containerId).appendChild(canvas);
    return new HTMLCanvas(canvas, options);
  }

  constructor(canvas, options) {
    this.canvas = canvas;
    this.context2D = canvas.getContext('2d');
    this.options = options;
    this.shapes = []; // 存储所有需要绘制的形状
  }

  // 全局重绘：清除画布后重新绘制所有形状
  redraw() {
    this.context2D.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.shapes.forEach(shape => shape.draw());
  }
}

第三步：保持Main类代码不变 #

你的主类代码不需要修改，正常创建矩形即可：

class Main {
  static ready() {
    // 基础Canvas配置
    const options = {
      width: window.innerWidth,
      height: window.innerHeight,
      background: 'black'
    }
    // 创建Canvas对象
    const canvas = HTMLCanvas.build('workspace', options);
    const rect1 = Rectangle.draw({
      width: 200, height: 100, x: 100, y: 200,
      border: 'blue', background: 'white', label: 'rect1'
    }, canvas);
    const rect2 = Rectangle.draw({
      width: 300, height: 75, x: 200, y: 400,
      border: 'green', background: 'white', label: 'rect2'
    }, canvas);
  }
}
// 初始化对象
Main.ready();

关键修改说明： #

1. 事件绑定方式：用addEventListener代替直接赋值onmousemove，这样所有矩形实例都能监听鼠标事件，不会互相覆盖。
2. 全局重绘机制：不再单独擦除单个矩形，而是每次更新时清除整个画布，重新绘制所有形状——彻底解决拖拽擦除其他矩形的问题。
3. 拖拽偏移处理：记录鼠标与矩形左上角的偏移量，避免拖拽时鼠标直接跳到矩形左上角，提升交互体验。
4. 状态驱动绘制：矩形的样式（悬停/正常）由状态控制，统一通过draw方法绘制，逻辑更清晰。

内容的提问来源于stack exchange，提问作者N. Y. Wirawan