如何获取REST API加载后绘制在Canvas上的任意图片的点击事件

核心逻辑基于两个关键点：Canvas坐标转换 + 矩形碰撞检测，因为Canvas本身是无状态的位图画布，绘制完成后不会保留绘制元素的对象信息，所有元素数据需要你自行维护。 #

前置准备 #

• 保留你从REST接口获取到的所有图片元数据，存为一个可访问的数组，每个元素至少包含id（唯一标识）、x（绘制横坐标）、y（绘制纵坐标）、width（绘制宽度）、height（绘制高度）字段，不要绘制完就丢弃该数据。

具体实现步骤 #

1. 给Canvas绑定点击事件，转换点击坐标
   点击事件拿到的默认坐标是相对于浏览器视口的，需要先转换为相对于Canvas画布本身的坐标，示例代码：

const canvas = document.querySelector('your-canvas-selector')
canvas.addEventListener('click', (e) => {
  // 计算Canvas元素相对于视口的偏移
  const rect = canvas.getBoundingClientRect()
  // 得到Canvas内部的点击坐标
  const clickX = e.clientX - rect.left
  const clickY = e.clientY - rect.top
  // 调用碰撞检测方法
  const targetImg = checkHit(clickX, clickY)
  if (targetImg) {
    // 拿到ID调用后续接口即可
    console.log('点击的图片ID：', targetImg.id)
  }
})

2. 实现碰撞检测逻辑
   遍历你保存的图片元数据数组，判断点击坐标是否落在某张图片的矩形范围内即可：

function checkHit(clickX, clickY) {
  // 如果有图片重叠，倒序遍历可以优先匹配到最上层（后绘制）的图片
  for (let i = imgMetaList.length - 1; i >= 0; i--) {
    const img = imgMetaList[i]
    const isHit = clickX >= img.x 
                && clickX <= img.x + img.width 
                && clickY >= img.y 
                && clickY <= img.y + img.height
    if (isHit) return img
  }
  return null
}

适配提示 #

如果你的Canvas做了缩放（比如用scale()方法绘制、或者CSS缩放了Canvas元素），转换坐标的时候需要把缩放比例也计算进去，只要把clickX、clickY除以对应的缩放系数即可。

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