Обнаружение того, щелкнул ли пользователь на правильно обозначенной области изображения в React

Question

Я работаю над инструментом для викторин, где один из вопросов относится к типу изображения.

Представьте, что вы создаете тест для своих учеников и загружаете изображение автомобиля. Затем вы отмечаете две двери автомобиля, и ваш вопрос - Click on one of the doors of the car below. Когда ученик ответит на этот вопрос, он увидит то же изображение без каких-либо пометок / аннотаций. Если ученик нажимает на дверь, он / она получает точку, а не иначе. Примечание. Автомобильные двери имеют произвольную форму и могут быть многоугольниками, и их предпочтительно можно нарисовать с помощью инструмента bru sh.

Вот некоторые мои мысли, но есть ли лучший способ или библиотека, которая подходит для этого?:

Пользовательский интерфейс встроен в React, формат данных может быть любым, пока он работает. ,

1. Библиотека, которая может рисовать и захватывать полигоны на изображении, например , или , . Затем я могу запустить алгоритм «точка лежит внутри многоугольника», например this . Но это также звучит как излишество. (И я не уверен, что они четко различают guish между несколькими полигонами).

2. Библиотека, которая выполняет обе задачи варианта 1.

3. Что-нибудь еще лучше?

Извините, если это было задано ранее, но мой вопрос более сфокусирован на React, и я не смог найти ответ.

Answer 1

Я использовал реагировать-изображения-аннотации . Библиотека не только позволяет рисовать на изображении, но и представляет компоненты с приятным пользовательским интерфейсом. Панель слева позволяет пользователям выбирать между точками рисования, полигонами и прямоугольниками связывания. Есть также инструменты для панорамирования, перетаскивания и масштабирования. Панели справа отслеживают нарисованные регионы и историю. Существует также полноэкранный режим, а также поддерживает аннотирование видео!

Полный пользовательский интерфейс может быть обработан с использованием компонента Annotator или ReactImageAnnotate:

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)}}
      />
    )

Вы также можете отображать ранее нарисованные области / аннотации без любые инструменты с ImageCanvas:

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

onExit вызывается при нажатии кнопки Сохранить в пользовательском интерфейсе, где вы можете получить все аннотации на изображении.