Canvas内图片滚动时无法操作已绘制polygraph的问题如何解决

该问题完全可以通过代码方式解决，核心诱因是Canvas内容滚动后，原有鼠标碰撞校验逻辑未适配画布平移带来的坐标偏移。

问题根本原因 #

• 你对Canvas内容做滚动操作，本质上是对整个画布的绘制上下文执行了translate(x, y)平移变换，所有已绘制的多边形（polygraph）的实际渲染位置都叠加了这部分偏移值
• 你此前实现的鼠标位置是否在旋转矩形/多边形内部的校验逻辑，仅基于原始绘制坐标系计算，没有把滚动偏移量纳入坐标转换环节，就会出现鼠标点击的实际位置和多边形的计算位置不匹配的问题，自然就无法触发交互

具体实现步骤 #

1. 维护全局滚动偏移变量 #

在你的代码中新增两个变量存储画布的滚动偏移量，每次触发滚动操作、修改画布平移值时，同步更新这两个变量：

// 全局存储Canvas内容的滚动偏移量
let canvasScrollOffsetX = 0
let canvasScrollOffsetY = 0

// 示例：滚动操作触发时更新偏移值
function handleCanvasScroll(scrollDeltaX, scrollDeltaY) {
  canvasScrollOffsetX += scrollDeltaX
  canvasScrollOffsetY += scrollDeltaY
  // 原有画布重绘逻辑...
}

2. 校正鼠标坐标后再做碰撞校验 #

在获取到鼠标在Canvas元素上的坐标后，先减去滚动偏移量，得到相对于原始绘制坐标系的校正坐标，再代入原有碰撞校验逻辑即可：

function handleCanvasMouseInteraction(event) {
  const canvasBounding = canvas.getBoundingClientRect()
  // 鼠标相对于Canvas视口的原始坐标
  const rawMouseX = event.clientX - canvasBounding.left
  const rawMouseY = event.clientY - canvasBounding.top
  // 校正为内容坐标系下的实际坐标
  const adjustedMouseX = rawMouseX - canvasScrollOffsetX
  const adjustedMouseY = rawMouseY - canvasScrollOffsetY

  // 把校正后的坐标传入你原有的多边形碰撞判断函数即可
  const isHit = checkPointInPolygon(adjustedMouseX, adjustedMouseY, targetPolygonPoints)
  // 原有交互逻辑（选中、拖拽等）...
}

扩展说明 #

如果你的Canvas还叠加了缩放、旋转变换，只需要把上下文的变换矩阵做逆变换，将鼠标坐标通过逆矩阵转换为原始绘制坐标系下的坐标，再做碰撞判断即可，逻辑和上述平移校正完全一致。

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