CODEWITHSUNDEEP
javascriptcsshtmlcanvas
Martin K.
Martin K.

Reputation: 131

HTML/JS Canvas draw line between objects

I need help with my project. I making ERD Diagram generator in HTML5, JS and CSS3. I miss only one function in my project, that is linking two objects(rectangles). I tried to make this function, but it only works straightforwardly but i want lines with 90 degrees angle.

For better exaplain, here is what i have now: https://i.sstatic.net/fpfKb.png
And this is what i want: https://i.sstatic.net/eCNKX.png

So here is function what want and i cant figure out: This function must take 2 objects. Objects have Position X and Y, width and height. And function calculate best sides to link these two objects and 90 degrees angle in this objetcs.

So for example, it return:
(Start Point)Point1: 123,566
(Point where line wrap) Point2: 223,766
(Point where line wrap) Point3: 153,266
(End Point)Point4: 33,234

Any ideas? I only want suggestion of algorithm. Thanks guys :).

Upvotes: 2

Views: 1843

Answers (1)

Daew
Daew

Reputation: 419

  1. Figure out which object has smaller left and which smaller top value (if this is how you position them)
  2. Figure out height and width of both objects.
  3. Figure out start and end points:
    • X of start point is at left + width of left object
    • Y of start point is at top + height/2 of left object
    • X of end point is at left of right object
    • Y of end point is at top + height/2 of right object
  4. "Point where line wraps" is at Y of start point and at X that is between X of start and X of end point. The second point where line wraps is at Y of end point and has same X.
  5. Connect the 3 points the same way you connected objects before.

Sorry for not posting code. If you post code of your example I can add it to answer.

Upvotes: 5

Related Questions