思维导图怎么做word,word一键生成思维导图

投稿用户 • 2023年2月11日 am7:39 • 自媒体 • 阅读 148

最近突发奇想，自己去实现一个思维导图，因此思考总结了一下基本的技术方案

一、节点

中心主题节点：全框、背景色、字体大、不可为图片

子主题节点：全框、背景色、字体中等、可以为图片、链接等

正常节点：底线、无背景色、字体中等、可以为图片、链接等

。。。当然不限于这些

二、线

关联线：每个节点都可以发起描述，虚线，线中间有两个点，弧线的方向

关联线：有可能会覆盖其他的节点和线，由中间两个调整锚点进行调整

父子线：一级级下来的都是实线链接，均为起点到终点的圆弧线

三、上下级描述

所有的节点均可以创建无限的子节点。

中心主题节点 – 子主题节点 – 正常节点 – 正常节点。

任意节点可以新增无数的关联线，链接到任一关联节点。

四、锚点描述

所有的锚点都在节点右侧（后期可以直接切换锚点方向），可以有无数的子节点。

关联线的锚点在对方节点的方向上。

五、行为描述

所有的节点右侧有一个（减号加圈圈）可以收起子节点，收起后显示子节点数

所有的节点双击可以修改内容：图片和链接单击查看、双击修改

直接右键菜单有以下选中后的所有操作

所有的节点可以单个选中，选中后：

1. 按Tab新增子节点在最后一个节点下，并自动聚焦于新的节点内容修改
2. 按Enter新增兄弟节点在当前节点下，自动顶开下级节点并重绘，并自动聚焦于新的节点内容修改
3. 按Delete|Backspace 删除节点以及所有子节点，以及相关的线
4. 双击修改，单击选中（查看图片|链接）链接可以给出提示

节点可以拖动修改位置，拖到哪个节点上即为哪个节点的子节点，所有的子节点跟随并放置于最后

如果拖到没有节点的位置，那就变成一个自由主题

所有的节点位置均为计算固定，不能自由拖动，以免造成误解

所有的关联线都可以被选中，此时显示关联线中间三分之一和三分之二的两个拖动锚点

六、基本的技术方案

界面分为两层：

第一层：div + position：absolute 定位，将所有的节点摆出来

第二层：canvas|svg，根据所有的节点及边计算线，然后画出来

基本数据结构：

// 单个节点数据
item: MindMapItem
    id:UUID(),
    content:String,
    type: ‘text’|‘image’|’link’  // 不仅是类型，同时也是组件，方便以后增加其他的类型进来
    level:Number // 计算值级数，用于标识 主题、子主题等
    children:[MindMapItem];

// 单个关联线数据
relationLine: RelationLine
    from:Item1.id,
    to:item2.id,
    firstPoint:Position , // 拐弯的第一个点
    secondPoint: Position, // 拐弯的第二个点

// 整体数据
mindmap:[
    items:[MindMapItem]
    relations:[RelationLine]
]

七、难点

所有的 Item 摆到指定位置没有什么难度，修改样式即可
如何计算一个线的两个锚点的位置？
如何根据两个锚点的位置画出弧线？
关联线的两个调整锚点如何进行绘制？

八、总结

以上仅为开始做这项工作之前的一些思考，并非完整技术方案，仅作交流讨论用。

实际上已经有一些成熟的库可以调用，例如阿里的 X6图形库等。

但不妨碍我思考，毕竟思维导图的场景不一样，并不需要大量的轨迹算法。

说不定我自己写比学其他的库更快呢

欢迎关注宫zhong号【思跃喵】与我交流

创业项目群，学习操作 18个小项目，添加微信：923199819 备注：小项目！

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 zoodoho@qq.com举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.zodoho.com/91453.html