交互式图像 - 反应

Posted

技术标签:

【中文标题】交互式图像 - 反应【英文标题】:Interactive image - React 【发布时间】:2021-08-25 08:38:33 【问题描述】:

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

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

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

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

我真的不知道该怎么做。我在 SVG 上找到了一些曲目,但我不知道如何将 SVG 与 React 以及大学可以点击 4 次(对于点 A、B、C、D)以及此后该区域变成可点击的 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>

【讨论】:

以上是关于交互式图像 - 反应的主要内容,如果未能解决你的问题,请参考以下文章

误解反应。 FC与类组件交互

E4A 与JS交互事件无反应

无法创建反应本机应用程序。需要输入,但 expo 处于非交互模式

交互式弯曲图像

如何使用轨迹栏进行交互式图像二值化?

OpenCV中的图像处理 —— 霍夫线 / 圈变换 + 图像分割(分水岭算法) + 交互式前景提取(GrabCut算法)