HTML5 canvas manual route drawing solution with Konva

This is from a StackOverflow answer I made in response to a request for a way to show a route on a map with bends. In essence this is manipulation of the points array for a Konva Line object.

The user selects a point via a mouse click and that point goes into the points array. Additionally, to give the ability to add bends or refine the line, the point between the new point and its predecessor is also added to the array. This intermediate point can then be dragged, and when it is we split the lines to the previous and next points in two again.

Sounds complicated but the UX is pretty clear.

In this example the solution is used for drawing a route on a map, but it could just as easily be used to construct a path to be used as a clipping area on an image.

Thanks for reading.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: