Question

我正在使用KineticJS来实现图形编辑器。我想拖动一个KineticJS集团并将其放入另一个形状。到目前为止一直很好，将“dropend”事件绑定到组中的处理程序。但是我希望在拖动过程中将颜色转换为潜在的目标形状，以便证明它是适合掉落的形状。我无法看到这样做的方法，我无法在Kinetic文档中找到任何帮助。我该怎么办？

谢谢， ECA

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

Answer 2

虽然你所做的实际上是在工作，但我发现它很慢。我做的是取代kineticjs的第3142行（v4.0.1）：

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

与

else if (this.targetShape)

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

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

2 个答案: