【主题】:mxgraph基础知识-1

仅供参考,不对的地方或者有更好的方法可以修正

判断浏览器兼容性

 if (!mxClient.isBrowserSupported()) {
            // Displays an error message if the browser is not supported.
            mxUtils.error('您当前浏览器不支持此组件!', 200, false);
  }else {
        ....正文
   }

常用的全局属性配置[graph.setXXXX(bool)]

// j禁用浏览器右键菜单
mxEvent.disableContextMenu(container);
//添加框选
new mxRubberband(graph);
//细胞可以克隆
graph.setCellsCloneable(true); 
//是否允许线悬吊着,摆动不定
graph.setAllowDanglingEdges(false);
//禁止放大缩小
graph.setCellsResizable(false);
//禁用折叠
graph.foldingEnabled = false;
// 启用工具提示、新连接和平移
graph.setPanning(true);
// 开启鼠标悬停提示
graph.setTooltips(true);
//设置可连接性
graph.setConnectable(true);
graph.setMultigraph(false);
//去锯齿效果
mxRectangleShape.prototype.crisp = true;
// 是否启用对齐线帮助定位
mxGraphHandler.prototype.guidesEnabled = true;
//定义对齐线颜色
mxConstants.GUIDE_COLOR = "#00A3D9"; 
// 是否缩放网格
// mxGraphHandler.prototype.scaleGrid = true;
// 是否开启旋转
mxGraphHandler.prototype.rotationEnabled = false;

// 选择基本元素开启
graph.setEnabled(true);
// 开启文字编辑功能
graph.setCellsEditable(true);
//开启回车退出编辑
graph.setEnterStopsCellEditing(true);
// 鼠标悬浮在节点上显示浮动框
new mxCellTracker(graph, '#8BF19F');

常用方法

//根据ID获取cell
graph.getModel().getCell(uuid)

属性重定义方法[graph.isXXX(function(cell){})]

// 重定义哪些cell锁定
graph.isCellLocked = function(cell) { //锁定连线,不可随意拖动
    //					if (graph.getModel().isEdge(cell)) {
    //					return true;
    //				}else{

    return false;
    //}

};
//重定义哪些cell可以移动
graph.isCellMovable = function(cell) {
    if(cell.type && cell.type == "taskType") {
        return false;
    } else {
        return true;
    }
};
//获取当前选中的cell
var cell = graph.getSelectionCell();
if (cell == null) {
    // Ext.Msg.alert('没有选择图形元素'); //'没有选择图形元素!'
    return;
}
var objId = cell.getId();  //元素ID
var enc = new mxCodec();
var node = enc.encode(cell); //解析为DOM对象时自定义属性才可以识别
var nodetype = node.getAttribute('nodetype'); //取节点类型,如果是线则为空
var source = node.getAttribute('source');  //取线的来源节点ID,如果是节点则值为空

// var config = mxUtils.getXml(node);
// 新窗口打开
mxUtils.popup(mxUtils.getXml(node));
// }

添加监听事件的方法

graph.addMouseListener(mxEvent.MOUSE_DOWN,function () {
       alert(1111);
});

//设置节点的鼠标移入手型移出鼠标指示效果
var track = new mxCellTracker(graph);
track.mouseMove = function (sender, me) {
    var cell = this.getCell(me);
    if (cell) {
        //设置鼠标为样式为手状
        me.getState().setCursor('pointer');
        // updateStyle(cell, true);
    } else {
        // updateStyle(cell, false);
    }
};
//最常用的监听点击事件的
graph.addListener(mxEvent.CLICK, function (sender, evt) {
    var cell = evt.getProperty('cell');
    if (!cell) return false;

    console.log('我点击了节点哦!');
    console.log(cell);
    var enc = new mxCodec();
    var node = enc.encode(cell);
    console.log(node);
});
//监听鼠标按下,移动,抬起事件
 graph.addMouseListener({
    mouseDown: function (sender, me) {
        console.log('mouseDown');
    },
    mouseMove: function (sender, me) {
        // console.log('mouseMove');
    },
    mouseUp: function (sender, me) {
        console.log('mouseUp');
    },
    dragEnter: function (evt, state) {
        console.log('dragEnter');
        // if (state != null) {
        //     this.previousStyle = state.style;
        //     state.style = mxUtils.clone(state.style);
        //     updateStyle(state, true);
        //     state.shape.apply(state);
        //     state.shape.redraw();
        //
        //     if (state.text != null) {
        //         state.text.apply(state);
        //         state.text.redraw();
        //     }
        // }
    },
    dragLeave: function (evt, state) {
        console.log('dragLeave');
        // if (state != null) {
        //     state.style = this.previousStyle;
        //     updateStyle(state, false);
        //     state.shape.apply(state);
        //     state.shape.redraw();
        //
        //     if (state.text != null) {
        //         state.text.apply(state);
        //         state.text.redraw();
        //     }
        // }
    },
    dragover: function (evt, state) {
        console.log('dragover');
    },
    drop: function (evt, state) {
        console.log('drop');
    }
});

