HTML5制作思维导图

aaron 发布于2019-08-02 17:59 / 2349人阅读

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

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

XMind制作的思维导图 制作思维导图应用

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 = (from.x + to.x) / 2;
        var cy = (from.y + to.y) / 2;
        path.curveTo(from.x, cy, cx, to.y);
    }
}
Q.extend(FlexEdgeUI, Q.EdgeUI);

使用方式

通过图元的#uiClass属性，与定制的EdgeUI相关联

function createEdge(name, from, to){
    var edge = graph.createEdge(name, from, to);
    edge.uiClass = FlexEdgeUI;
}

曲线效果

布局定制

Qunee提供的树形布局非常强大，这里不需要太多设置就可以完成类似思维导图的布局，下面的代码设置了布局过滤器，用于控制某些节点不参与布局，代码中的控制逻辑是分离图元不参与布局，这样当图元脱离思维导图树时，将不参与自动布局处理

var layouter = new Q.TreeLayouter(graph);
layouter.isLayoutable = function(node, from){
    return node == ROOT || node.host != null;
}
layouter.vGap = 20;

下面的代码，设置主节点的布局类型为两边分布，方向为居中

ROOT.parentChildrenDirection = Q.Consts.DIRECTION_MIDDLE;
ROOT.layoutType = Q.Consts.LAYOUT_TYPE_TWO_SIDE;

布局效果如下

交互定制

交互定制相对复杂些，包括拖拽过程中的动态连接以及双击编辑等

动态连接效果

需要判断何时脱离，何时连接，寻找合适的连接对象，下面是拖拽交互代码，监听节点拖拽事件，动态查找就近的连接节点，具体的代码请参看http://demo.qunee.com/#Mind Mapping Demo

graph.interactionDispatcher.addListener(function(evt){
    if(evt.kind == Q.InteractionEvent.ELEMENT_MOVING && evt.data){
        var node = evt.data;
        var host = findNearNode(node);
        if(node.host == host){
            return;
        }
        if(node.host){
            unlinkToParent(node);
        }
        if(host){
            linkToParent(node, host);
        }
    }else if(evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END && evt.data){
        layouter.doLayout();
    }
})

双击编辑

双击编辑用到LabelEditor类，监听Graph组件的双击事件，当双击节点时，显示文本编辑框

graph.ondblclick = function(evt){
    var element = graph.getElementByMouseEvent(evt);
    if(element){
        var xy;
        if(element instanceof Q.Node){
            xy = graph.toCanvas(element.x, element.y);
            xy = localToGlobal(xy.x, xy.y, graph.html);
        }else{
            xy = getPageXY(evt);
        }
        labelEditor.startEdit(xy.x, xy.y, element.name, graph.getStyle(element, Q.Styles.LABEL_FONT_SIZE), function(text){
            element.name = text;
        });
        return;
    }
    var xy = graph.getLogicalPointByMouseEvent(evt);
    var newItem = createText("新项目", xy.x, xy.y);
    graph.selectionModel.select(newItem);
}

编辑效果

运行效果

在线演示

http://demo.qunee.com/#Mind Mapping Demo

专线服务服务器托管思维导图日本思维导图 javascript思维导图服务器思维导图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55107.html

学会它，能让你工作学习效率提升10倍！

摘要：思维导图的好处它们能投让你一直对全部知识图景了然于胸，因而可以让你对那一学科的全部知识有一个更加平衡和更加全面的理解。竭尽所能地利用一切让思维导图的制作过程充满乐趣音乐绘画色彩。从小老师就教育小肆，要多记笔记，说好记性不如烂笔头，但记过的笔记却很快就忘了，甚至回头再看都不知道当时记得什么，一直期望能有个比记笔记更好的方法来学习，直到我遇见了它--思维导图。什么是思维导图？人脑不是...

Cruise_Chan 2019-08-23 14:39 评论0 收藏0
学会它，能让你工作学习效率提升10倍！

摘要：思维导图的好处它们能投让你一直对全部知识图景了然于胸，因而可以让你对那一学科的全部知识有一个更加平衡和更加全面的理解。竭尽所能地利用一切让思维导图的制作过程充满乐趣音乐绘画色彩。从小老师就教育小肆，要多记笔记，说好记性不如烂笔头，但记过的笔记却很快就忘了，甚至回头再看都不知道当时记得什么，一直期望能有个比记笔记更好的方法来学习，直到我遇见了它--思维导图。什么是思维导图？人脑不是...

ZweiZhao 2019-08-05 15:58 评论0 收藏0
想让你的博文获得更多推荐吗？快来了解下思维导图吧

摘要：下面就是我的另一篇文章你真的了解和吗中的思维导图。但是托尼布赞并没有沉沦，而是寻找解决方法，最终发明了思维导图。本节的思维导图就是典型的折中型思维导图。安排合适的间隔合适的间隔能够很大程度提高思维导图的审美性。天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。——《为学》引言我猜发布文章的同学肯定都有一个目标，那就是获得更多的推荐。推荐越多，表示得到别人的认同越多，自我满...

cc17 2019-08-23 13:49 评论0 收藏0
想让你的博文获得更多推荐吗？快来了解下思维导图吧

摘要：下面就是我的另一篇文章你真的了解和吗中的思维导图。但是托尼布赞并没有沉沦，而是寻找解决方法，最终发明了思维导图。本节的思维导图就是典型的折中型思维导图。安排合适的间隔合适的间隔能够很大程度提高思维导图的审美性。天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。——《为学》引言我猜发布文章的同学肯定都有一个目标，那就是获得更多的推荐。推荐越多，表示得到别人的认同越多，自我满...

zorpan 2019-08-16 13:53 评论0 收藏0
想让你的博文获得更多推荐吗？快来了解下思维导图吧

摘要：下面就是我的另一篇文章你真的了解和吗中的思维导图。但是托尼布赞并没有沉沦，而是寻找解决方法，最终发明了思维导图。本节的思维导图就是典型的折中型思维导图。安排合适的间隔合适的间隔能够很大程度提高思维导图的审美性。天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。——《为学》引言我猜发布文章的同学肯定都有一个目标，那就是获得更多的推荐。推荐越多，表示得到别人的认同越多，自我满...

rainyang 2019-08-05 15:38 评论0 收藏0