mxGraph 學習筆記（一）

學習mxgraph一段時間了，列一些常用代碼段，於己於人都方便

 

設置節點在線上（即：線和元素重疊式，線被節點遮住）

graph.selectEdges();//選中所有的線
graph.orderCells(true);//使線在所有元素的底下
graph.clearSelection();//取消選中的元素

 

設置畫布背景圖片

var img = new mxImage(imageSrc,1280 ,1024);  // w:1280   h:1024
graph.setBackgroundImage(img);
graph.view.validate();

  

自定義ToolTip

graph.setTooltips(true);
graph.getTooltipForCell = function(cell){
    return "下級設備1:"+cell.downDevice1
               + "\n下級設備2: "+cell.downDevice2
     + "\n下級設備3: "+cell.downDevice3
     + "\n下級設備數: "+cell.downDeviceNum;
}

 

事件

//移動元素觸發事件
graph.addListener(mxEvent.CELLS_MOVED,function(sender, evt){
    //alert("CELLS_MOVED");
    var cell = evt.getProperty('cell');

    if(cell==null&&sender.graphHandler.cells!=null){
        cell = sender.graphHandler.cells[0];//保證cell有值，否則移動時cell
    }

    if(cell != null && cell.vertex == 1) {//代表鼠標點擊的是節點
        //alert("移動節點"+cell.id);
        cell.autoSaveNode = '1';//給cell節點增加一個自定義屬性,標識處於可保存狀態
    }
});

 

更新指定節點圖片，可配合ajax無刷新實現告警時自動閃爍

graph.getModel().beginUpdate();
try{
    for (var i = 0; i < nodelist.length; i++) {

        //alert(nodelist[i].deviceid+1);
        var cellId = nodelist[i].deviceid+1;
        var picUrl = "";
        //alert(cellId);
        if(nodelist[i].sr_alarmsum>0)  picUrl = "red.gif";
        else if (nodelist[i].sw_alarmsum >0)  picUrl = "orange.gif";
        var cell = graph.getModel().getCell(cellId);
        // Updates the cell color and adds some tooltip information
        if (cell != null) {
            graph.setCellStyles(mxConstants.STYLE_IMAGE, "image;image="+picUrl, [cell]);
        }
    }

} finally {
    graph.getModel().endUpdate();
    //alert("ol1");
}

 

設置畫布只能預覽，禁止拖動或點擊

graph.setEnabled(false);//graph只能預覽
graph.getCursorForCell = function(cell){//預覽時鼠標懸浮到節點時，改變鼠標樣式
    if (cell != null && cell.value != null && cell.vertex ==1 )
    {
           return 'pointer';
    }
};