Mxgraph使用總結二

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

createVertex = function(){
            var container = document.getElementById("main");
            var graph = new mxGraph(container);
            var parent = graph.getDefaultParent();

            // 開啟拖拽選擇
            new mxRubberband(graph);    

            v1 = graph.insertVertex(parent, null, "text1", 100, 200, 100, 100);
            graph.insertVertex(parent, null, "text2", 250, 200, 100, 100);
            graph.insertVertex(parent, null, "text3", 400, 200, 100, 100);return graph;
        };

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] = 'http://imgstatic.baidu.com/img/image/shouye/qizhi0822.jpg';
        // 背景圖片寬 
        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);
        //樣式使用
　　     var v1 = graph.insertVertex(parent, null, "text1", 50, 50, 200, 200, "style1"); 

3、一些常用的方法

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

3.2 insertEdge 連線

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

3.3 addCellOverlay 添加告警

        // 開啟提示
        graph.setTooltips(true);

        // 移出報警
        var delOverlay = function(id){
            // 獲取ID單元
            var cell = graph.getModel().getCell(id);
            // 修改有報警物體的樣式
            graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, "#CCCCCC", [cell]);
            graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, "#000000", [cell]);
            // 移除告警
            graph.removeCellOverlays(cell);
        };

        // 給物體添加報警
        var addOverlay = function(id, state){
            // 獲取ID單元
            var cell = graph.getModel().getCell(id);
            // 修改有報警物體的樣式
            graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, "#FF0000", [cell]);
            graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, "#FFFFFF", [cell]);
            // 添加告警
            graph.addCellOverlay(cell, createOverlay(graph.warningImage, '狀態: '+state));
        };

        // 創建告警信息
        var createOverlay = function(image, tooltip){
            //function mxCellOverlay(image,tooltip,align,verticalAlign,offset,cursor)
            //image圖片，tooltip提示，align位置，verticalAlign豎直位置
            var overlay = new mxCellOverlay(image, tooltip);
            overlay.addListener(mxEvent.CLICK, function(sender, evt){
                mxUtils.alert(tooltip);
            });            
            return overlay;
        };

3.4 添加按鈕

        // 添加按鈕
        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]);
            }
        }));

3.5 縮放操作

        // 居中縮放
        graph.centerZoom = true;
        // 放大按鈕
        document.body.appendChild(mxUtils.button('放大 +', function(evt){
            graph.zoomIn();    
        }));
        // 縮小按鈕
        document.body.appendChild(mxUtils.button('縮小 -', function(evt){
            graph.zoomOut();    
        }));
        // 還原按鈕
        document.body.appendChild(mxUtils.button('還原 #', function(evt){
            graph.zoomActual();
            graph.zoomFactor = 1.2;
            input.value = 1.2;
        }));
        var input = document.createElement("input");
        input.type = "text";
        input.value = graph.zoomFactor;
        input.addEventListener("blur", function(){
            graph.zoomFactor = parseFloat(this.value, 10);                
        });
        document.body.appendChild(input);

3.6 拖拽連線操作

　　     // 開啟可以拖拽建立關系
        graph.setConnectable(true);
        // 開啟方塊上的文字編輯功能
        graph.setCellsEditable(false);
        // 啟用對齊線幫助定位
        mxGraphHandler.prototype.guidesEnabled = true;
        // 選擇基本元素開啟
        graph.setEnabled(true);

3.7 圖形形狀介紹

        var container = document.getElementById("main");
        container.style.background = 'url(editors/images/grid.gif)';
        container.style.width = "100%";
        container.style.height =  (window.screen.availHeight - 90 ) + "px";
        container.style.overflow = "hidden";
        var graph = new mxGraph(container);
        var parent = graph.getDefaultParent();

        // 畫方塊 默認情況下
        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;");

 

3.8 查看圖形的xml

    document.body.appendChild(mxUtils.button('View XML', function()
          {
             var encoder = new mxCodec();
             var node = encoder.encode(graph.getModel());
             mxUtils.popup(mxUtils.getPrettyXml(node), true);   //以窗口的方式展示處理
          })); 

3.9 工具欄常用操作

        buttons = [
            {
                label : "選擇所有",
                fun : function(graph){
                    return function(evt){    
                        graph.selectAll();    
                    };
                }
            },
            {
                label : "選擇一個",
                fun : function(graph){
                    return function(evt){    
                        graph.selectCell();    
                    };
                }
            },
            {
                label : "取消選擇",    
                fun : function(graph){
                    return function(evt){
                        var cells = graph.getSelectionCells();    
                        graph.removeSelectionCells(cells);                            
                    };
                }
            },
            {
                label : "隨機添加",    
                fun : function(graph){
                    return function(evt){
                        var randColor = function(){
                            return "rgb("+randint(0,255)+","+randint(0,255)+","+randint(0,255)+")";    
                        };
                        
                        var style = "fillColor=" + randColor() + "; fontColor=" + randColor();
                        var width = randint(50, 300);
                        var height = randint(50, 300);
                        var x = randint(0, 1200 - width);
                        var y = randint(0, 600 - height);

                        graph.insertVertex(graph.getDefaultParent(), null, "隨機添加", x, y, width, height, style);
                    };    
                }
            },
            {
                label : "分組所選",
                fun : function(graph){
                    return function(evt){
                        var cells = graph.getSelectionCells();
                        graph.groupCells(null, 1, cells);
                    };
                }
            },
            {
                label : "取消分組",
                fun : function(graph){
                    return function(evt){
                        var cells = graph.getSelectionCells();
                        graph.ungroupCells(cells);
                    };
                }
            },
            {
                label : "刪除所選",
                fun : function(graph){
                    return function(evt){
                        var cells = graph.getSelectionCells();
                        graph.removeCells(cells);
                    };
                }
            },
            {
                label : "縮小",
                fun : function(graph){
                    return function(evt){
                        graph.zoomOut();
                    };
                }
            },
            {
                label : "放大",
                fun : function(graph){
                    return function(evt){
                        graph.zoomIn();
                    };
                }
            },
            {
                label : "還原",
                fun : function(graph){
                    return function(evt){
                        graph.zoomActual();
                    };
                }
            },
            {
                label : "隨機所選元素的位置",
                fun : function(graph){
                    return function(evt){
                        var cells = graph.getSelectionCells();
                        for(var i=0; i<cells.length; i++){
                            var x = randint(0, 1200 - cells[i].geometry.width);        
                            var y = randint(0, 600 - cells[i].geometry.height);        
                        }
                        graph.moveCells([cells[i]], x , y);                        
                    };
                }
            }

        ]; 

3.10 將圖形的xml進行回顯

var xml=
'<mxGraphModel>                                                                                             '+           
'  <root>                                                                                                                                          '+
'    <mxCell id="0"/>                                                                                                                              '+
'    <mxCell id="1" parent="0"/>                                                                                                                   '+
'    <app appId="" appName="" protocol="" ip="" port="" context="" heartBeatUrl="" id="2">                                                         '+
'      <mxCell style="verticalLabelPosition=top;verticalAlign=bottom;shadow=1;fillColor=#FFFFFF" vertex="1" connectable="0" parent="1" type="app"> '+
'        <mxGeometry x="100" y="320" width="20" height="40" as="geometry"/>                                                                        '+
'      </mxCell>                                                                                                                                   '+
'    </app>                                                                                                                                        '+
'  </root>                                                                                                                                         '+
'</mxGraphModel>                                                                                                                                   ';
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());