关于mxGraph的学习小结

使用mxGraph的过程，也是学习的过程。刚开始甚至还番羽羽出去到stack overflow中提问题 至今也没人回答

一、个人理解: 在页面中应用mxGraph，主要有5个方法（方法名可以自定义，作用大致相同）：

1.main(container) --声明graph的方法，大部分是固定写法

2.initGraph(param) --根据czlcGraph方法生成的节点加载进页面的方法，大部分是固定写法

3.initImages() --加载需要的图片，大部分是固定写法

4.czlcGraph() --根据业务需求，创建节点。自主方法

5.click_sj(cell) --根据业务需求，创建点击事件。自主方法

当然还有一些其他业务上的方法，比如页面加载时的查询方法、权限方法等等在此就不说了。

二、每个方法以在vue中的写法举例，jsp中写法类似

1.main(container)

container是盛放展示的div，用getElementById获得。

fun_main(container){
        var graph;
        let _this = this;
        if (!mxClient.isBrowserSupported()){
          mxUtils.error('浏览器不支持!', 200, false);
        }
        else{
          if (mxClient.IS_IE){
            new mxDivResizer(container);
          }
          graph = new mxGraph(container);
          graph.setEnabled(false);
          graph.addListener(mxEvent.CLICK, function(sender, evt){
            var cell = evt.getProperty('cell');
            if (cell != null){
              _this.click_sj(cell);//在此加载5.click_sj()的点击方法
            }
          });
          var track = new mxCellTracker(graph,'withe');
          track.mouseMove = function(sender,me){
            var cell = this.getCell(me);
            if(cell != null){
              //_this.move_sj(cell,me);
            }
          };
          var styles = graph.getStylesheet().getDefaultVertexStyle();
          //styles[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
          styles[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
          styles[mxConstants.STYLE_GRADIENTCOLOR] = 'none';
          styles[mxConstants.STYLE_FILLCOLOR] = 'none';
          styles[mxConstants.STYLE_IMAGE_WIDTH] = 120;
          styles[mxConstants.STYLE_IMAGE_HEIGHT] = 34;
          styles[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
          styles[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
          styles[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
          styles[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
          styles[mxConstants.STYLE_FONTCOLOR] = 'white';
          styles[mxConstants.STYLE_STROKECOLOR] = 'none';

          styles[mxConstants.STYLE_SPACING_TOP] = '40';
          styles[mxConstants.STYLE_SPACING_BOTTOM] = '0';
          styles[mxConstants.STYLE_LABEL_PADDING] = '0';
          styles[mxConstants.STYLE_NOEDGESTYLE] = true;
          this.graph = graph;
          this.initImages();//此方法是3.initImages()的执行方法
        }

      }

此方法主要是对container生成一张画布。其中引入3.initImages()、5.click_sj()方法。相当于在画布中预先加载好要显示的图片和点击方法。

2.initGraph(param)

param是在4.czlcGraph()中生成的需要显示的节点对象。因此czlzGraph方法需要在此方法之前执行

initGraph(param){		
        var graph = this.graph;//此时就需要用到在1.main(container)中生