Javascript 检测用户在React中是否单击了图像的正确指定区域

我正在开发一个测验工具，其中一个问题是图像类型的

假设你正在为你的学生创建测试，你上传了一个汽车的图像。然后标记两个车门，您的问题是-

单击下面的车门之一

。 在回答这个问题时，学生将看到没有任何标记/注释的相同图像。 如果学生点击门，他/她就明白了重点，而不是别的。注意：车门是随机形状，可以是多边形，最好使用画笔工具绘制，类似于

以下是我的一些想法，但是否有更好的方法或图书馆适合这一点

用户界面是内置的，数据格式可以是任何东西，只要它工作

可以在图像上绘制和捕获多边形的库，如或。 然后我可以运行“点位于多边形内”算法，如。但这听起来也太过分了。（我不确定它们是否能清晰地区分多个多边形）

完成选项1的两项任务的库

还有更好的吗

很抱歉，如果以前有人问过这个问题，我的问题更注重反应，我找不到答案

我最终使用了。 该库不仅允许您在图像上绘制，还提供具有良好UI的组件。左侧的栏允许用户在绘图点、多边形和绑定框之间进行选择。还有一些工具可以平移、拖动和缩放。右侧的面板记录绘制的区域和历史。还有一个全屏模式，也支持注释视频

可以使用

Annotator

或

ReactImageAnnotate

组件呈现完整的UI：

import Annotator from "react-image-annotate"
    const App = () => (
      <Annotator
        selectedImage="https://example.com/image1.png"
        enabledTools={["create-point", "create-polygon"]}
        images={[{ src: "https://example.com/image1.png", name: "Image 1" }]}
        regionClsList={["Man Face", "Woman Face"]}
        onExit={(props)=> {console.log(props)}}
      />
    )

当从UI中单击Save按钮时，会调用

onExit

方法，在UI中可以获取图像上的所有注释

import ImageCanvas from "react-image-annotate/ImageCanvas"
<ImageCanvas imageSrc="https://example.com/image1.png" regions: regions/>