0

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

我得到的错误是“未捕获的类型错误：无法读取未定义的属性'拖动'”（我在演示中标记为“拖动”，但它是拖动对象内的子影片剪辑）

此外，“温度计”和“拖动”都是电影剪辑的命名实例。

编码：

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

总而言之，我需要知道如何使它不是未定义的，以便我可以测试那个小盒子是否在一个大盒子中。

4

1 回答 1

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

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

[更新]

再深入一点，有许多问题可能导致您的 intersect 函数不起作用：

  1. 您的右/左边界不正确。EaselJS 对象没有widthor height（更多信息），因此您设置的边界只有一个xand y。

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

  1. 您的交叉点必须考虑显示列表层次结构。具体来说，在比较位置和大小时，它们应该是相对的。如果您的拖动目标位于另一个剪辑内，则需要考虑父定位。我建议在比较它们时始终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);
于 2016-04-18T19:54:30.767 回答