Search code examples
javascripthtmlcanvasreact-konvakonva

Create road section using javascript

In my React application I want to create not the usual form for creating road section.

For example, I have this scheme in png format.

enter image description here

But I want to create an interactive editor in which it will be possible to create schemes, save them to the server and then reuse.

I will try to simulate a situation

User want to create a new road section. Road has six lanes. (image above)

  1. It should be possible for the user to draw this diagram himself (all lines, circles, images etc.)

  2. Save this data to server

Then user want to recive data about one special lane. (this functionality taken out in another component)

So, user open new component, where he can get statistic by some lane(s) which he will choose

  1. Get saved scheme from the server

  2. Render this scheme and integrate checkbox for each lane

After a lane has been selected, user sends information to the server, on which lane it wants to receive a summary (statistics)

I find Konva framework https://konvajs.org/ or p5.js (https://p5js.org/), but it seems to me that this approach is very cumbersome

What can i use for build something like that?

Solution

  • There are many canvas frameworks that can do that job.

    Or you can just draw directly into DOM with SVG.