mxGraph原连线方法是点击cell中间,再点击到其他cell实现建立连线。我想更改他的连线方法为按住ctrl键点击鼠标就能触发连线功能
您可以通过以下步骤更改mxGraph的连线方法:
找到mxGraph中处理连接的代码,一般是在Graph.js文件中的mxGraph.prototype方法中。
修改 mxGraph.prototype.connectionHandler.createTargetVertex 方法,添加判断 ctrl 键的代码,如下所示:
```javascript
// 判断是否按下ctrl键
if (mxEvent.isControlDown(evt)) {
var point = mxUtils.convertPoint(this.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));
// 在点击位置处创建一个目标节点
target = this.createVertex(point.x, point.y, this.connectionHandler.targetConnectImage);
// 设置目标节点的类型为允许作为端点连接的类型,否则无法作为端点连接
target.vertexType = this.connectionHandler.targetVertexDropTarget.vertexType;
// 刷新目标节点
target = this.add(target);
}
修改 mxGraph.prototype.connectionHandler.selectCells 方法,添加判断 ctrl 键的代码,如下所示:
```javascript
if (this.first != null && ((this.isAllowableSource(this.first) && this.isAllowableTarget(cell)) || this.isUnset(this.previous))) {
// 判断是否按下ctrl键,ctrl键按下时不清空之前的连线
if (!mxEvent.isControlDown(evt)) {
this.clear();
}
this.connect(this.first, cell, evt, this.previous);
// 设置前一个连线的状态
this.previous = this.edgeState;
}
在需要启用此功能的地方添加监听器,例如:
graph.addMouseListener(
{
mouseDown: function(sender, evt)
{
if (mxEvent.isControlDown(evt)) {
graph.connectionHandler.start(sender, evt);
}
},
mouseMove: function(sender, evt)
{
if (graph.connectionHandler.isActive())
{
graph.connectionHandler.drag(sender, evt);
mxEvent.consume(evt);
}
},
mouseUp: function(sender, evt)
{
if (graph.connectionHandler.isActive())
{
graph.connectionHandler.stop(sender, evt);
mxEvent.consume(evt);
}
}
});
这样,用户按住 ctrl 键点击鼠标时,即可触发连线功能。
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!