drag-and-drop - 在 KineticJS 中拖动形状/组时突出显示可能的放置目标

Question

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

谢谢，埃卡

Answer 1

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

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

和

else if (this.targetShape)

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

Answer 2

经过一番喃喃自语，我想我找到了解决方案：

  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.
  });