在 Matter.js 中触发 mouse/touch 个事件
Triggering mouse/touch events in Matter.js
如何在 Matter.js 中添加以编程方式触发的 touch/mouse 事件?我为引擎设置了一些碰撞事件,但无法触发停止当前拖动操作的 mouseup 事件。我尝试了针对 canvas 元素、mouse/mouseConstraint 和非静态正文的各种组合。
原来我错误地配置了 Matter.Mouse 模块,并且正在重新分配已经在 MouseConstraint 中设置的鼠标输入。以下是关于我的原始问题的作品:
Matter.mouseConstraint.mouse.mouseup(event);
如果您像我一样来到这里,试图弄清楚如何能够点击 Matter.js body object,让我给您一个方法。我在我的项目中的目标是为我的矩形 objects 分配一些属性并在它们被点击时调用一个函数。
首先要做的是区分拖动和点击,所以我写了(using 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 数组来保存 object 或 'bodies',我们将在鼠标下挖掘。还好有这个功能:
var bodiesUnder = Matter.Query.point(books, { x: mouseX2, y: mouseY2 });
对于这里的第一个元素,我输入了 "books"。对于您来说,这需要是您将所有 object 或 'bodies' 放入的数组的名称。如果你没有将它们放在一个数组中,那么将它们全部放入并不难,就像这样:
var books = [book1, book2, book3];
一旦完成,我就可以提醒 (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'
});
希望对您有所帮助!这个让我挂了一整天。
如何在 Matter.js 中添加以编程方式触发的 touch/mouse 事件?我为引擎设置了一些碰撞事件,但无法触发停止当前拖动操作的 mouseup 事件。我尝试了针对 canvas 元素、mouse/mouseConstraint 和非静态正文的各种组合。
原来我错误地配置了 Matter.Mouse 模块,并且正在重新分配已经在 MouseConstraint 中设置的鼠标输入。以下是关于我的原始问题的作品:
Matter.mouseConstraint.mouse.mouseup(event);
如果您像我一样来到这里,试图弄清楚如何能够点击 Matter.js body object,让我给您一个方法。我在我的项目中的目标是为我的矩形 objects 分配一些属性并在它们被点击时调用一个函数。
首先要做的是区分拖动和点击,所以我写了(using 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 数组来保存 object 或 'bodies',我们将在鼠标下挖掘。还好有这个功能:
var bodiesUnder = Matter.Query.point(books, { x: mouseX2, y: mouseY2 });
对于这里的第一个元素,我输入了 "books"。对于您来说,这需要是您将所有 object 或 'bodies' 放入的数组的名称。如果你没有将它们放在一个数组中,那么将它们全部放入并不难,就像这样:
var books = [book1, book2, book3];
一旦完成,我就可以提醒 (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'
});
希望对您有所帮助!这个让我挂了一整天。