0

ドラッグ アンド ドロップを作成しようとしていますが、多くの問題が発生しています。私は1つを修正し、別のものが出てきます。ドラッグ オブジェクトのいずれかの部分がターゲット領域に入ったかどうかを確認する場所で動作させましたが、1 つの部分だけを認識させたかったのです (これは先のとがった温度計のグラフィックであり、実際には頭で温度を測定することはできません)。 )デモはこちら.

私が得ているエラーは、「Uncaught TypeError: Cannot read property 'drag' of undefined」です (デモでは「ドラッグ」とラベル付けしましたが、ドラッグ オブジェクト内の子ムービークリップです)。

また、'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;
}

要約すると、大きなボックスの 1 つにある小さなボックスをテストできるように、未定義にならないようにする方法を知る必要があります。

4

1 に答える 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;
}

これですべての問題が解決するかどうかはわかりませんが、少なくとも前進できるはずです。

[アップデート]

もう少し詳しく見てみると、交差関数が機能しない原因となっている可能性が高い問題がいくつかあります。

  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 に答える