在Animate CC中拖放不识别拖动对象的子项

时间:2016-04-18 17:08:19

标签: javascript drag-and-drop easeljs animate-cc

我试图拖延,但它给了我一堆问题。我解决了一个又一个问题。我让它在看到我的拖拽物体的任何部分进入目标区域的地方工作,但我希望它只识别一个部分(它是一个尖头温度计的图形,你无法测量温度在现实生活中的头脑)demo here

我得到的错误是"未捕获的TypeError:无法读取属性'拖动'未定义" (我在演示中标记了#39;拖动它,但它在拖动对象中是一个子动画片剪辑)

另外,'温度计'并且'拖动'都是动画片段的命名实例。

守则:

@property
def is_alive(self):
   return self.hp > 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);
    

更新的INTERSECT:

  • 用于测试交叉路口。

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

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

1 个答案:

答案 0 :(得分: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;
}

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

<强> [UPDATE]

再深入一点,有很多问题可能导致你的交叉功能不起作用:

  1. 你的右/左界限不正确。 EaselJS对象没有widthheightmore info),因此您设置的界限只有xy
  2. 您可以使用nominalBounds来获得正确的界限。这提供了符号的未转换的原始边界。您将不得不考虑任何缩放。在这种情况下,界限是: * left:{x: 0, y: 0, width: 275, height: 300} *右:{x: 0, y: 0, width: 413, height: 430}

    1. 您的路口必须考虑显示列表层次结构。具体而言,在比较位置和大小时,它们应该相互相对。如果您的拖动目标位于另一个剪辑内,则需要考虑父定位。我建议在比较时始终对坐标进行localToGlobal
    2. 示例:

      // 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);