javascript - KineticJS:在两个形状之间绘制箭头

Question

所以，我想在 kineticjs 的帮助下创建一个有限状态机可视化器/编辑器，但我遇到了以下情况:

我有两个“节点”，比如说可以在我的舞台上拖动的圆形对象(用标签分组)。现在我不想点击一个圆圈，按住鼠标并移动它并在两个形状之间添加一个连接(为简单起见，一个箭头)。

因此，如果能提供有关如何完成此操作的任何提示，那将是很棒的，因为我还没有找到解决方案。

具体说明:节点本身应该保持可拖动。我的想法是:添加一个黑色圆圈和一个半径稍小的白色圆圈，将它们分组。然后在 dragstart 白色圆圈 -> 拖动节点，在 dragstart 黑色圆圈 -> 绘制箭头。

问题是如何从一个形状开始绘制一个箭头并跟随鼠标到达它的目标(它可以是另一个节点组 => 连接到这个组或舞台的空白点 => 一个覆盖打开让用户选择另一个节点绘制或取消绘制)。

我希望这有点容易理解。如需更多信息，请随时问我。

最好的问候，多米尼克

p.s.:该行为似乎与 lucidchart (dot com) 在创建图表时使用的行为完全一样，所以也许您可以在此处查看他们的演示来更好地理解我想要实现的目标:https://www.lucidchart.com/demo .

Answer 1

首先，为了简单起见，这里有一个关于如何使用鼠标和 KineticJS 绘制基本线的 fiddle :http://jsfiddle.net/projeqht/fF3hh/

假设舞台上已经有两个圆圈，您需要画一条线将它们连接起来。

我们可以使用e.targetNode在每个事件(mousedown，mouseup)上选择节点，例如:

layer.on("mousedown", function (e) {
  var nodeDown = e.targetNode;
}

layer.on("mouseup", function (e) {
  var nodeUp = e.targetNode;
}

我们需要检查 nodeDown 的父级是否是 Kinetic.Group 或其他东西。

1. 如果目标节点 nodeDown 有一个 Kinetic.Group 作为父节点，我们可以使用这个 Group 来存储新行，以及第二个目标节点 nodeUp。
2. 如果目标节点 nodeUp 没有父节点的 Kinetic.Group，我们需要查看 nodeUp 是否有父节点的组。如果 nodeUp 有一个父节点的 Kinetic.Group，那么我们可以使用该组来存储新行和第一个目标节点 nodeDown。
3. 如果 nodeDown 或 nodeUp 都没有父级组，那么我们需要为它们创建一个新组并添加所有 3 个形状(2 个圆圈和一个行)到那个新组。

使用本教程了解如何将形状从一组移动到另一组:http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/

此外，如果您将一个形状从一个组移动到另一个组，您可能需要 remove() 或 destroy() 额外的组(如果不再需要) .

绘制线条时，您必须禁用拖动形状，以便您可以使用鼠标拖动和绘制。您可以通过执行与此类似的操作来做到这一点:

function stopDrag() {
  for (var i=0; i<layer.children.length; i++) {
    layer.children[i].setDraggable(false);
  }
}

function startDrag() {
  for (var i=0; i<layer.children.length; i++) {
      layer.children[i].setDraggable(true);
  }
}

这将使层的所有子层都可拖动和不可拖动，但您可能希望通过比 select layer.children 更具体来限制它。我喜欢在这里使用的一个技巧是将所有可拖动的组命名为“draggable_shapes”，然后使用 var draggableArray = stage.get('.draggable_shapes') 选择所有允许的组被拖动，然后你可以遍历该数组和 setDraggable()。

另一点需要注意的是，Line 的 X 和 Y 坐标计算起来有点棘手，这取决于它是否有一个 Group 作为父级或 Layer。如果 Line 被分组，则 line 的坐标将相对于 Group 位置，否则 Line 的坐标将相对于 Stage(左上角)。

这会让您开始连接一条线和两个不同的圆圈。如果您希望线条仅连接到圆圈的外缘，则由您来执行坐标逻辑。

也许你可能想在每个圆后面添加一个透明矩形(属性 opacity: 0)，这样在鼠标按下矩形时，你将调用 drawLine()开始画线。否则，如果用户单击圆圈，它将拖动该组。至少它具有与清晰图表应用程序类似的功能。

自定义命中函数 ( http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/ ) 可能是一种更简洁的方法，但我并不是 100% 使用自定义命中函数，其他人可能知道得更多。

如果您需要进一步的帮助，请告诉我。祝你好运!