HTML5 Canvas旋转、缩放、平移实现及变换后鼠标交互问题求解

问题根因 #

你当前的mouseIsOver碰撞检测逻辑仅支持未做旋转、缩放变换的轴对齐矩形，没有将全局鼠标坐标转换为经过缩放、旋转变换后的图形局部坐标，因此变换后碰撞边界与实际渲染图形不匹配，出现选中异常。

修复方案 #

直接复用你已实现的getMouseLocal坐标转换工具，修改Shape类的mouseIsOver方法即可：

mouseIsOver(mouseX, mouseY) {
  if (this.type === 'rectangle') {
    // 转换全局鼠标坐标为图形局部坐标
    const localMouse = getMouseLocal(
      mouseX,
      mouseY,
      this.x + this.width / 2, // 图形变换原点：中心X坐标
      this.y + this.height / 2, // 图形变换原点：中心Y坐标
      this.scale,
      this.scale,
      degreesToRadians(this.rotation)
    )
    // 局部坐标系下矩形范围是[-width/2, width/2]、[-height/2, height/2]
    return (
      localMouse.x >= -this.width / 2 &&
      localMouse.x <= this.width / 2 &&
      localMouse.y >= -this.height / 2 &&
      localMouse.y <= this.height / 2
    )
  }
}

额外优化点 #

• 你代码中重复定义了两次degreesToRadians函数，可删除重复定义避免冗余
• 目前canvasBounding仅在页面初始化时计算，若页面发生滚动、窗口大小调整时会出现坐标偏移，建议在鼠标事件触发时实时获取canvas.getBoundingClientRect()计算偏移量

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