如何在 Matter.js 中实现鼠标悬停行为？答案

【问题标题】：How to implement mouse hovering behavior in Matter.js?如何在 Matter.js 中实现鼠标悬停行为？
【发布时间】：2022-03-09 08:05:37
【问题描述】：

我想知道是否有人知道如何使用Matter.js 实现悬停效果。我已经检查了他们的文档，但无法弄清楚。不过，还有 Mouse - mousedown、mouseup、mousemove 和 more。

我进行了研究，但找不到任何有用的信息。我知道形状/物理是在画布内渲染的。任何信息或建议都会非常有帮助。

【问题讨论】：

标签： javascript matter.js

【解决方案1】：

如果你想找到鼠标/给定点下方的 Body，你可以使用

Matter.Query.point

docs.

如果你想让 Body 悬停：

我曾经使用 Box2d 创建过悬停效果，但我想可能在 matte.js 中以相同的方式完成。请看下面的插图。

    ^
    |      <-- Force opposite to gravity
+---|---+
|   +   |  <-- Box/player/body
+-+-+-+-+
| | | | |  <-- Rays
  | | |
----+----- <-- Ground to hover on
    |

要使身体悬停，您需要对其施加与重力相反的力。因此，您需要弄清楚这种力需要多大，如果身体高于悬停高度，则该力应该为零，并且身体越靠近地面，该力应该越强。

要获取此信息，您可以使用光线投射并将一条或多条光线从身体发送到地面（与重力相反）。如果光线与地板/地面相交以悬停，您可以计算从身体到交点的长度。如果长度大于悬停的高度，则可以将力设置为零，如果等于或小于，可以将力与长度成反比缩放，这样在身体低的时候它就很强。确切的方法/功能取决于您尝试达到的效果。

当我这样做的时候，我计算了大约 10 条光线并使用它们的平均值，这样身体就能够»攀爬«

你可以看看here我在哪里寻求帮助。

Here 是一个很棒的教程，不幸的是在 Box2d 中，但他们自己的物理应该不会不同。

【讨论】：

【解决方案2】：

我已经找到了实现悬停行为的方法。为此，我使用了 Matter.Query.point 和 "mousemove"(Matter.Events.on) 方法。感谢上面的@philipp 为我指出了正确的方向。这是简单的代码。

//Need to add MouseConstraint for mouse events
 var mConstraint;
 mConstraint = MouseConstraint.create(engine, options);
 Matter.World.add(world, mConstraint);

//Add event with 'mousemove'
Matter.Events.on(mConstraint, 'mousemove', function (event) {
   //For Matter.Query.point pass "array of bodies" and "mouse position"
   var foundPhysics = Matter.Query.point(bodies, event.mouse.position);

  //Your custom code here
  console.log(foundPhysics[0]); //returns a shape corrisponding to the mouse position

});

编码愉快！ :)

【讨论】：