Konva – editing path points

I wondered how to edit the points on a path or line – here’s an answer.

Both the Konva Line and Path use a list of points to draw themselves. The Line takes a simple array of x & y values whilst the Path wants a data definition composed of SVG drawing commands. I chose to focus on the Path in this demo but the approach would work for both.

See the demo below.

At the core of the challenge is the need to add some kind of UI shape to each point then manipulate the points list accordingly. I chose to use a small rectangle for the point dragging anchors. Therefore we need a persistent list of points for each Path object drawn, and some way of knowing which point in the list any specific drag anchor relates to.

After that we need to note the new position of any anchor that is being dragged, update the corresponding point in the list, and redraw the Path.

As a quick aside, I used simplify.js, by Vladimir Agafonkin, to reduce the points in the original line drawing process, otherwise the points are going to be too close together and the UX will be bad.

That’s all folks !

Thanks for reading.

VW May 2022.