Auslösen von Maus-/Berührungsereignissen in Matter.js

Question

Wie würde man programmgesteuerte Trigger-/Mausereignisse in Matter.js hinzufügen? Ich habe ein paar Kollisionsereignisse für die Engine eingerichtet, kann aber kein mouseup-Ereignis auslösen, das die aktuelle Ziehaktion stoppt. Ich habe verschiedene Kombinationen aus Targeting des Canvas-Elements, der Maus/Maus-Constraint und des nicht-statischen Körpers ausprobiert.

Answer 1

Es stellte sich heraus, dass ich das Matter.Mouse-Modul falsch konfiguriert hatte und die Mauseingabe neu zuordnete, die bereits in MouseConstraint festgelegt wurde. Die folgenden Arbeiten in Bezug auf meine ursprüngliche Frage:

Matter.mouseConstraint.mouse.mouseup(event); 

Answer 2

Wenn Sie, wie ich, kamen hierher, um herauszufinden, wie auf einem Matter.js Körper Objekt klicken zu können, lassen Sie mich Ihnen eine Möglichkeit geben. Mein Ziel in meinem Projekt war es, meinen Rechteck-Objekten einige Attribute zuzuordnen und eine Funktion aufzurufen, als darauf geklickt wurde.

Das erste, was zu tun war, zwischen Verschieben und Klickens zu unterscheiden, also schrieb ich (mit 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); 
      } 
     } 
    }); 

Dies wurde erreicht, wenn für "mouseup" zu hören und zu fragen, ob ((mouseX1 == mouseX2) & & (mouseY1 == mouseY2)).

Zweitens - der saftige Teil - Erstellen Sie ein Var-Array, um die Objekte oder "Körper" zu halten, die wir unter der Maus ausgraben werden. Zum Glück gibt es diese Funktion:

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

Für das erste Element in hier trat ich in „Bücher“. Für Sie muss dies der Name eines Arrays sein, in das Sie all Ihre Objekte oder "Körper" eingefügt haben. Wenn Sie sie nicht in einem Array haben, ist es nicht schwer, sie alle in werfen, etwa so:

var books = [book1, book2, book3]; 

Sobald das alles fertig war, konnte ich alarmieren (book1.title2) zu sehen, was die Titel dieses Buches (Körper) ist. Meine Körper wurden wie folgt codiert:

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

Hoffe, dass hilft! Dieser hatte mich für einen ganzen Tag aufgehängt.