交互式图像 - 反应答案

【问题标题】：Interactive image - React交互式图像 - 反应
【发布时间】：2023-03-10 15:30:01
【问题描述】：

我的用户应该能够将他们的大学地图上传到我的应用程序。

之后，他去应用程序中的在线编辑器选择一张与他们下载的大学地图相匹配的图像。

一旦激活编辑模式，他们可以点击 4 次以应用地图上的点 A、B、C、D。

这些点表示一个区域。该区域将在数据库中显示，当最终用户使用该应用程序时，他们将可以访问该区域为可点击的大学地图。通过单击它，他们将可以访问更多信息。

我真的不知道该怎么做。我在 SVG 上找到了一些曲目，但我不知道如何将 SVG 与 React 以及大学可以点击 4 次（对于点 A、B、C、D）以及此后该区域变成可点击的 SVG 的事实联系起来.

请问您有什么想法可以探索吗？

【问题讨论】：

标签： css node.js reactjs image svg

【解决方案1】：

我不确定我是否正确理解了您的问题。

如果你想要哪张图片有4个可点击区域并带有不同的onClick事件，你可以将此图片设置为ImageContainer的背景，为此容器设置位置：相对，并添加位置为：绝对和onClick事件的子级

对于您需要的每张图片都有此数据

    const image = {
      url: 'url',
      height: '1200px',
      width: '700px',
      clicableAreas: [
        {
          positionLeft: 50px,
          positionTop: 30px,
          width: 20px,
          height: 60px,
          onClick: () => doLogicAttachedToThisArea(),
        }
      ]
    }

这种结构允许添加带有矩形可点击区域的图像

function ImageContainer(image) {
  return <div style={{ 
    backgroundImage: image.url,
    width: image.width,
    height: image.height,
    position: 'relative',
}}>
      {image.clicableAreas.map(e => <div 
         onClick={data.onClick} 
         style={{
           left: e.positionLeft,
           top: e.positionTop,
           width: e.width,
           height: e.height,
         }}
       /> )}
  </div>
}

【讨论】：