mxgraph进阶(五)搭建mxGraph简单应用
2016-12-31 13:59
357 查看
mxgraph进阶(五)搭建mxGraph简单应用
使用前准备
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'); //创建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 = '<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(); }
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;');
获取画布中的所有元素
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); } }
相关文章推荐
- 【Redis进阶】Redis伪集群搭建与简单应用
- mxgraph 搭建简单应用 主线描述、属性与方法的意思
- myeclipse搭建struts2环境及简单应用
- Android进阶——性能优化之多线程总结及简单应用(一)
- Docker-搭建简单的应用栈
- java语言搭建SSL的Socket并发送字符串消息(最简单应用实例/常见异常及解决)
- Eclipse下Android开发环境的搭建及简单应用的创建
- Redis进阶实践(四)——redis高级应用(集群搭建、集群分区原理、集群操作)
- 最简单的混合APP开发框架——搭建你的第一个Ionic应用(一)
- RedHat6.X 搭建简单应用服务器(一)
- 手把手教你搭建一款简单应用
- 搭建一个简单的Struts2应用
- DrySister看妹子应用(第一版)——1.项目搭建与简单实现
- Android入门进阶教程(8)-常用组件 打电话,发短信简单应用 &单元测试
- struts2.x学习一(搭建一个简单的Struts2应用)
- 【Android进阶】Junit单元测试环境搭建以及简单实用
- UI进阶第五发:使用picker View控件完成一个简单的选餐应用
- IM聊天进阶(三)IM>openfire>mina>mina搭建服务端和客户端 实现简单点对点聊天
- CloudFoundry环境搭建及简单应用部署
- J2EE进阶之JDBC简单应用之客户管理系统 十七