Mxgraph一些基础功能 | 我的技术博客

mxGrap API

1	graph.getSelectionCell()

多选的时候会将cell数据放到一个数组当中、例如选中三个数据[mxcell,mxcell,mxcell]

1 2	//获取所有被选择的元素 graph.getSelectionCells()

返回所选择所有cells的所有信息

1	graph.getSelectionModel()

设置选中节点cell

1	graph.setSelectionCell(v1);

一些功能

graph.setEnabled(false);//对图形进行拖拽拉伸等操作
graph.setCellsResizable(false); //节点不可改变大小
mxGraphHandler.prototype.setMoveEnabled(true); //是否可以移动
mxGraphHandler.prototype.guidesEnabled = true; //显示细胞位置标尺
graph.setCellsMovable(false);//禁止拖拽流程图

/*禁用节点双击，防止改变数据 */
　　graph.dblClick = function (evt, cell) {
　　　　var model = graph.getModel();
　　　　if (model.isVertex(cell)) {
　　　　　　return false;
　　　　}
　　};

按钮事件API

// 居中缩放
graph.centerZoom = true;
//禁用浏览器默认的右键菜单栏
mxEvent.disableContextMenu(container);
//选中全部盒子和线
graph.selectAll();
//选中所有盒子
graph.selectVertices()
//选中所有的线
graph.selectEdges();
//取消选中的元素
graph.clearSelection();
//放大图形
graph.zoomIn();
//缩小图形
graph.zoomOut();
//还原
graph.zoomActual();
//选择一个盒子
graph.selectCell()
//取消全部选择
document.querySelector('.removeSelectAll').onclick = function(){
   var cells = graph.getSelectionCells();
   graph.removeSelectionCells(cells);
};

鼠标平移

//可以点击背景进行平移流程图 鼠标左右键都可以
graph.setCellsMovable(false);
graph.setAutoSizeCells(true);
graph.setPanning(true);
graph.centerZoom = false;
graph.panningHandler.useLeftButtonForPanning = true;

添加点击多选事件

graph.addListener(mxEvent.CLICK, function(sender, evt) {
              var cell = evt.getProperty('cell');
              //判断是否为线
              var line = graph.isLabelMovable(cell)
              if (cell != null && line != true)
              {
                  if(graph.isCellSelected(cell)){
                      graph.removeSelectionCell(cell)
                      graph.removeCellOverlays(cell);

                  } else {
                      graph.addSelectionCell(cell)
                      var overlay = new mxCellOverlay(
                              new mxImage('images/overlays/check.png', 16, 16),
                              'Overlay tooltip');
                      // 在图形中覆盖
                      graph.addCellOverlay(cell, overlay);
                  }
              }
          });

返回选择节点信息 graph.getSelectionModel()

var ids = [];
var selectCell = graph.getSelectionModel();
console.log(selectCell)
for(var i = 0;i<selectCell.cells.length; i++){
    ids.push(selectCell.cells[i].value);
    //console.log(a.cells[i].value)
}
var b = ids.join(',')
console.log(b)

预览时鼠标悬浮到节点时，改变鼠标样式

graph.getCursorForCell = function(cell){
    if (cell != null && cell.value != null && cell.vertex ==1 ){
           return 'pointer';
    }
}

删除所有选择的节点cells

// 获取所有被选择的元素
var cells = graph.getSelectionCells()
//删除所有选择
graph.removeSelectionCells(cell)

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置： jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true