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

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

  •  1
     
  •   M3oM3oBug · 246 天前 · 4992 次点击
    这是一个创建于 246 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    CodePen 可以看效果

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

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

    源码已经发布在 JMind

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

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


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

    你这个现在这样,东西一多了之后跑出屏幕边界了,根本看不到
    M3oM3oBug
        21
    M3oM3oBug   245 天前
    @LeeReamond 鼠标右键可以拖曳整个图的

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

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

    但我手头又暂时没得办法测试。。
    mrgeneral
        22
    mrgeneral   245 天前
    怎么保存呢?看起来只能保存 HTML 了。
    balabalaguguji
        23
    balabalaguguji   244 天前
    楼主好强大
    ilxv
        24
    ilxv   243 天前
    厉害诶,用了一下很不错,不卡顿,页面也挺好看的
    yazoox
        25
    yazoox   243 天前
    学习一下。厉害
    icenya
        26
    icenya   241 天前
    这是纯前端嘛...!好厉害!
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2640 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 13:47 · PVG 21:47 · LAX 05:47 · JFK 08:47
    ♥ Do have faith in what you're doing.