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

【问题标题】：Triggering mouse/touch events in Matter.js在 Matter.js 中触发鼠标/触摸事件
【发布时间】：2016-11-13 02:59:54
【问题描述】：

如何在 Matter.js 中添加以编程方式触发的触摸/鼠标事件？我为引擎设置了一些碰撞事件，但无法触发停止当前拖动操作的 mouseup 事件。我尝试了针对画布元素、鼠标/鼠标约束和非静态主体的各种组合。

【问题讨论】：

【解决方案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”并询问是否 ((mouseX1 == mouseX2) && (mouseY1 == mouseY2)) 时完成的。

第二部分 - 有趣的部分 - 创建一个 var 数组来保存对象或“身体”，我们将在鼠标下挖掘。幸好有这个功能：

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

对于这里的第一个元素，我输入了“books”。对您来说，这需要是您已将所有对象或“身体”放入其中的数组的名称。如果您没有将它们放在数组中，则将它们全部放入并不难，如下所示：

var books = [book1, book2, book3];

一旦完成，我就可以通过 alert(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'
    });

希望对您有所帮助！这个让我挂了一整天。

【讨论】：

【解决方案2】：

原来我错误地配置了 Matter.Mouse 模块，并重新分配了已在 MouseConstraint 中设置的鼠标输入。以下是关于我原来的问题：

Matter.mouseConstraint.mouse.mouseup(event);

【讨论】：