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

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

本文关键字:对象 拖动 CC 识别 动画 拖放      更新时间:2023-09-26

我试图进行拖放操作,但它给我带来了很多问题。我修复了一个,然后又出现了另一个。我让它在它可以看到拖动对象的任何部分是否进入目标区域的地方工作,但我希望它只识别其中一部分(这是一个尖头温度计的图形,在现实生活中你不能用头测量温度)演示。

我得到的错误是"Uncaught TypeError:无法读取未定义的属性‘drag’"(我在演示中标记了‘drag‘,但它是拖动对象内的子移动)

此外,"温度计"answers"拖动"都是movieclips的命名实例。

代码:

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

总之,我需要知道如何使它不被定义,这样我就可以测试其中一个大盒子中的那个小盒子。

发生错误是因为您在那一行使用了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;
}

不确定这是否能解决你所有的问题,但它至少能让你向前迈进。


[更新]

再深入一点看,有很多问题可能会导致您的交集函数不起作用:

  1. 你的左右边界不正确。EaselJS对象没有widthheight(更多信息),所以您设置的边界只有xy

您可以使用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);