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度角。

因此，例如，它返回：
（起点）第一点：123,566
（换行点）Point2：223,766
（换行点）Point3：153,266
（终点）第四点：33,234

有任何想法吗？ 我只想要算法的建议。 多谢你们 ：）。

Answer 1

1. 找出哪个对象的left较小，哪个top值较小（如果这是left它们的方式）
2. 找出两个对象的高度和宽度。
3. 找出起点和终点：
   • 起点X在left + width左侧物体的left + width
   • 起点的Y在top + height/2左侧对象的top + height/2
   • 端点的X在右侧对象的left
   • 端点的Y在top + height/2右对象的top + height/2
4. “换行点”在起点的Y处以及在起点X和终点X之间的X处。 换行的第二点在端点的Y处，并且具有相同的X。
5. 连接3点的方式与之前连接对象的方式相同。

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