如何创建线连接mxGraph

Question

我正在尝试通过单击图像图标来创建线路连接，我已经使用 wires.html 示例进行了相同的尝试。但它不起作用。我正在使用与 mxGraph 的反应。如何实现这一点。有什么办法可以实现吗

mxEvent.addGestureListeners(
    img,
    mxUtils.bind(this, function(evt) {
      mxConnectionHandler.prototype.isStartEvent = function(me) {
        console.log("Here we have to start the line connection");
      };
    })
  );

我必须在绑定事件中启动线路连接。有没有什么办法解决这一问题。我试过了，但其中 none 有效。

我真的需要帮助。

图中Arrow Connection (Multiple points are not supported. Used for directly connecting source to target)工作正常。但是需要实现Line Connection(Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection).

请检查下面的URL例如

演示 URL：http://jithin.com/javascript/examples/contexticons.html

源代码URL：https://jsfiddle.net/fs1ox2kt/

在 Demo URL 中，单击单元格时将显示 4 个图标（删除、调整大小、移动、连接）。我已将 Delete 替换为 Line Connection 并将 Resize 替换为 Arrow Connection.请看一下。

Answer 1

我不确定我是否正确理解了你的问题，所以我回答了一些可能的问题：

我发现 hello world example 对于理解如何编写允许使用 mxGraph 创建和修改节点和连接的代码非常有帮助。
您的标签表明您正在使用 React。有趣的是，你没有提到 Redux-Saga as library. If you are not using it yet, you might want to have a look at the concept of reducers.
您的问题可能还与 mxGraph 线连接的特定行为有关:

when I click on the line connection hover icon it does not start from the cell.

查看 workflow example 时，当我想在任务框与另一个任务框之间画线或连接时，我没有看到任何悬停图标。我清楚地记得，我花了一段时间才弄清楚你必须点击源框，按住，然后拖到目标框上。
如果您的问题更多是关于悬停图标，那么您已经有另一个（未回答的）问题：adding connection handler on click hover icon not working mxGraph

编辑：我终于明白你图中的图标是悬停图标，所以你的问题有第5种解释：

问题描述：用户点击带有微芯片图标的橙色框，然后出现一些弹出菜单（您的悬停图标），然后用户应该选择通过单击项目的线型。各行的端点仍应为用户最初选择的任务框。

解决方案草图：已经在初始的点击事件中，您应该使用包含微芯片图标的框的坐标填充变量final_vertex点击的坐标，或相应的顶点 - 你的盒子。绘制所选连接时，必须确保选择此 final_vertex 作为终点，并将带有 lambda 图标的框作为初始顶点。换句话说，您至少需要两个事件 - 初始 onClick 和 onHoverItemClick。我对 mxGraph 不太熟悉，但我认为您无法使用单个事件处理程序解决问题。

如何创建线连接mxGraph

How to create a line connection mxGraph

javascript

mxgraph

jgraph

reactjs