使用HTML5技术绘制思维导图
3 月,跳不动了?>>> 客户常常提到思维导图,喜欢它的结构展示方式,和交互的友好,从图论的角度看,思维导图本质上是一种树,有一个根节点(主题)出发,联想到其他话题,于是分支开花,再分支,有时候也会构成网络结构,由子分支联想到另一个已有分支,但通常不破坏原有结构,常见的思维导图如下 XMind制作的思维导图 使用HTML5制作思维导图应用 这里需要用到一款HTML5图形组件-Qunee for HTML5,Qunee组件本身支持树形布局,所以对于思维导图的大体结构是可以呈现的,到细节的地方就比较多了,包括线条的走向,节点的样式,布局交互,自动吸附,双击编辑等等,本示例没办法面面俱到,所以参照XMind的效果,只实现了部分功能,供用户参考和扩展 连线定制 默认连线为直线,通过定制EdgeUI可以实现曲线效果 function FlexEdgeUI(edge, graph){ Q.doSuperConstructor(this, FlexEdgeUI, arguments); } FlexEdgeUI.prototype = { drawEdge: function(path, fromUI, toUI, edgeType, fromBounds, toBounds){ var from = fromBounds.center; var to = toBounds.center;