HTML/JS Canvas在對象之間繪製線條

Question

我需要我的項目幫助。我在HTML5，JS和CSS3中製作ERD圖表生成器。我只想念我的項目中的一個功能，即鏈接兩個對象（矩形）。我試圖使這個功能，但它只能直接工作，但我想90度角線。

爲了更好exaplain，這裏是我現在有：http://i.stack.imgur.com/fpfKb.png
而這正是我想要的：http://i.stack.imgur.com/eCNKX.png

因此，這裏是什麼樣的功能，並希望我無法弄清楚： 此功能必須採取2個對象。對象具有位置X和Y，寬度和高度。並且函數計算出最佳邊來連接這兩個對象和90度角在這個objetcs中。

因此，例如，它返回：
（起點）點1：123566
（點這裏換行）POINT2：223766
（點這裏換行）點3：153266
（終點）Point4：33,234

任何想法？我只想要算法的建議。多謝你們 ：）。

Answer 1

1. 找出哪些對象具有較小left和較小top值（如果這是你如何定位它們）
2. 圖出兩個對象的高度和寬度。
3. 圖出的起點和終點：
   • 起始點的X是在左對象的left + width
   • 開始Y的點是在左對象的top + height/2
   • 終點的X是在正確的對象的left終點的
   • Y是在正確的對象的top + height/2
4. 「點，其中線纏繞」是在開始點的Y及X是X之間結束點的起點和X點。線換行的第二個點在終點的Y處，並且具有相同的X.
5. 以與之前連接對象相同的方式連接3個點。

對不起，沒有帖子代碼。如果你發佈你的例子的代碼，我可以添加它來回答。