I need help coming up with an algorithm that draws lines between rectangles. Why? I'm a UX Designer working on a plugin for the design tool I use. The plugin should be able to connect two mockup screens with arrows in an efficient way.

Here's the prompt I'm giving myself for this problem:

Imagine two standard (not-rotated) rectangles on an infinite plane. On each rectangle, a side has been chosen. You must come up with an algorithm to describe a series of connected lines (a vector network) that connects the midpoints of each selected rectangle sides (starting and ending nodes).

The segments cannot intersect the rectangles' sides, the segments (vector edges) must be perfectly vertical or horizontal (meaning all turns are right angles), and it must produce the minimal number of segments.

Here's an image to help: two rectangles connected by segments of lines that start and end at various points of the rectangles

I'm looking for something that will always describe the vertices (aka nodes) between the rectangles regardless of their position in the plane or the side chosen. For example, the output would look like: {3, 5} {10, 5} {10, 20} {32, 20}.

Does anyone have ideas or literature that might help me get started?

  • $\begingroup$ your drawing seems to be a detailed solution of the problem you have. Where is the difficulty? $\endgroup$
    – rtomas
    Jan 1 '21 at 0:49
  • $\begingroup$ Sorry, I should've been clearer. I'm looking for an algorithm that would describe the vector path between any two rectangles. Something like {3, 4} {11, 8} {20, 3}. $\endgroup$ Jan 1 '21 at 1:13

It seems this is partly described here: https://stackoverflow.com/questions/4647454/drawing-a-line-connecting-two-rectangles

easy to extend to other sides


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.