在 KineticJS 中拖动形状/组时突出显示可能的放置目标答案

【问题标题】：Highlight a possible drop target while dragging a shape/group in KineticJS在 KineticJS 中拖动形状/组时突出显示可能的放置目标
【发布时间】：2012-07-03 14:46:24
【问题描述】：

我正在使用 KineticJS 来实现图形编辑器。我想拖动一个 KineticJS 组并将其放入另一个形状。到目前为止一切顺利，完成将“dropend”事件绑定到组中的处理程序。但是我想在拖动过程中将颜色更改为潜在的目标形状，同时将其悬停在它上面，以证明它是适合放置的形状。我看不到这样做的方法，也无法在 Kinetic 文档中找到任何帮助。我该怎么办？

谢谢，非洲经委会

【问题讨论】：

标签： drag-and-drop mouseover kineticjs

【解决方案1】：

咕哝了几句，我想我找到了解决办法：

  var aShape = new Kinetic.Shape(...);
  :
  aShape.on("dragmove", function(evt) {

    // Detect shapes under mouse position
    var pos = aShape.getStage().getUserPosition(evt);
    var collidingShapes = aShape.getStage().getIntersections(pos);
    :
    // If needed, filter out colliding shapes not suitable for drop
    :
    // Highlight drop target candidates, e.g. simulating a "mouseover"
    for (var iTarget = 0; iTarget < collidingShapes.length; ++iTarget)
        collidingShapes[iTarget].simulate("mouseover");

    // If you need to remove highlighting, keep track of previously
    // highlighted shapes and call simulate("mouseout") on those
    // not currently in the candidates set.
  });

【讨论】：

只是一个想法，但为了避免这可能会占用大量 cpu，使用 setInterval 来检查交叉点怎么样。使用鼠标悬停只是用 setInterval 更新共享变量。这样，您可以确保函数每次运行时都有正确的数据，但也可以将其降低到更平滑的刷新率。在 dragend 上，只需 clearInterval。

【解决方案2】：

虽然你所做的实际上是有效的，但我发现它很慢。我所做的，是替换 kineticjs (v4.0.1) 的第 3142 行：

else if(this.targetShape && !go.drag.moving)

与

else if (this.targetShape)

它就像一个魅力。 mouseout 和 mouseover 事件现在被触发。
无论如何，我不知道为什么，但是舞台对象的一个属性（shaperagging 左右）指向了一个潜在的目标，但它已经被删除了。

【讨论】：