如何让 Animate CC 识别拖放中的滴？

Question

我正在尝试使用影片剪辑元件在 Animate CC 中构建拖放交互。目标是让它在放置在放置区域时进行动画处理。我已经看到了，但还没有为此实现精灵 sheet，但这似乎是个好主意。

但是，我的问题更多是基于让它在发生掉落时识别掉落。在我得到这个之前，我无法测试 sprite sheet 的想法。我一直在看一堆像这样的教程，here, which is just editing this one 来处理 Animate CC 或其他对象中的符号。它让我明白了一点，但它在掉落时效果不太好。我可以很好地拾取可拖动对象，但即使我松开鼠标也无法让它离开鼠标。

dragger 是我试图拖动的动画符号（以防万一不明显）。

dragger.on("pressmove", function(evt){
    evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
    stage.update(evt);
 });

我认为这部分给我带来了麻烦：

//refuses to release. doesn't recognize it.
dragger.on("pressup", function(evt){    
    //lock position of thermometer and play stabby animation
    dragger.x = dragger.x;
    dragger.y = dragger.y;

    if(intersect(evt.currentTarget, this.targetRight)){    //Intersection testing for good
        alert("YAY you're right AND it works!");

    }else if(intersect(evt.currentTarget, this.targetWrong)){   //intersection Testing for bad
        alert("BOO its wrong, but YAY it works");
    }
    stage.update(evt);
});

然后是我的相交代码（用于检查它是否在放置区域上方）：

function intersect(obj1, obj2){ 
  var objBounds1 = obj1.getBounds().clone();
  var objBounds2 = obj2.nominalBounds.clone(); // <-----Changed this line

  var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);

  var h1 = -(objBounds1.height / 2 + objBounds2.height);
  var h2 = objBounds2.height / 2;
  var w1 = -(objBounds1.width / 2 + objBounds2.width);
  var w2 = objBounds2.width / 2;


  if(pt.x > w2 || pt.x < w1) return false;
  if(pt.y > h2 || pt.y < h1) return false;

  return true;
}

Answer 1

检查包含的演示，当我开始拖动时立即出现错误（请注意，当检查器打开时，我总是在 Chrome 中设置 "break on error" 切换）。

问题是因为 "pressup" 处理程序没有作用域，所以 obj2 未定义。如果不传递范围，则在全局范围内调用该方法。

var objBounds2 = obj2.getBounds().clone(); // Error!

您可以通过将作用域传递给 on() 方法来轻松解决此问题。这将确保 this 指的是当前范围。

dragger.on("pressup", function(evt){    //this function will be very custom, always
    //lock position of thermometer and play stabby animation
    dragger.x = dragger.x;
    dragger.y = dragger.y;

    if(intersect(evt.currentTarget, this.targetRight)){    //Intersection testing for good
        alert("YAY you're right AND it works!");

    }else if(intersect(evt.currentTarget, this.targetWrong)){   //intersection Testing for bad
        alert("BOO its wrong, but YAY it works");
    }
    stage.update(evt);

}, this); // <-------------------- Only thing I changed

我向 on() 方法添加了第三个参数，以传递范围。这应该可以解决该错误，甚至可以解决您的问题。

干杯，

如何让 Animate CC 识别拖放中的滴？

How do I get Animate CC to recognize drops in my drag and drop?

javascript

drag-and-drop

easeljs

animate-cc