HTML / JS Canvas在对象之间绘制线条

Question

我的项目需要帮助。我在HTML5，JS和CSS3中制作了ERD Diagram生成器。我只想念项目中的一个函数，即连接两个对象（矩形）。我试图使这个功能，但它只能直接工作，但我想要90度角的线。

为了更好的exaplain，这就是我现在所拥有的：http://i.stack.imgur.com/fpfKb.png
这就是我想要的：http://i.stack.imgur.com/eCNKX.png

所以这里是功能想要什么，我无法弄清楚： 此功能必须占用2个对象。对象具有位置X和Y，宽度和高度。并且函数计算最佳边连接这两个对象和90度角。
例如，它返回：
（起点）Point1：123,566
（换行点）Point2：223,766
（换行点）Point3 ：153,266
（终点）Point4：33,234

有任何想法吗？我只想要算法的建议。谢谢你们:)。

Answer 1

1. 找出哪个对象的left较小，top值较小（如果这是你的位置）
2. 计算两个物体的高度和宽度。
3. 找出起点和终点：
   • 起点X位于左侧对象的left + width
   • 起点的Y位于左对象的top + height/2
   • 终点X位于右侧对象的left
   • 终点的Y位于右对象的top + height/2
4. ＆＃34;在线包裹的地方＆＃34;在起点的Y和起点的X和终点的X之间的X处。换行的第二个点是终点的Y并且具有相同的X.
5. 以与之前连接对象相同的方式连接3个点。

很抱歉没有发布代码。如果您发布示例的代码，我可以将其添加到答案中。