Draw a line to route around shapes in an HTML canvas

Question

I use KineticJS to create an organization chart; one of the basic requirements is the ability to have lines that are intelligent enough to not overlap the shapes that they connect. I have an algorithm for detecting the shortest path between two forms, but I still stick to how to route them around any shapes in the path.

The best solution I have come up with so far is to use getIntersection () at every single point of the line to make sure that the point does not contain more than just the line; but after that (which in itself seems more than wasteful), I'm still not sure what the best way is then to lay around the obstacle.

I am open to switching libraries, if there is one more that can easily accomplish this task or even return to a pure JS Vanilla implementation if necessary.

Answer 1

To work with your current solution, you need to create vertical and horizontal “gutters” between each shape that you can use when drawing your connectors.

Think of these gutters as the cable that you pass through your connecting wires.

There are likely to be multiple and overlapping connectors in your gutters.

You can encode connectors to conveniently identify your users.

As an alternative:

This canvas diagram library was created by StackOverflow frequent contributor Simon Sarris:

http://www.nwoods.com/company/aboutus.htm

As an alternative:

JSPlumb is a javascript based diaming library.

http://jsplumbtoolkit.com/jquery/demo.html