Matter.jsでのマウス/タッチイベントのトリガー

Question

Matter.jsでプログラムでトリガーされたタッチ/マウスイベントを追加するにはどうすればよいですか？エンジンの衝突イベントがいくつか設定されていますが、現在のドラッグ操作を停止するmouseupイベントはトリガーできません。キャンバス要素、mouse/mouseConstraint、および非静的なボディのさまざまな組み合わせを試しました。

Answer 1

Matter.Mouseモジュールが正しく構成されておらず、既にMouseConstraintに設定されていたマウス入力を再割り当てしていました。私の元の質問に関しては、次の作品は：あなたは、私のような、Matter.js本体のオブジェクトをクリックできるようにする方法を把握しようとしてここに来た場合

Matter.mouseConstraint.mouse.mouseup(event); 

Answer 2

は、私はあなたに1つの道を与えてみましょう。私のプロジェクトで私の目標は、私の矩形オブジェクトにいくつかの属性を割り当て、クリックしたときに関数を呼び出すことでした。

まず最初に行うには、クリックやドラッグを区別することだったので、私は（jqueryのを使用して）書いた：

 $("body").on("mousedown", function(e){ 
     mouseX1 = e.pageX; 
     mouseY1 = e.pageY; 
    }); 

    $("body").on("mouseup", function(e){ 
     mouseX2 = e.pageX; 
     mouseY2 = e.pageY; 
     if((mouseX1 == mouseX2) && (mouseY1 == mouseY2)){ 
       //alert("click!\n" + mouseX2 + " " + mouseY2 +"\n"); 
       var bodiesUnder = Matter.Query.point(books, { x: mouseX2, y: mouseY2 }); 
       //alert("click!\n" + mouseX2 + " " + mouseY2 +"\n"); 

       if (bodiesUnder.length > 0) { 
       var bodyToClick = bodiesUnder[0]; 
       alert(bodyToClick.title2); 
      } 
     } 
    }); 

「のmouseup」のために耳を傾け、もし（（mouseX1 == mouseX2を尋ねたときにこれが達成されました）& &（マウスY1 ==マウスY2））。

第2 - ジューシーな部分 - オブジェクトを保持するためのvar配列を作成するか、または 'bodies'をマウスの下に掘り下げます。ありがたいことにこの関数があります：

var bodiesUnder = Matter.Query.point(books, { x: mouseX2, y: mouseY2 }); 

ここで最初の要素は「books」です。あなたのために、これはあなたのすべてのオブジェクト、または 'ボディ'を配置した配列の名前である必要があります。あなたは配列でそれらを持っていない場合、それはそうのように、中にそれらのすべてを投げることは難しいことではありません。

var books = [book1, book2, book3]; 

それがすべて完了したら、私はものを見るために（book1.title2）を警告することができましたその本のタイトル（本文）です。私の体は次のようにコード化されました：

 var book2 = Bodies.rectangle(390, 200, 66, 70, { 
     render : { 
      sprite : { 
       texture: "img/tradingIcon.jpg" 
      } 
     }, 
     restitution : 0.3, 
     title1 : 'Vanessa and Terry', 
     title2 : 'Trading' 
    }); 

この1つは、私は一日中つらかった。