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", , , , );
            graph.insertVertex(parent, null, "text2", , , , );
            graph.insertVertex(parent, null, "text3", , , , );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] = ;
        // 字体颜色
        style[mxConstants.STYLE_FONTCOLOR] = '#FFFF00';
        // 文字水平方式
        style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
        // 文字垂直对齐
        style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
        // 字体大小
        style[mxConstants.STYLE_FONTSIZE] = ;
        // 底图水平对齐
        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] = ;
        // 背景图片高
        style[mxConstants.STYLE_IMAGE_HEIGHT] = ;
        // 上间距设置
        // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
        style[mxConstants.STYLE_SPACING_TOP] = ;
        // 四边间距设置
        style[mxConstants.STYLE_SPACING] = ;
        // 把定义好的样式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, '第一个盒子', , , , ,"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, );
        });
        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 -  ) + "px";
        container.style.overflow = "hidden";
        var graph = new mxGraph(container);
        var parent = graph.getDefaultParent();
        // 画方块 默认情况下
        graph.insertVertex(parent, null, '矩形', , , , );
        // 画方块 圆角矩形
        // shape=rounded 定义圆角  arcSize=10 定义圆角弧度
        graph.insertVertex(parent, null, '圆角矩形', , , , , "rounded=true;perimeter=ellipsePerimeter;arcSize=20;");
        // 画椭圆
        // shape=elipse 定义椭圆  perimeter=ellipsePerimeter 让连线的箭头或起点触到边缘
        graph.insertVertex(parent, null, '椭圆', , , , , "shape=ellipse;perimeter=ellipsePerimeter;");
        // 画三角形
        // shape=triangl 定义三角形  perimeter=ellipsePerimeter 让连线的箭头或起点触到边缘 direction=south 让三角形倒立
        graph.insertVertex(parent, null, '三角形', , , , , "shape=triangle;perimeter=ellipsePerimeter;direction=south;");
        // 画菱形
        // shape=rhombus 定义菱形
        graph.insertVertex(parent, null, '三角形', , , , , "shape=rhombus;perimeter=ellipsePerimeter;");
        // 画柱形
        // shape=cylinder 定义柱形
        graph.insertVertex(parent, null, '柱形', , , , , "shape=cylinder;perimeter=ellipsePerimeter;");
        // 画人
        // shape=actor 定义演员
        graph.insertVertex(parent, null, '演员', , , , , "shape=actor;perimeter=ellipsePerimeter;");
        // 画云
        graph.insertVertex(parent, null, '云', , , , , "shape=cloud;perimeter=ellipsePerimeter;");
　　　　　//矩形默认情况下
        graph.insertVertex(parent, null, '矩形', , , , , "shape=rectangle;perimeter=ellipsePerimeter;");
　　　　 //泳道
        graph.insertVertex(parent, null, '泳道', , , , , "shape=swimlane;perimeter=ellipsePerimeter;");
　　　　  //双圆
        graph.insertVertex(parent, null, '双圆', , , , , "shape=doubleEllipse;perimeter=ellipsePerimeter;");
　　　　 //六边形
        graph.insertVertex(parent, null, '六边形', , , , , "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(,)+","+randint(,)+","+randint(,)+")";
                        };

                        var style = "fillColor=" + randColor() + "; fontColor=" + randColor();
                        var width = randint(, );
                        var height = randint(, );
                        var x = randint(,  - width);
                        var y = randint(,  - 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, , 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=; i<cells.length; i++){
                            var x = randint(,  - cells[i].geometry.width);
                            var y = randint(,  - 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());