Перетаскивание не распознает дочерний объект перетаскивания в Animate CC

Я пытаюсь сделать перетаскивание, но это доставляет мне кучу проблем. Исправляю одно, появляется другое. У меня он работал там, где он увидит, попадет ли какая-либо часть моего перетаскиваемого объекта в целевую область, но я хотел, чтобы он распознавал только одну часть (это изображение заостренного термометра, и вы не можете измерить температуру головой в реальной жизни). ) демонстрация здесь.

Ошибка, которую я получаю, заключается в том, что «Uncaught TypeError: Cannot read property 'drag' of undefined» (я пометил «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;
    }
    

Подводя итог, мне нужно знать, как сделать его не неопределенным, чтобы я мог проверить, находится ли этот маленький ящик в одном из больших ящиков.


person Mike    schedule 18.04.2016    source источник


Ответы (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;
}

Не уверен, что это решит все ваши проблемы, но, по крайней мере, это должно заставить вас двигаться вперед.


[ОБНОВЛЕНИЕ]

Глядя немного глубже, есть ряд проблем, которые, вероятно, способствуют тому, что ваша функция пересечения не работает:

  1. Ваши правые/левые границы неверны. Объекты EaselJS не имеют width или height (дополнительная информация), поэтому установленные вами границы имеют только x и 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);
person Lanny    schedule 18.04.2016
comment
Спасибо! Да ошибка ушла. Теперь мне просто нужно лучше понять, почему он всегда возвращает false... - person Mike; 18.04.2016
comment
Опубликовал некоторые обновления после просмотра источника. - person Lanny; 18.04.2016
comment
ох .... черт, так я думаю, это портит любую отзывчивость, которую я мог бы захотеть с этим, да? У меня была еще одна функция пересечения, которую я нашел в популярной кодовой ручке, которая делала многое из этого. Я просто воспользуюсь этим и обязательно изменю его на номинальные границы. Я дам вам знать, как это происходит! :) - person Mike; 19.04.2016
comment
Пока вы учитываете масштабирование, все должно быть в порядке, чтобы сделать его отзывчивым. - person Lanny; 19.04.2016
comment
ой! это хорошо. Я все еще очень новичок и пробую вещи методом проб и ошибок. когда я раньше заглядывал в namedBounds, мне казалось, что это не сработает, поэтому я старался избегать этого. Это хорошо знать! :) - person Mike; 19.04.2016
comment
Итак, я изменил код обратно на тот, который я нашел на популярном кодепе. эта часть работает, по крайней мере, часть времени, но кажется, что смещение далеко. все, что слева или выше цели, считается хорошим, но затем оно останавливается на полпути через целевую область. см. здесь обновленную версию: apersonnamedmike.github.io/Drag-Drop-almost - person Mike; 20.04.2016