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

Question

我的元素需要帮助。我用 HTML5、JS 和 CSS3 制作 ERD 图生成器。我的元素中只错过了一个功能，即链接两个对象(矩形)。我试图实现这个功能，但它只能直接工作，但我想要 90 度 Angular 的线。

为了更好地解释，这是我现在拥有的:/image/fpfKb.png
这就是我想要的:/image/eCNKX.png

所以这是我想要的功能，但我无法弄清楚: 该函数必须采用 2 个对象。对象具有位置 X 和 Y、宽度和高度。函数计算连接这两个对象的最佳边以及该对象中的 90 度 Angular 。

因此，例如，它返回:
(起点)Point1:123,566
(换行点)Point2:223,766
(换行点)Point3 : 153,266
(终点)点4: 33,234

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

Answer 1

1. 找出哪个对象的 left 值较小，哪个 top 值较小(如果您是这样定位它们的)
2. 计算出两个对象的高度和宽度。
3. 找出起点和终点:
   • 起点的 X 位于左侧对象的 left + width
   • 起点的 Y 位于左侧对象的 top + height/2
   • 终点 X 位于右侧对象的左侧
   • 终点的 Y 位于右侧对象的 top + height/2
4. “换行点”位于起点的 Y 处以及起点 X 和终点 X 之间的 X 处。换行的第二个点位于终点的 Y 处，并且具有相同的 X 方向。
5. 按照之前连接对象的方式连接 3 个点。

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