如何用MindManager将导图导出为HTML5交互式导图

html-css09

如何用MindManager将导图导出为HTML5交互式导图,第1张

目前，MindManager 2017支持将思维导图导出为HTML5交互式导图。

1、在MindManager 2017中完成思维导图制作，或打开制作好的思维导图；

2、单击“文件”>“导出”，选择导出到“HTML5交互式导图”；

3、在弹出的对话框中，指定文件名及文件保存路径，文件类型默认为“HTML5 交互式导图（*.html）”，然后点击保存即可。

4、导出成功会有以下提示，根据需要自主选择，单击打开，该思维导图将在你默认的浏览器中打开。

制作思维导图应用

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

}