Basic Javascript Drawing with User Editable Lines and Nodes

Viewed 246

My research has found me powerful libraries like paper.js which are quick to show all the next-level awesome stuff they can do, but I'm not sure how (or if) I can accomplish a basic task:

I want to present a simple Stick Figure to my user:

  o
 \|/
 / \

Then let them grab the ends of the lines ("hands and feet"), and drag them into different positions, leaving the connecting nodes ("shoulders and hips") intact.

Simple.

In short, what is the simplest way to draw something with lines and nodes that users can manipulate.

Requirements:

  • Some line lengths are fixed, others can be lengthened.
  • Some nodes are fixed, others can be moved.
  • I need to at least display the angles of the lines, but ideally can modify those angles (via text input).

I feel like this shouldn't be this hard, but as I said, most libraries skip the basics and go straight to their coolest features, while any search for "edit vector nodes" and the like brings up lots of irrelevant results about node.js...

1 Answers

Probably you must have found the solution, but since it is unanswered, I thought of posting about a fantastic library I know.

The library is konva.js. You can find demo application references on site itself. It features powerful set of functions to create custom shapes and layering support(In fact there is lot more). You can easily modify the properties of any shape, add animation and more.

You can find documentation here.

Related