javascript - 连接矩形的线的算法

Question

我正在寻找用于在矩形之间绘制连接线的算法或示例解决方案。在我的情况下，矩形是元素甘特图，连接显示依赖关系。我正在使用 Raphael JS 库来绘制矩形和线条。所以 JavaScript 的解决方案是最好的，但元语言或其他类似 JS 的算法也很好。

我找到了一个看起来不错的例子，但也许有人知道别的东西。

就我而言，有一些相关要求：

1. 只允许水平线和垂直线
2. 线不应相互交叉
3. 线条不应该跨越矩形我希望实现类似的东西：

Answer 1

看起来您正在寻找javascript 甘特图。看看这个：

http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml

• 可编辑图表
• 使用 JavaScript API 完全控制
• 多浏览器/多平台支持
• 从 XML 加载
• 序列化为 XML
• 可移动/可调整大小的活动
• 内置编辑菜单，以及自定义 dhtmlxMenu 支持
• 扩展属性弹出窗口
• 可选的树视图
• 可定制的任务订阅
• 百分比完成的阴影
• 依赖箭头
• 快速流畅的渲染
• 内置约束检查
• 打印友好模式

http://www.bryntum.com/products/gantt/

• 完全建立在网络标准 - HTML/CSS/JavaScript
• 与任何服务器（PHP、Java、ASP.NET）一起使用
• 支持依赖关系、领先/滞后和关键路径
• 导出为 PDF/PNG，MS 项目导入
• 项目、任务和资源日历
• 使用 Siesta 进行单元测试

http://gxt-scheduler.com/

• 完全基于 Web 标准 - HTML/CSS/GWT
• 与任何类型的后端集成
• 完全可主题化，只需要基本的 HTML/CSS 知识
• 轻松拖放和调整项目大小
• 支持所有主流浏览器

http://gantter.com/

• 谷歌驱动集成
• 免费的基于云的项目调度

http://gantt.twproject.com/

• 就地编辑
• 拖放
• 缩放
• 做/撤消
• 多重依赖
• 完整编辑
• 日期快捷方式
• CSS皮肤
• 多浏览器
• 资源编辑
• 多重赋值
• 里程碑
• 以 JSON 格式导出数据
• 调整大小和滚动