如何在React中识别图片点击区域？求相关工具或实现方案

首先明确：Zone.js是Angular生态用于变更检测的工具，和图片点击区域识别需求不相关，React生态里没有这类定位的替代包，下面给你两种实用的解决思路：

一、原生JavaScript实现（无依赖） #

直接给图片绑定点击事件，通过计算点击坐标相对于图片的位置，判断点击落在哪个预设区域里：

// 定义对应机型的可点击区域数据
const a350Areas = [
  { id: 'cockpit', x1: 10, y1: 10, x2: 50, y2: 50 },
  { id: 'wing', x1: 60, y1: 30, x2: 120, y2: 80 }
];

const b777Areas = [
  { id: 'engine', x1: 20, y1: 40, x2: 70, y2: 90 }
];

const handleImageClick = (e, currentAreas) => {
  const img = e.target;
  // 获取图片在页面中的位置和尺寸
  const rect = img.getBoundingClientRect();
  // 计算点击位置相对于图片左上角的坐标
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  // 匹配点击的目标区域
  const clickedArea = currentAreas.find(area => 
    x >= area.x1 && x <= area.x2 && y >= area.y1 && y <= area.y2
  );
  
  if (clickedArea) {
    console.log(`点击了区域：${clickedArea.id}`);
    // 这里添加对应区域的业务逻辑
  }
};

// 改造你的原有渲染代码
{Boolean(galleyItems) && Object.values(galleyItems).includes('A350') ? 
  <img 
    src={A350}  
    alt='' 
    width="50%" 
    height="50%"
    onClick={(e) => handleImageClick(e, a350Areas)}
  /> : 
  <img 
    src={B777}   
    alt='' 
    width="50%" 
    height="50%"
    onClick={(e) => handleImageClick(e, b777Areas)}
  />
}

二、使用React专用库（react-image-mapper） #

如果需要更便捷的区域管理（比如支持可视化定义区域、响应式适配），可以用react-image-mapper这个库：

1. 先安装依赖：

npm install react-image-mapper

2. 改造你的渲染代码：

import ImageMapper from 'react-image-mapper';

// 定义对应机型的区域配置
const a350Map = {
  name: 'A350Map',
  areas: [
    { id: 'cockpit', shape: 'rect', coords: [10,10,50,50], alt: '驾驶舱' },
    { id: 'wing', shape: 'rect', coords: [60,30,120,80], alt: '机翼' }
  ]
};

const b777Map = {
  name: 'B777Map',
  areas: [
    { id: 'engine', shape: 'rect', coords: [20,40,70,90], alt: '发动机' }
  ]
};

const handleAreaClick = (area) => {
  console.log(`点击了区域：${area.id}`);
  // 添加区域点击后的业务逻辑
};

// 条件渲染改造
{Boolean(galleyItems) && Object.values(galleyItems).includes('A350') ? 
  <ImageMapper
    src={A350}
    alt=""
    width="50%"
    height="50%"
    map={a350Map}
    onClick={(area) => handleAreaClick(area)}
  /> :
  <ImageMapper
    src={B777}
    alt=""
    width="50%"
    height="50%"
    map={b777Map}
    onClick={(area) => handleAreaClick(area)}
  />
}

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