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

Question

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

- Prob

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”事件，并询问是否 ((mouseX1 == mouseX2) && (mouseY1 == mouseY2)) 来完成的。

其次——重点——创建一个变量数组来保存我们要在鼠标下挖掘的对象或“bodies”。幸运的是，这里有这个函数：

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

第一个元素我输入了"books"。对于您来说，这需要是一个您已经将所有对象或"bodies"放入的数组的名称。如果你没有把它们放在一个数组中，把它们全部放进去也不难，就像这样：

var books = [book1, book2, book3];

完成所有操作后，我能够通过警报(book1.title2)来查看那本书(body)的标题是什么。我的body代码如下：

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

希望能够帮到你！这个问题让我困扰了一整天。

- Erich Brahmin

Answer 2

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

Matter.mouseConstraint.mouse.mouseup(event);

- Prob