Какую веб-среду или библиотеку использовать для отображения изображений PNG и основных фигур на них на веб-странице с уникальным URL-адресом для каждого изображения? - PullRequest
0 голосов
/ 06 мая 2019

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

У меня есть набор изображений в формате PNG.Для каждого изображения есть набор форм (прямоугольники, полилинии - в виде пар координат x, y в пикселях) и аннотаций (расположение на изображении x, y в пикселях и короткий текст в виде строки), которые должны отображаться поверх него.Когда пользователь загружает уникальный URL-адрес для изображения, он должен видеть его с фигурами, отображаемыми поверх него, а маркеры аннотаций - в виде кружков.Когда пользователь нажимает кнопку с надписью «next», страница загружает следующий PNG с соответствующими формами и примечаниями.Пользователь может щелкнуть маркер аннотации, и должен открыться всплывающий текст, чтобы отобразить текст аннотации.

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

У меня есть опыт программирования - Python, datascience, процедурная геометрия, Unity дляразработка игр (C #), Lua - но не для сети.Я могу сделать приложение WebGL, используя Unity, чтобы делать то, что я хочу, и связать его с базой данных MySQL, но это похоже на стрельбу из мухи с базуки.Может быть, есть более простой способ.Любые советы или советы будут оценены.

1 Ответ

0 голосов
/ 06 мая 2019

Лучший совет, я думаю, в одном из тегов вашего вопроса: canvas.

На него можно нарисовать изображения, а также фигур .Чтобы обработать свои маркеры, вы можете сравнить координаты клика на холсте с координатами ваших маркеров (см. этот пост для получения дополнительной информации о получении координат клика).Всплывающие подсказки можно было бы скрыть или показать простым <div> при нажатии .

Что касается фреймворков веб-приложений, то в зависимости от того, насколько вы хотите, вы можете сделать это «вручную» в нативных HTML и CSS или использовать что-то с хорошими предопределенными компонентами, такими как Bootstrap .

В зависимости от того, где вы будете размещать эту веб-страницу, вам не придется беспокоиться о бэкенде / сервере.Существует множество хостинг-провайдеров, которые предоставляют удобные админ-панели.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...