mxGraph样例学习二
金蝶云社区-雪獒
雪獒
0人赞赏了该文章 1462次浏览 未经作者许可,禁止转载编辑于2017年09月16日 17:08:27

一、其他功能(续)
1、节点Tooltip
可以使用 graph.setTooltips(true); 开启tooltip功能,当鼠标放到节点或线上的时候就会显示提示信息,效果如下:


也可以重写 graph.getTooltipForCell 方法,自定义tooltip显示:
graph.getTooltipForCell = function(cell){
if(this.model.isEdge(cell)){
return this.convertValueToString(this.model.getTerminal(cell, true))
+ " --> " +
this.convertValueToString(this.model.getTerminal(cell, false));
}
return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
};

上面对线的tooltip做了修改,线的tooltip显示为:源节点-->目标节点,效果如下:

2、使用相对位置定位节点
var v3 = graph.insertVertex(parent, null, 'Hello World!', 95, 100, 110, 40);
v3.setConnectable(false);
var v31 = graph.insertVertex(v3, null, '♥', 1, 1, 20, 20);
v31.geometry.offset = new mxPoint(-10, -10);
v31.geometry.relative = true;

上面的代码在画布上插入一个"Hello World" 的节点,同时又给该节点添加了一个不允许连接的子节点,并定位到右下角。效果如下:

3、禁止拖动线的label
默认情况下线的label是可以拖动的,可以使用以下代码禁止拖动线的label:
graph.edgeLabelsMovable = false;

4、鼠标划过时高亮显示
可以通过代码: new mxCellTracker(graph, '#00FF00'); 添加对线和节点在鼠标划过时的高亮效果。
mxCellTracker(graph, color, funct)的第三个参数是可选的,如果设置了funct则需要在此函数中重写getCell逻辑。
高亮效果如下图所示:

5、开起“指引”功能
可以使用代码:mxGraphHandler.prototype.guidesEnabled = true; 开起“指引”功能,即在拖动节点时会有对齐等的提示。效果如下:

6、右键菜单
可以使用以下代码禁止弹出浏览器的右键菜单:
mxEvent.disableContextMenu(container);
也可以通过重写 graph.popupMenuHandler.factoryMethod 方法自定右键菜单:
function createPopupMenu(graph, menu, cell, evt){
if(cell != null){
//节点上右击
menu.addItem('节点菜单项', 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/37/moren_chongjing_org.png', function(){
mxUtils.alert('Hello Cell!');
});
}else{
//图象上右击
menu.addItem('画布菜单项', 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_org.gif', function(){
mxUtils.alert('Hello Canvas!');
});
}
//添加分隔线
menu.addSeparator();
menu.addItem('通用菜单项', 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif', function(){
mxUtils.alert(graph.getSelectionCount());
});
}

graph.popupMenuHandler.factoryMethod = function(menu, cell, evt){
return createPopupMenu(graph, menu, cell, evt);
};

上面的代码自定义了创建菜单的方法,对在节点上右击还是在画布上右击的菜单项做了不同的显示和回调处理。效果如下: