Создайте участок дороги, используя javascript

Question

В моем приложении React я хочу создать не обычный form для создания участка дороги.

Например, у меня есть эта схема в формате png.

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

Я постараюсь смоделировать ситуацию

Пользователь хочет создать новый участок дороги. Дорога имеет шесть полос. (изображение выше)

1. Пользователь должен иметь возможность нарисовать эту диаграмму сам (все линии, круги, изображения и т. д. c.)

2. Сохранить эти данные на сервере

Затем пользователь хочет получить данные об одной специальной полосе. (эта функциональность взята из другого компонента)

Итак, пользователь открывает новый компонент, где он может получить статистику c по некоторым дорожкам, которые он выберет

1. Получить сохраненную схему с сервера

2. Отобразить эту схему и установить флажок для каждой полосы

После выбора полосы пользователь отправляет информация к серверу, на какой линии он хочет получить сводку (статистику)

Я нахожу Konva framework https://konvajs.org/ или p5. js (https://p5js.org/), но мне кажется, что этот подход очень громоздкий

Что я могу использовать для создания чего-то подобного?

Answer 1

Существует множество каркасов, которые могут выполнять эту работу.

• https://konvajs.org/
• http://fabricjs.com/
• https://www.createjs.com/easeljs
• https://two.js.org/
• и многие другие

Или вы можете просто нарисовать непосредственно в DOM с SVG.