HTML/JS Canvas 在对象之间画线

Question

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

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

所以在这里是函数想要什么，我无法弄清楚：这个函数必须接受 2 个对象。对象具有位置 X 和 Y、宽度和高度。并且函数计算连接这两个对象的最佳边和此对象中的 90 度角。

例如，它返回：
(Start Point)Point1: 123,566 (Point where line wrap) Point3: 153,266
(Point where line wrap) Point2: 223,766

(End Point)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 个点。

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