最近突发奇想，自己去实现一个思维导图，因此思考总结了一下基本的技术方案
一、节点
中心主题节点：全框、背景色、字体大、不可为图片
子主题节点：全框、背景色、字体中等、可以为图片、链接等
正常节点：底线、无背景色、字体中等、可以为图片、链接等
。。。当然不限于这些
二、线
关联线：每个节点都可以发起描述，虚线，线中间有两个点，弧线的方向
关联线：有可能会覆盖其他的节点和线，由中间两个调整锚点进行调整
父子线：一级级下来的都是实线链接，均为起点到终点的圆弧线
三、上下级描述
所有的节点均可以创建无限的子节点。
中心主题节点 - 子主题节点 - 正常节点 - 正常节点。
任意节点可以新增无数的关联线，链接到任一关联节点。
四、锚点描述
所有的锚点都在节点右侧（后期可以直接切换锚点方向），可以有无数的子节点。
关联线的锚点在对方节点的方向上。
五、行为描述
所有的节点右侧有一个（减号加圈圈）可以收起子节点，收起后显示子节点数
所有的节点双击可以修改内容：图片和链接单击查看、双击修改
直接右键菜单有以下选中后的所有操作
所有的节点可以单个选中，选中后：
- 按Tab新增子节点在最后一个节点下，并自动聚焦于新的节点内容修改
- 按Enter新增兄弟节点在当前节点下，自动顶开下级节点并重绘，并自动聚焦于新的节点内容修改
- 按Delete|Backspace 删除节点以及所有子节点，以及相关的线
- 双击修改，单击选中（查看图片|链接）链接可以给出提示
节点可以拖动修改位置，拖到哪个节点上即为哪个节点的子节点，所有的子节点跟随并放置于最后
如果拖到没有节点的位置，那就变成一个自由主题
所有的节点位置均为计算固定，不能自由拖动，以免造成误解
所有的关联线都可以被选中，此时显示关联线中间三分之一和三分之二的两个拖动锚点
六、基本的技术方案
界面分为两层：
第一层：div + position：relative 定位，将所有的节点摆出来
第二层：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号【思跃喵】与我交流
网友评论