mxGraph简单应用部分代码

使用前准备

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

　　检查浏览器是否支持　　

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

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

var container = document.getElementByIdx_x_x('id-of-graph-container'); //创建Graph对象 var graph = new mxGraph(container); 部分基础属性　　

　　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(); 　　　　} 　　}); 添加节点和连接线

程序需要在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 = '

html

'; 　　//更新节点显示的内容　　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(); } 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;'); 获取画布中的所有东西