Mxgraph收集、使用汇总

2018-01-16

mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM流程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括javescript 写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。

git开源项目地址：https://github.com/jgraph/mxgraph
借鉴资料 http://www.cnblogs.com/shawWey/p/7116548.html
mxgraph核心文件介绍

这个js库包含8大块。mxClient这个js包含并动态导入了所有文件。当前版本信息存储在mxClient.VERSION。
editor编辑器包提供实现图编辑器所需的类。这个包中的主要类是mxEditor。
view视图和model模型包实现了由mxGraph表示的图形组件。它是一个mxGraphModel，包含mxcell，以及mxGraphView中缓存单元格的状态。根据mxStylesheet.样式表中定义的外观，使用mxcell渲染器来绘制单元格。撤销历史在mxUndoManager中实现。要在图上显示一个图标，可以使用mxCellOverlay。验证规则使用 mxMultiplicity进行定义。
handler处理程序、layout 布局和shape 形状包分别包含事件监听器、布局算法和形状。图形事件监听器包括mxRubberband进行框线选择、mxTooltipHandler用于工具提示和mxGraphHandle用于基本单元格修改。
mxCompactTreeLayout 实现了树布局算法，而shape 形状包提供了各种形状，它们是mxShape的子类。
util包提供了实用程序类，包括用于复制粘贴的mxClipboard、mxDatatransfer用于拖放的操作、mxConstants 用于键的和样式表的值、mxEvent和mxUtils用于跨浏览器事件处理和通用功能、用于国际化的mxResources和控制台输出的mxLog。

io包实现了一个通用的mxObjectCodec，用于将JavaScript对象转换为XML。最主要的类是mxCodec。mxCodecRegistry是定制codecs的全局注册表。

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();

创建画板的另一种方式

// 创建图的div
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '0px';
container.style.top = '0px';
container.style.right = '0px';
container.style.bottom = '0px';
document.querySelector('.Highlight').appendChild(container);
//在容器中创建图形
var graph = new mxGraph(container);

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_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);
 //v1这个节点单独样式使用
var v1 = graph.insertVertex(parent, null, "text1", 50, 50, 200, 200, "style1");

1 2	//公共使用样式 graph.getStylesheet().putDefaultVertexStyle(style);

3 创建线的默认连接样式

style = [];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
// 边框颜色
style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
// 文字水平方式
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
// 文字垂直对齐
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
// 字体大小
style[mxConstants.STYLE_FONTSIZE] = '10';
graph.getStylesheet().putDefaultEdgeStyle(style);

//连接线，连接线上显示的内容，连接的两个节点，连接线的样式
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');

一些常用的方法

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")

insertEdge 连线

1
2
3

//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 , "");

添加按钮和对按钮进行操作

// 添加修改背景颜色按钮
  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]);
     }
 }));

一些代码功能

// 开启可以拖拽建立关系
 graph.setConnectable(true);
 // 开启方块上的文字编辑功能
 graph.setCellsEditable(false);
 // 启用对齐线帮助定位
 mxGraphHandler.prototype.guidesEnabled = true;
 // 选择基本元素开启
 graph.setEnabled(true);
 //开启提示
 graph.setTooltips(true);

创建不同的形状盒子

// 画方块 默认情况下
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;");

cmd-markdown-logo

mxgraph核心文件介绍