在Matter.js中触发鼠标/触摸事件

Question

如何在Matter.js中添加编程触发的触摸/鼠标事件?我为引擎设置了一些碰撞事件，但无法触发停止当前拖动动作的mouseup事件。我已经尝试了针对canvas元素、mouse/mouseConstraint和非静态body的各种组合。

Answer 1

如果你和我一样，来这里试图弄清楚如何能够点击Matter.js主体对象，让我给你一个方法。在我的项目中，我的目标是为我的矩形对象分配一些属性，并在单击它们时调用一个函数。

首先要做的是区分拖动和单击，所以我写(使用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"并询问if ((mouseX1 == mouseX2) &&(mouseY1 == mouseY2) .

第二部分——有趣的部分——创建一个var数组来保存我们将要在鼠标下挖掘的对象或"主体"。还好有这个函数:

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

对于这里的第一个元素，我输入"books"。对你来说，这需要是一个数组的名字你把所有的对象或"主体"放入其中。如果数组中没有它们，那么将它们全部放入数组中并不困难，如下所示:

var books = [book1, book2, book3];

一旦所有这些都完成了，我就能够alert(book1.title2)来查看那本书(body)的标题是什么。我的身体编码如下:

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

希望有帮助!

Answer 2

原来我错误地配置了Matter。鼠标模块，并且正在重新分配已经在MouseConstraint中设置的鼠标输入。以下是关于我最初的问题的作品:

Matter.mouseConstraint.mouse.mouseup(event);