1 新建画板，画板相关操作
var container = document.getElementById("main"); //设置背景样式 container.style.background = 'url(editors/images/grid.gif)';
container.style.height = "300px";
container.style.padding = "20px";
//创建一个画板 var graph = new mxGraph(container); //获取顶层，可以认为是父节点 var parent = graph.getDefaultParent();
createVertex = function(){ var container = document.getElementById("main"); var graph = new mxGraph(container); var parent = graph.getDefaultParent(); // 开启拖拽选择 new mxRubberband(graph); v1 = graph.insertVertex(parent, null, "text1", 100, 200, 100, 100); graph.insertVertex(parent, null, "text2", 250, 200, 100, 100); graph.insertVertex(parent, null, "text3", 400, 200, 100, 100);return graph; };
2 style的使用，插入背景图
// 声明一个object var style = {}; // 克隆一个object style = mxUtils.clone(style); style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL; // 不设置这个属性 背景图片不出来 // 边框颜色 style[mxConstants.STYLE_STROKECOLOR] = '#999999'; // 边框大小 style[mxConstants.STYLE_STROKEWIDTH] = 10; // 字体颜色 style[mxConstants.STYLE_FONTCOLOR] = '#FFFF00'; // 文字水平方式 style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; // 文字垂直对齐 style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM; // 字体大小 style[mxConstants.STYLE_FONTSIZE] = 30; // 底图水平对齐 style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER; // 底图垂直对齐 style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_CENTER; // 图片路径 //style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png'; style[mxConstants.STYLE_IMAGE] = 'http://imgstatic.baidu.com/img/image/shouye/qizhi0822.jpg'; // 背景图片宽 style[mxConstants.STYLE_IMAGE_WIDTH] = 150; // 背景图片高 style[mxConstants.STYLE_IMAGE_HEIGHT] = 200; // 上间距设置 // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效 style[mxConstants.STYLE_SPACING_TOP] = 30; // 四边间距设置 style[mxConstants.STYLE_SPACING] = 10; // 把定义好的样式object push到stylesheet graph.getStylesheet().putCellStyle("style1", style);
//样式使用
var v1 = graph.insertVertex(parent, null, "text1", 50, 50, 200, 200, "style1");
3、一些常用的方法
3.1 insertVertex 绘制图形
//mxGraph.prototype.insertVertex = function(parent,id,value,x,y,width,height,style,relative) //parent画板父层，value值，x，y为坐标起点，width宽，height高 //style样式 stylename;image=imageUrl //relative相对位置 graph.insertVertex(parent, null, '第一个盒子', 50, 50, 80, 30,"style1");
3.2 insertEdge 连线
//mxGraph.prototype.insertEdge = function(parent,id,value,source,target,style)
//parent画板父层，value连线值，source起点，target重点，style样式 graph.insertEdge(parent, null, 'box1 connect to box2', v1, v2 , "");
3.3 addCellOverlay 添加告警
// 开启提示 graph.setTooltips(true); // 移出报警 var delOverlay = function(id){ // 获取ID单元 var cell = graph.getModel().getCell(id); // 修改有报警物体的样式 graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, "#CCCCCC", [cell]); graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, "#000000", [cell]);
// 移除告警 graph.removeCellOverlays(cell); }; // 给物体添加报警 var addOverlay = function(id, state){ // 获取ID单元 var cell = graph.getModel().getCell(id); // 修改有报警物体的样式 graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, "#FF0000", [cell]); graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, "#FFFFFF", [cell]); // 添加告警 graph.addCellOverlay(cell, createOverlay(graph.warningImage, '状态: '+state)); }; // 创建告警信息 var createOverlay = function(image, tooltip){ //function mxCellOverlay(image,tooltip,align,verticalAlign,offset,cursor) //image图片，tooltip提示，align位置，verticalAlign竖直位置 var overlay = new mxCellOverlay(image, tooltip); overlay.addListener(mxEvent.CLICK, function(sender, evt){ mxUtils.alert(tooltip); }); return overlay; };
3.4 添加按钮
// 添加按钮 document.body.appendChild(mxUtils.button('修改背景颜色', function(evt){ // Alaer mxUtils.alert("Oh! You will Click me!!"); // 获取单元 var cell = graph.getModel().getCell(v1.id); // 修改样式 graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, "#000000", [cell]); graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, "#FFFFFF", [cell]); })); // 添加按钮 document.body.appendChild(mxUtils.button('还原背景颜色', function(evt){ // 获取单元 var cell = graph.getModel().getCell(v1.id); // 获取默认样式 var style = graph.getStylesheet().getDefaultVertexStyle(); // 还原默认样式 for(var i in mxConstants){ graph.setCellStyles(mxConstants[i], style[mxConstants[i]], [cell]); } }));
3.5 缩放操作
// 居中缩放 graph.centerZoom = true; // 放大按钮 document.body.appendChild(mxUtils.button('放大 +', function(evt){ graph.zoomIn(); })); // 缩小按钮 document.body.appendChild(mxUtils.button('缩小 -', function(evt){ graph.zoomOut(); })); // 还原按钮 document.body.appendChild(mxUtils.button('还原 #', function(evt){ graph.zoomActual(); graph.zoomFactor = 1.2; input.value = 1.2; })); var input = document.createElement("input"); input.type = "text"; input.value = graph.zoomFactor; input.addEventListener("blur", function(){ graph.zoomFactor = parseFloat(this.value, 10); }); document.body.appendChild(input);
3.6 拖拽连线操作
// 开启可以拖拽建立关系 graph.setConnectable(true); // 开启方块上的文字编辑功能 graph.setCellsEditable(false); // 启用对齐线帮助定位 mxGraphHandler.prototype.guidesEnabled = true;
// 选择基本元素开启 graph.setEnabled(true);
3.7 图形形状介绍
var container = document.getElementById("main"); container.style.background = 'url(editors/images/grid.gif)'; container.style.width = "100%"; container.style.height = (window.screen.availHeight - 90 ) + "px"; container.style.overflow = "hidden"; var graph = new mxGraph(container); var parent = graph.getDefaultParent();
// 画方块 默认情况下 graph.insertVertex(parent, null, '矩形', 50, 50, 150, 150); // 画方块 圆角矩形 // shape=rounded 定义圆角 arcSize=10 定义圆角弧度 graph.insertVertex(parent, null, '圆角矩形', 300, 50, 150, 150, "rounded=true;perimeter=ellipsePerimeter;arcSize=20;"); // 画椭圆 // shape=elipse 定义椭圆 perimeter=ellipsePerimeter 让连线的箭头或起点触到边缘 graph.insertVertex(parent, null, '椭圆', 550, 50, 150, 150, "shape=ellipse;perimeter=ellipsePerimeter;"); // 画三角形 // shape=triangl 定义三角形 perimeter=ellipsePerimeter 让连线的箭头或起点触到边缘 direction=south 让三角形倒立 graph.insertVertex(parent, null, '三角形', 800, 50, 150, 150, "shape=triangle;perimeter=ellipsePerimeter;direction=south;"); // 画菱形 // shape=rhombus 定义菱形 graph.insertVertex(parent, null, '三角形', 1050, 50, 150, 150, "shape=rhombus;perimeter=ellipsePerimeter;"); // 画柱形 // shape=cylinder 定义柱形 graph.insertVertex(parent, null, '柱形', 1300, 50, 150, 150, "shape=cylinder;perimeter=ellipsePerimeter;"); // 画人 // shape=actor 定义演员 graph.insertVertex(parent, null, '演员', 50, 300, 150, 150, "shape=actor;perimeter=ellipsePerimeter;"); // 画云 graph.insertVertex(parent, null, '云', 300, 300, 150, 150, "shape=cloud;perimeter=ellipsePerimeter;"); //矩形默认情况下 graph.insertVertex(parent, null, '矩形', 550, 300, 150, 150, "shape=rectangle;perimeter=ellipsePerimeter;");
//泳道 graph.insertVertex(parent, null, '泳道', 800, 300, 150, 150, "shape=swimlane;perimeter=ellipsePerimeter;");
//双圆 graph.insertVertex(parent, null, '双圆', 1050, 300, 150, 150, "shape=doubleEllipse;perimeter=ellipsePerimeter;"); //六边形 graph.insertVertex(parent, null, '六边形', 1300, 300, 150, 150, "shape=hexagon;perimeter=ellipsePerimeter;");
3.8 查看图形的xml
document.body.appendChild(mxUtils.button('View XML', function() { var encoder = new mxCodec(); var node = encoder.encode(graph.getModel()); mxUtils.popup(mxUtils.getPrettyXml(node), true); //以窗口的方式展示处理 }));
3.9 工具栏常用操作
buttons = [ { label : "选择所有", fun : function(graph){ return function(evt){ graph.selectAll(); }; } }, { label : "选择一个", fun : function(graph){ return function(evt){ graph.selectCell(); }; } }, { label : "取消选择", fun : function(graph){ return function(evt){ var cells = graph.getSelectionCells(); graph.removeSelectionCells(cells); }; } }, { label : "随机添加", fun : function(graph){ return function(evt){ var randColor = function(){ return "rgb("+randint(0,255)+","+randint(0,255)+","+randint(0,255)+")"; }; var style = "fillColor=" + randColor() + "; fontColor=" + randColor(); var width = randint(50, 300); var height = randint(50, 300); var x = randint(0, 1200 - width); var y = randint(0, 600 - height); graph.insertVertex(graph.getDefaultParent(), null, "随机添加", x, y, width, height, style); }; } }, { label : "分组所选", fun : function(graph){ return function(evt){ var cells = graph.getSelectionCells(); graph.groupCells(null, 1, cells); }; } }, { label : "取消分组", fun : function(graph){ return function(evt){ var cells = graph.getSelectionCells(); graph.ungroupCells(cells); }; } }, { label : "删除所选", fun : function(graph){ return function(evt){ var cells = graph.getSelectionCells(); graph.removeCells(cells); }; } }, { label : "缩小", fun : function(graph){ return function(evt){ graph.zoomOut(); }; } }, { label : "放大", fun : function(graph){ return function(evt){ graph.zoomIn(); }; } }, { label : "还原", fun : function(graph){ return function(evt){ graph.zoomActual(); }; } }, { label : "随机所选元素的位置", fun : function(graph){ return function(evt){ var cells = graph.getSelectionCells(); for(var i=0; i<cells.length; i++){ var x = randint(0, 1200 - cells[i].geometry.width); var y = randint(0, 600 - cells[i].geometry.height); } graph.moveCells([cells[i]], x , y); }; } } ];
3.10 将图形的xml进行回显
var xml= '<mxGraphModel> '+ ' <root> '+ ' <mxCell id="0"/> '+ ' <mxCell id="1" parent="0"/> '+ ' <app appId="" appName="" protocol="" ip="" port="" context="" heartBeatUrl="" id="2"> '+ ' <mxCell style="verticalLabelPosition=top;verticalAlign=bottom;shadow=1;fillColor=#FFFFFF" vertex="1" connectable="0" parent="1" type="app"> '+ ' <mxGeometry x="100" y="320" width="20" height="40" as="geometry"/> '+ ' </mxCell> '+ ' </app> '+ ' </root> '+ '</mxGraphModel> '; var doc = mxUtils.parseXml(xml); var codec = new mxCodec(doc); codec.decode(doc.documentElement, graph.getModel());