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个点。

对不起，没有帖子代码。如果你发布你的例子的代码，我可以添加它来回答。