又。。几乎 100% 还原了 XMind 的主要功能

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1335 天前的主题，其中的信息可能已经有所发展或是发生改变。

XMind 是一个思维导图软件，个人基本一直在使用，但是每次打开都要好几秒，早看它不爽了自己做了个：

CodePen 可以看效果

JMind git clone 或者直接下载下来就可以直接运行，使用文档也在这里

因为 Janvas 从底层绘制，仅含一个 <canvas> dom，又采用事件代理的方式处理所有事件，所以占用极低，各方面效率比 XMind 高出一到两个数量级

源码已经发布在 JMind

有没有喜欢的呀，希望可以给 Janvas 点上一个小爱心

26 条回复 • 2021-04-04 06:55:17 +08:00

superliwei

2021-03-29 22:29:04 +08:00

@M3oM3oBug 非常棒

Austin2035

2021-03-29 22:35:59 +08:00

不错不错，已 star

M3oM3oBug

2021-03-29 22:36:00 +08:00

@superliwei 感谢大佬认可~

lopda

2021-03-29 22:36:44 +08:00

学习一波。、很棒！

M3oM3oBug

2021-03-29 22:39:06 +08:00

@lookcos 感谢小心心~

qiaobeier

2021-03-29 22:45:57 +08:00

优化下代码结构吧

zzzzzzggggggg

2021-03-29 22:47:49 +08:00

不错

M3oM3oBug

2021-03-29 22:48:37 +08:00

@qiaobeier 可否指点一二（因为我目前所理解的 var xmind = new janvas.Canvas(...)，xmind 就是一个对象

whatalittleboy

2021-03-29 23:21:34 +08:00

要是能鼠标移动节点就好了

M3oM3oBug

2021-03-30 07:50:31 +08:00

@whatalittleboy 这个的代码还没写，在 1256 行 else 语句那儿。。现在我都是用快捷键操作，shift+方向键或者直接剪切粘贴，[在线版]( http://janvas.cn/JMind/)允许一次剪切板就能流畅操作了 [Github Pages]( http://janvas.cn/JMind/)，以后有空会写的

dai875939260

2021-03-30 09:06:10 +08:00

优秀，不过有点 bug，点击节点的有时候会飞，滚轮滚动的时候太顺滑，滚不到想要的位置

ddeef

2021-03-30 09:18:32 +08:00

牛！

shuax

2021-03-30 10:25:42 +08:00

动画不太好看，还是说没动画？

M3oM3oBug

2021-03-30 10:29:09 +08:00

@dai875939260 点击节点会飞有点脑补不出来。。滚轮顺滑可能是因为没适配无极滚轮（或触摸板），不好意思哈

@shuax 目前就是节点超出界面了进行选择会有动画，没加其他动画效果了，鼠标右键可以拖曳主界面

ERRASYNCTYPE

2021-03-30 10:39:49 +08:00

哇靠🐂🍺！丝般顺滑！

cx99

2021-03-30 11:14:35 +08:00

nb 已 star

hanyceZ

2021-03-30 16:50:46 +08:00

rationa1cuzz

2021-03-30 17:15:37 +08:00

mac 动一下触碰版就找不到东西了 @M3oM3oBug

M3oM3oBug

2021-03-30 18:52:26 +08:00

@rationa1cuzz 还没有适配触摸板的呀，可以考虑自己修改一下源代码，xmind.js 的 1503 行，把值 100/-100 改成 1/-1

LeeReamond

2021-03-30 21:55:08 +08:00

提一个建议，应该增加一个可拖拽功能，类似手机屏幕上的操作逻辑。

你这个现在这样，东西一多了之后跑出屏幕边界了，根本看不到

M3oM3oBug

2021-03-31 10:03:10 +08:00

@LeeReamond 鼠标右键可以拖曳整个图的

另外补充，现在还没有思路适配无极滚轮和触摸板，这种情况每次都会触发 wheel 事件，有没有大佬知道咋兼容处理的，暂时不想用 debounce 防抖这种低劣的方法。。

如果是暂时针对它，可以把 1503/1504 行替换：
`ev.shiftKey ? this.point.add(-ev.deltaY, 0) : this.point.add(-ev.deltaX, -ev.deltaY);`

但我手头又暂时没得办法测试。。