mxgraph进阶(五)搭建mxGraph简单应用

使用前准备

  mxBasePath变量用来定义库资源的目录。这个变量必须在加载库前就定义好。

　　<script type="text/javascript"> mxBasePath = 'javascript/src/';
　　</script> //mxClient.js包含该类库的全部所需代码。 <script type="text/javascript" src="/js/mxClient.js"></script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

检查浏览器是否支持

if (!mxClient.isBrowserSupported()) {
　　//如果浏览器不支持，则显示错误信息 alert('该浏览器不支持');
 }

  

 

  
1
  
2
  
3
  
4
 

Container容器

  页面用一个dom节点将graph与JavaScript结合。它可以使用document.getElementById在body中取得或者直接动态创建（如createElement）。

var container = document.getElementById('id-of-graph-container');
//创建Graph对象
var graph = new mxGraph(container); 

  

 

  
1
  
2
  
3
 

部分基础属性

　　graph.setCellsResizable(false); //节点不可改变大小
　　mxGraphHandler.prototype.setMoveEnabled(true); //是否可以移动
　　mxGraphHandler.prototype.guidesEnabled = true; //显示细胞位置标尺
　　graph.setEnabled(false);//是否只读
　　graph.setConnectable(false);//cell是否可以连线 graph.setCellsLocked(true);//是否可以移动连线，重新连接其他cell，主要用来展现中用
　　graph.setConnectable(true); // 是否允许Cells通过其中部的连接点新建连接,false则通过连接线连接
　　/*禁用节点双击，防止改变数据 */
　　graph.dblClick = function (evt, cell) { var model = graph.getModel(); if (model.isVertex(cell)) { return false; }
　　};
　　// 节点是否解析html
　　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();
　　});
　　//删除选中Cell或者Edge
　　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
 

添加节点和连接线

  程序需要在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 {
　　//参数：节点显示的内容、X、Y、宽度、高度，X、Y是相对于DOM节点中的位置
　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
 

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中使用image4gray;即可
cell = graph.insertVertex(parent, null, name, x, y, cellWidth, cellHeight, 'image4gray;rounded=true;strokeColor=none;fillColor=yellow;');

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

获取画布中的所有元素

　　var mxGraph = this.GetmxGraph();
　　var parent = mxGraph.getDefaultParent();
　　var parentChildren = parent.children;
　　var arrEdge = [];   //连接线
　　var arrVertex = []; //节点
　　//获取所有信息
　　for (var i = 0; i < parentChildren.length; i++) { 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
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/53955417