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;}};// 节点是否解析htmlgraph.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或者Edgevar 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);}}

mxgraph进阶(五)搭建mxGraph简单应用相关推荐

mxgraph html5,mxgraph进阶(四)mxGraph再启程
mxgraph进阶(四)mxGraph再启程前言小论文Constructing User Interaction Behaviors Net from System Log. (AICE 2016 ...
mxGraph进阶(一)mxGraph教程-开发入门指南
mxGraph教程-开发入门指南概述 mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图.图表.网络图和普通图形的Web应用程序.mxgraph下载包中包括用 ...
Python爬虫进阶五之多线程的用法
前言我们之前写的爬虫都是单个线程的?这怎么够?一旦一个地方卡到不动了,那不就永远等待下去了?为此我们可以使用多线程或者多进程来处理. 首先声明一点! 多线程和多进程是不一样的!一个是 thread ...
测试开发——搭建一个简单 web服务(flask框架基础)项目实战
搭建一个简单 web服务-flask框架一.什么是wsgi? 二.搭建一个简单 web服务三.扩展四.请求加参数的情况五.安装flask 一.什么是wsgi? wsgi是webserver和a ...
《我学区块链》—— 五、Remix简单使用
五.Remix简单使用目前以太坊智能合约的编辑器主要有在线的 http://remix.ethereum.org:由 remix-ide自己搭建的:以及 Mac,Linux 系统上的 Remix-a ...
Liferay环境搭建、简单说明与相关资料
Liferay环境搭建.简单说明与相关资料 2012年3月23日简单说明该教程为是我在工作交接时编制的文档的一部分,经过测试应该不会有大问题,但可能还是会有所遗漏,请留言指正,谢谢. 转载请注明 ...
Appium+Java环境搭建及简单实例
Appium+Java环境搭建及简单实例一.下载jdk并配置好环境二.下载Android-sdk并配置好环境三.下载Eclipse软件四.下载Node.js 下载地址:https://node ...
图像对抗生成网络 GAN学习01：从头搭建最简单的GAN网络，利用神经网络生成手写体数字数据（tensorflow）
图像对抗生成网络 GAN学习01:从头搭建最简单的GAN网络,利用神经网络生成手写体数字数据(tensorflow) 文章目录图像对抗生成网络 GAN学习01:从头搭建最简单的GAN网络,利用神经网 ...
安全职业生涯进阶：92 个简单步骤破解安全行业
文章出处 http://www.microsoft.com/china/technet/community/columns/secmvp/sv0706.mspx 每月安全 MVP 文章 - 2006 ...