graph.addListener({
    dragover: function (evt, state) {
        console.log('dragover');
    },
    drop: function (evt, state) {
        console.log('drop');
    }
});
mxEvent.addListener(container, 'dragover', function (evt) {
    if (graph.isEnabled()) {
        evt.stopPropagation();
        evt.preventDefault();
    }
});
mxEvent.addListener(container, 'drop', function (evt) {
    if (graph.isEnabled()) {
        evt.stopPropagation();
        evt.preventDefault();

        // Gets drop location point for vertex
        var pt = mxUtils.convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));
        var tr = graph.view.translate;
        var scale = graph.view.scale;
        var x = pt.x / scale - tr.x;
        var y = pt.y / scale - tr.y;

        console.log(x);
        console.log(y);
        console.log(event);
        // Converts local images to data urls
        var filesArray = event.dataTransfer.files;
        console.log(filesArray);
        // for (var i = 0; i < filesArray.length; i++) {
        //     handleDrop(graph, filesArray[i], x + i * 10, y + i * 10);
        // }
    }
});

定义默认样式以及样式类

//默认VertexStyle
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
style[mxConstants.STYLE_FONTSIZE] = '11';
style[mxConstants.STYLE_FONTSTYLE] = 0;
graph.getStylesheet().putDefaultVertexStyle(style);

var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_OPACITY] = 50;
style[mxConstants.STYLE_FONTCOLOR] = '#774400';
graph.getStylesheet().putCellStyle('ROUNDED', style);

//本节点
thisPointStyle = mxUtils.clone(style);
thisPointStyle["image"] = 'resources/images/graph/thisPoint.png';
thisPointStyle["fontSize"] = '16';
thisPointStyle["fontColor"] = '#fff';
thisPointStyle['constituent'] = "1";
thisPointStyle["verticalLabelPosition"] = "middle";
thisPointStyle["verticalAlign"] = "middle";
thisPointStyle["spacingTop"] = "4";

thisPointStyle["align"] = "center";
graph.getStylesheet().putCellStyle("thisPointStyle", thisPointStyle);
//节点状态
statusPointStyle = mxUtils.clone(style);
statusPointStyle['constituent'] = "1";
statusPointStyle["image"] = 'resources/images/graph/status-normal.png';
graph.getStylesheet().putCellStyle("statusPointStyle", statusPointStyle);
//添加数据节点
addDataPointStyle = mxUtils.clone(style);
addDataPointStyle["image"] = 'resources/images/graph/addDataPoint.png';
addDataPointStyle["imageWidth"] = '64';
addDataPointStyle["imageHeight"] = '64';
addDataPointStyle["fontColor"] = '#00A3D9';
//默认线条样式
edgeStyle = graph.getStylesheet().getDefaultEdgeStyle();
edgeStyle["rounded"] = true;
edgeStyle["shape"] = "connector";
edgeStyle["strokeWidth"] = 1;
edgeStyle["strokeColor"] = "#2C9C39";


MQEdgeStyle = mxUtils.clone(edgeStyle);
MQEdgeStyle["edgeStyle"] = 'elbowEdgeStyle';
MQEdgeStyle["startArrow"] = 'oval';
//MQEdgeStyle["endArrow"] = 'block';
MQEdgeStyle["endArrow"] = 'oval';
MQEdgeStyle["startFill"] = 0;
MQEdgeStyle["endFill"] = 0;
MQEdgeStyle["entryX"] = 0;
MQEdgeStyle["entryY"] = 0.5;
MQEdgeStyle["exitX"] = 1;
MQEdgeStyle["exitY"] = 0.5;
graph.getStylesheet().putCellStyle("MQEdgeStyle", MQEdgeStyle);

画图

 var parent = graph.getDefaultParent();
    //Adds cells to the model in a single step
    graph.getModel().beginUpdate();
    try {
        var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
        var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
        var e1 = graph.insertEdge(parent, null, '', v1, v2);
         //画方块 默认情况下
        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;");
    }finally {
        // Updates the display
        graph.getModel().endUpdate();
    }

 

 
 发表评论     发表时间:『2019-02-15 20:28:45』


扫描二维码关注网站最新动态