自建思维导图的技术方案
最近突发奇想,自己去实现一个思维导图,因此思考总结了一下基本的技术方案
一、节点
中心主题节点:全框、背景色、字体大、不可为图片
子主题节点:全框、背景色、字体中等、可以为图片、链接等
正常节点:底线、无背景色、字体中等、可以为图片、链接等
。。。当然不限于这些
二、线
关联线:每个节点都可以发起描述,虚线,线中间有两个点,弧线的方向
关联线:有可能会覆盖其他的节点和线,由中间两个调整锚点进行调整
父子线:一级级下来的都是实线链接,均为起点到终点的圆弧线
三、上下级描述
所有的节点均可以创建无限的子节点。
中心主题节点 - 子主题节点 - 正常节点 - 正常节点。
任意节点可以新增无数的关联线,链接到任一关联节点。
四、锚点描述
所有的锚点都在节点右侧(后期可以直接切换锚点方向),可以有无数的子节点。
关联线的锚点在对方节点的方向上。
五、行为描述
所有的节点右侧有一个(减号加圈圈)可以收起子节点,收起后显示子节点数
所有的节点双击可以修改内容:图片和链接单击查看、双击修改
直接右键菜单有以下选中后的所有操作
所有的节点可以单个选中,选中后:
- 按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号【思跃喵】与我交流