拖放无法识别 Animate CC 中拖动对象的子项

Question

我正在尝试进行拖放操作，但它给我带来了很多问题。我修好了一个，另一个出现了。我让它工作，它会看到我的拖动对象的任何部分是否进入目标区域，但我希望它只识别一个部分（它是一个尖头温度计的图形，你不能在现实生活中用头测量温度) demo here.

我得到的错误是 "Uncaught TypeError: Cannot read property 'drag' of undefined"（我在演示中标记为 'drag'，但它是拖动对象中的子动画片段）

此外，'thermometer' 和 'drag' 都是动画片段的命名实例。

代码：

var dragger = this.thermometer; 

//tried this to see if it would help
var tip = this.thermometer.drag;
var right = this.targetRight;
var wrong = this.targetWrong;

移动它：

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


if(intersect(tip, right)){
   evt.currentTarget.alpha=0.2;

 }
 else if(intersect(tip, wrong)){
   evt.currentTarget.alpha=0.7;

 }
 else{
   evt.currentTarget.alpha=1;

 }

stage.update(evt);
}, this);

为了释放它

dragger.on("pressup", function(evt){ 
//lock position of drag object and play animation if any
dragger.x = dragger.x;
dragger.y = dragger.y;

if(hitTestArray.length > 1){
  dragger.alpha = 1;
  stage.update(evt);
}//else{

    if(intersect(tip, right)){  //Intersection testing for good (also tried 'dragger.drag' to see if that would work. it didn't)

        alert("YAY you're right AND it works!");
        dragger.alpha = 1;

    }else if(intersect(tip, wrong)){  //intersection Testing for bad

        alert("BOO its wrong, but YAY it works"); 
        dragger.alpha = 1;
    }

  stage.update(evt);
//}
}, this);

更新相交：

用于测试交集。

function intersect(obj1, obj2){
  var objBounds1 = obj1.nominalBounds.clone();
  var objBounds2 = obj2.nominalBounds.clone();

  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

发生错误是因为您在那一行中使用了 this.currentTarget 而不是 evt.currentTarget。

请注意，您的实际代码与上面发布的代码不同。这是现场演示中的代码：

if(intersect(this.currentTarget.drag, right)){
    evt.currentTarget.alpha=0.2;
} else if(intersect(this.currentTarget.drag, wrong)){
    evt.currentTarget.alpha=0.7;
}
else{
    evt.currentTarget.alpha=1;
}

不确定这是否能解决您的所有问题，但至少应该能让您继续前进。

[更新]

再深入一点，有许多问题可能会导致您的相交功能无法正常工作：

您的 right/left 范围不正确。 EaselJS 对象没有 width 或 height (more info)，因此您设置的边界只有 x 和 y.

您可以使用 nominalBounds 来获得正确的边界。这提供了符号的未转换的原始边界。您将不得不考虑任何缩放比例。在这种情况下，边界是： * 左：{x: 0, y: 0, width: 275, height: 300} * 右：{x: 0, y: 0, width: 413, height: 430}

您的交集必须考虑显示列表层次结构。具体而言，在比较位置和大小时，它们应该是相对的。如果您的拖动目标位于另一个剪辑内，则需要考虑父级定位。我建议在比较坐标时始终对坐标执行 localToGlobal。

示例：

// Find the clip's top/left position in the global scope
var p = myContainer.localToGlobal(myClip.x, myClip.y); 
// OR 
// Find the clip's position in the global scope
var p = myClip.localToGlobal(0, 0);

拖放无法识别 Animate CC 中拖动对象的子项

Drag and Drop not recognizing child of drag object in Animate CC

javascript

drag-and-drop

easeljs

animate-cc