使用 jdMind 及改进

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 相应代码。已上传作为备份。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值