怎么修改mxGraph的连线操作

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 键点击鼠标时,即可触发连线功能。

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632