V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
M3oM3oBug
V2EX  ›  分享创造

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

  •  1
     
  •   M3oM3oBug · 2021-03-29 22:16:16 +08:00 · 6794 次点击
    这是一个创建于 1314 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    CodePen 可以看效果

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

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

    源码已经发布在 JMind

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

    26 条回复    2021-04-04 06:55:17 +08:00
    superliwei
        1
    superliwei  
       2021-03-29 22:29:04 +08:00
    @M3oM3oBug 非常棒
    Austin2035
        2
    Austin2035  
       2021-03-29 22:35:59 +08:00
    不错不错,已 star
    M3oM3oBug
        3
    M3oM3oBug  
    OP
       2021-03-29 22:36:00 +08:00
    @superliwei 感谢大佬认可~
    lopda
        4
    lopda  
       2021-03-29 22:36:44 +08:00
    学习一波。、很棒!
    M3oM3oBug
        5
    M3oM3oBug  
    OP
       2021-03-29 22:39:06 +08:00
    @lookcos 感谢小心心~
    qiaobeier
        6
    qiaobeier  
       2021-03-29 22:45:57 +08:00
    优化下代码结构吧
    zzzzzzggggggg
        7
    zzzzzzggggggg  
       2021-03-29 22:47:49 +08:00
    不错
    M3oM3oBug
        8
    M3oM3oBug  
    OP
       2021-03-29 22:48:37 +08:00
    @qiaobeier 可否指点一二(因为我目前所理解的 var xmind = new janvas.Canvas(...),xmind 就是一个对象
    whatalittleboy
        9
    whatalittleboy  
       2021-03-29 23:21:34 +08:00
    要是能鼠标移动节点就好了
    M3oM3oBug
        10
    M3oM3oBug  
    OP
       2021-03-30 07:50:31 +08:00   ❤️ 1
    @whatalittleboy 这个的代码还没写,在 1256 行 else 语句那儿。。现在我都是用快捷键操作,shift+方向键或者直接剪切粘贴,[在线版]( http://janvas.cn/JMind/)允许一次剪切板就能流畅操作了 [Github Pages]( http://janvas.cn/JMind/),以后有空会写的
    dai875939260
        11
    dai875939260  
       2021-03-30 09:06:10 +08:00
    优秀,不过有点 bug,点击节点的有时候会飞,滚轮滚动的时候太顺滑,滚不到想要的位置
    ddeef
        12
    ddeef  
       2021-03-30 09:18:32 +08:00
    牛!
    shuax
        13
    shuax  
       2021-03-30 10:25:42 +08:00
    动画不太好看,还是说没动画?
    M3oM3oBug
        14
    M3oM3oBug  
    OP
       2021-03-30 10:29:09 +08:00
    @dai875939260 点击节点会飞有点脑补不出来。。滚轮顺滑可能是因为没适配无极滚轮(或触摸板),不好意思哈


    @shuax 目前就是节点超出界面了进行选择会有动画,没加其他动画效果了,鼠标右键可以拖曳主界面
    ERRASYNCTYPE
        15
    ERRASYNCTYPE  
       2021-03-30 10:39:49 +08:00
    哇靠🐂🍺!丝般顺滑!
    cx99
        16
    cx99  
       2021-03-30 11:14:35 +08:00
    nb 已 star
    hanyceZ
        17
    hanyceZ  
       2021-03-30 16:50:46 +08:00
    nb
    rationa1cuzz
        18
    rationa1cuzz  
       2021-03-30 17:15:37 +08:00
    mac 动一下触碰版就找不到东西了 @M3oM3oBug
    M3oM3oBug
        19
    M3oM3oBug  
    OP
       2021-03-30 18:52:26 +08:00
    @rationa1cuzz 还没有适配触摸板的呀,可以考虑自己修改一下源代码,xmind.js 的 1503 行,把值 100/-100 改成 1/-1
    LeeReamond
        20
    LeeReamond  
       2021-03-30 21:55:08 +08:00
    提一个建议,应该增加一个可拖拽功能,类似手机屏幕上的操作逻辑。

    你这个现在这样,东西一多了之后跑出屏幕边界了,根本看不到
    M3oM3oBug
        21
    M3oM3oBug  
    OP
       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);`

    但我手头又暂时没得办法测试。。
    mrgeneral
        22
    mrgeneral  
       2021-03-31 17:11:31 +08:00
    怎么保存呢?看起来只能保存 HTML 了。
    balabalaguguji
        23
    balabalaguguji  
       2021-04-01 09:24:42 +08:00
    楼主好强大
    ilxv
        24
    ilxv  
       2021-04-02 15:15:01 +08:00
    厉害诶,用了一下很不错,不卡顿,页面也挺好看的
    yazoox
        25
    yazoox  
       2021-04-02 18:39:24 +08:00
    学习一下。厉害
    icenya
        26
    icenya  
       2021-04-04 06:55:17 +08:00
    这是纯前端嘛...!好厉害!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1415 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:27 · PVG 01:27 · LAX 10:27 · JFK 13:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.