mxgraph 搭建简单应用 主线描述、属性与方法的意思

使用前准备

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

  <script type="text/javascript">
          mxBasePath = 'javascript/src/';
  </script>

  //mxClient.js包含该类库的全部所需代码。
    <script type="text/javascript" src="/js/mxClient.js"></script>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

检查浏览器是否支持  

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); 
 
 
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

部分基础属性  

  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();
    }
  });
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

添加节点和连接线

  程序需要在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();
} 
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

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;');
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

获取画布中的所有元素

  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);
    }
  }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值