使用前准备
mxBasePath变量用来定义库资源的目录。这个变量必须在加载库前就定义好。
<script type="text/javascript"> mxBasePath = 'javascript/src/'; </script> //mxClient.js包含该类库的全部所需代码。 <script type="text/javascript" src="/js/mxClient.js"></script>
检查浏览器是否支持
if (!mxClient.isBrowserSupported()) { //如果浏览器不支持,则显示错误信息 alert('该浏览器不支持'); }
Container容器
页面用一个dom节点将graph与JavaScript结合。它可以使用document.getElementById在body中取得或者直接动态创建(如createElement)。
var container = document.getElementById('id-of-graph-container');var graph = new mxGraph(container);
部分基础属性
graph.setCellsResizable(false); mxGraphHandler.prototype.setMoveEnabled(true); mxGraphHandler.prototype.guidesEnabled = true; graph.setEnabled(false); graph.setConnectable(false); graph.setCellsLocked(true); graph.setConnectable(true); graph.dblClick = function (evt, cell) { var model = graph.getModel(); if (model.isVertex(cell)) { return false; } }; graph.setHtmlLabels(true); var style = graph.getStylesheet().getDefaultEdgeStyle(); style[mxConstants.STYLE_ROUNDED] = true; style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; 部分方法 getCellAt(x,y,parent,vertices,edges) graph.click = function (me) { var x = me.graphX; var y = me.graphY; var graph = this.GetmxGraph(); var model = graph.getModel(); var cell = graph.getCellAt(x, y); if (model.isVertex(cell)) { alert("环节ID:" + cell.id); } else { return false; } } graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) { var cell = evt.getProperty('cell'); mxUtils.alert('Doubleclick: '+((cell != null) ? 'Cell' : 'Graph')); evt.consume(); }); var keyHandler = new mxKeyHandler(graph); keyHandler.bindKey(46, function (evt) { if (graph.isEnabled()) { graph.removeCells(); } });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
添加节点和连接线
程序需要在beginUpdate和endUpdate中来插入节点和连线(更新图形)。endUpdate应放在finally-block中以确保endUpdate一直执行。但beginUpdate不能在try-block中,这样如果beginUpdate失败那么endupdate永远不会执行。
beginUpdate和endUpdate方法不仅提供了显示功能,而且它能够当做undo/redo标记的边界(也就是说,beginUpdate和endUpdate之间操作会作为undo、redo的原子操作,要么同时被redo或undo, 相当于数据库中的事务)。
var parent = graph.getDefaultParent();graph.getModel().beginUpdate();try { var v1 = graph.insertVertex(parent, null, '节点一', 20, 100, 300,145, 'rounded;strokeColor=none;fillColor=none;'); var v2 = graph.insertVertex(parent, null, '节点二', 20, 400, 300, 145, 'rounded;strokeColor=none;fillColor=none;'); var v3 = graph.insertVertex(parent, null, 'B', 80, 100, 100, 100, 'shape=ellipse;perimeter=ellipsePerimeter'); var v4 = graph.insertVertex(parent, null, 'C', 190, 30, 100, 60, 'shape=triangle;perimeter=trianglePerimeter;direction=south'); graph.getModel().setCollapsed(v2, 1); var html = '<div>html</div>'; graph.getModel().setValue(v1, html); var e1 = graph.insertEdge(parent, null, '我1连2', v1, v2, "strokeWidth=3;labelBackgroundColor=white;fontStyle=1"); var e2 = graph.insertEdge(parent, null, '', v1, v2, 'edgeStyle=orthogonalEdgeStyle;'); var e2 = graph.insertEdge(parent, null, '', v3, v2, 'edgeStyle=elbowEdgeStyle;elbow=horizontal;orthogonal=0;entryPerimeter=1;'); graph.insertEdge(parent, null, null, step1, step2, 'crossover');}finally { graph.getModel().endUpdate();}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
style的使用,插入背景图
var style = new Object();style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;style[mxConstants.STYLE_IMAGE] = 'IMGUrl';graph.getStylesheet().putCellStyle('image4gray', style);cell = graph.insertVertex(parent, null, name, x, y, cellWidth, cellHeight, 'image4gray;rounded=true;strokeColor=none;fillColor=yellow;');
获取画布中的所有元素
var mxGraph = this.GetmxGraph() var parent = mxGraph.getDefaultParent() var parentChildren = parent.children var arrEdge = [] var arrVertex = [] //获取所有信息 for (var i = 0 var child = parentChildren[i] if (!child.isVisible()) { continue } //区分连接线、节点 if (child.isEdge()) { var obj = new Object() obj.ID = child.id obj.SourceID = child.source.id obj.TargetID = child.target.id arrEdge.push(obj) } else if (child.isVertex()) { var obj = new Object() obj.ID = child.id obj.Name = child.value obj.LeftTopX = child.geometry.x obj.LeftTopY = child.geometry.y arrVertex.push(obj) } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27