JavaScript基础：如何判断点击了Canvas中的哪个目标框？

嘿，作为JS新手遇到这个问题很正常，我来一步步教你怎么实现点击Canvas判断目标框的功能～

核心思路很简单：监听Canvas的点击事件，拿到点击的坐标，然后遍历你的labels数组，检查坐标是否落在某个目标框的范围内。下面是具体的实现步骤和代码：

1. 绑定Canvas点击事件 #

首先得获取页面上的Canvas元素，给它绑定click事件监听器，这样每次点击Canvas时都会触发我们的判断逻辑。

2. 计算点击的相对坐标 #

Canvas可能会有CSS缩放、margin或者定位，直接用事件的clientX/clientY会不准确。我们可以通过getBoundingClientRect()来计算点击点相对于Canvas自身的坐标，确保判断精准。

3. 遍历目标框数组，匹配点击位置 #

每个目标框都有xMin、xMax、yMin、yMax四个边界值，注意这些值是字符串类型，需要先转换成数字。然后判断点击坐标是否满足：

• 点击的x坐标 ≥ 目标框的xMin
• 点击的x坐标 ≤ 目标框的xMax
• 点击的y坐标 ≥ 目标框的yMin
• 点击的y坐标 ≤ 目标框的yMax

满足这四个条件，就说明点击到了该目标框。

完整代码示例 #

// 假设你的Canvas元素id是"myCanvas"
const canvas = document.getElementById('myCanvas');

// 你的labels数组，用你提供的示例数据
const labels = [
  {"id":"1","image":"1-0.png","name":"","xMax":"4802","xMin":"4770","yMax":"156","yMin":"141"},
  {"id":"2","image":"1-0.png","name":"","xMax":"4895","xMin":"4810","yMax":"157","yMin":"141"},
  // 其他目标框数据...
];

canvas.addEventListener('click', function(e) {
  // 获取Canvas在页面中的位置和尺寸信息
  const rect = canvas.getBoundingClientRect();
  // 计算点击点相对于Canvas左上角的坐标
  const clickX = e.clientX - rect.left;
  const clickY = e.clientY - rect.top;

  // 遍历所有目标框
  for (const label of labels) {
    // 将字符串坐标转为数字类型，避免字符串比较的坑
    const xMin = parseInt(label.xMin);
    const xMax = parseInt(label.xMax);
    const yMin = parseInt(label.yMin);
    const yMax = parseInt(label.yMax);

    // 判断点击坐标是否在当前目标框范围内
    if (clickX >= xMin && clickX <= xMax && clickY >= yMin && clickY <= yMax) {
      console.log(`点击到了目标框，ID是：${label.id}`);
      // 这里可以添加自定义操作，比如高亮目标框、显示详情等
      return; // 如果只需要匹配第一个目标框，找到后就跳出循环
    }
  }

  // 没有匹配到任何目标框时的提示
  console.log("没有点击到任何目标框");
});

新手必看注意点 #

• 坐标类型转换：一定要把labels里的字符串坐标转成数字！字符串比较是按字符编码来的，比如"100" > "99"会返回false，这会导致判断错误。
• Canvas坐标系：Canvas的原点在左上角，y轴向下，和你的目标框坐标体系一致，不用额外转换方向。
• 重叠目标框处理：如果有目标框重叠，上面的代码会返回第一个匹配的框。要是需要返回所有重叠的框，去掉return语句即可。

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