Question

所以，我想在kineticjs的帮助下创建一个有限状态机 - 可视化器/编辑器，并且我绊倒了以下场景：

我有两个＆＃34;节点＆＃34;，让我们说在我的舞台上可以拖动的圆形对象（用标签分组）。现在我不想点击一个圆圈，按住鼠标并移动它，并在两个形状之间添加一个连接（箭头，为了简单起见）。

所以如果有任何关于如何实现这一目标的提示我会很高兴我还没有找到解决方案。

指定它：节点本身应保持可拖动状态。我的想法是：添加一个黑色圆圈和一个半径略小的白色圆圈，将它们分组。然后在dragstart白色圆圈上 - ＆gt;拖动节点，在dragstart黑色圆圈上 - ＆gt;画箭头。

问题是如何从一个形状开始绘制箭头并跟随鼠标移动到它的目标（可以是另一个nodegroup =＆gt;与该组的连接或舞台的空白点=＆gt;叠加打开，允许用户选择另一个节点来绘制或取消绘图。）

我希望这一点有点清楚。欲了解更多信息，请随时问我。

祝你好运，多米尼克

p.s。：这种行为似乎与lucidchart（dot com）在创建图表时所使用的行为完全相同，所以也许您可以在这里了解我想要更好地查看他们的演示：https://www.lucidchart.com/demo。

Answer 1

首先，为了简单起见，这里有一个关于如何使用鼠标和KineticJS绘制基本线的小提琴：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 或。

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

使用本教程学习如何将形状从1组移动到另一组：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')选择允许拖动的所有组，然后你可以遍历该数组并{{{ 1}}。

需要注意的另一点是，Line的X和Y坐标计算起来有点棘手，具体取决于它是否将Group作为父级或Layer。如果对线进行分组，则线的坐标将相对于组位置，否则线的坐标将相对于舞台（左上角）。

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

也许您可能希望在每个圆圈后面添加一个透明矩形（属性setDraggable()），以便在带有矩形的mousedown上，您将调用opacity: 0开始绘制一条线。否则，如果用户点击该圈子，则会拖动该群组。至少它具有与清晰图表应用程序类似的功能。

自定义命中功能（http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/）可能是一种更简洁的方法，但我不是100％使用自定义命中功能，其他人可能更清楚。

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

KineticJS：在两个形状之间绘制箭头

1 个答案: