html5脑图_使用HTML5技术绘制思维导图

客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点(主题)出发，联想到其他话题，于是分支开花，再分支，有时候也会构成网络结构，由子分支联想到另一个已有分支，但通常不破坏原有结构，常见的思维导图如下

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;

var cx