使用 jdMind 及改进

来源:互联网 发布:淘宝客教程视频 编辑:程序博客网 时间:2024/06/01 08:01

JsMind 是一个开源 js 库,以节点及线条绘制思维导图,效果如下


效果还是非常棒的~

jsMind 提供的功能较多:动态增加/删除节点, 收缩/展开子节点,定制思维导图/绘图区大小,主题独立于代码,很方便地替换主题,支持增加事件绑定。

jsMind 使用起来也非常方便,如果不使用拖拽功能,则它只包括 jsMind.js 和 jsMind.css 两个文件,我们都引入到前端代码中即可使用。在 option 对象中指定绘制区后,通过以下几步即可展示:var jm = new Jsmind(option) ,jm.show(); 还可通过 jm.add_node 增加节点。

具体使用方法 jsMind 有文档及示例指出。

然而,jsMind 有几个缺点:

1.不能体现出数据流向性,没有箭头。

2.不能细粒度地定制每个节点的主题。


为此,改进了这个 jsMind,达到的目标是:

1.支持曲线画箭头,箭头的方向应沿着曲线线条末端的切线。

2.支持箭头从父节点指向子节点,也支持从子节点指向父节点。

3.支持每个节点不同主题。

4.智能地根据父子节点的位置,选择贝塞尔曲线的画法(向哪边弯曲)


手段是引入 Arrows with canvas ,并且适当修改 jsMind 相应代码。已上传作为备份。


0 0
原创粉丝点击