Question

我想知道是否有人知道如何使用Matter.js来实现悬停效果。我已经检查了他们的文档，但找不到。但是，有鼠标-鼠标向下，鼠标向上，鼠标移动和more。

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

Answer 1

如果要找到位于鼠标/给定点下方的正文，可以使用

Matter.Query.point

docs.

如果要使鼠标悬停：

我曾经使用Box2d创建了一个悬停效果，但是我猜可能在something.js中也可以这样做。请看下面的插图。

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

要使物体悬停，您需要向其施加与重力相反的力。因此，您需要弄清楚该力需要多大，如果身体高于悬停高度，则该力应为零，并且当身体离地面越近时，该力应变得越大。

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

当我这样做时，我计算了大约10条射线并使用了它们的平均值，这样身体可以“爬升”

这样做的时候，您可能会here在哪里寻求帮助。

Here是关于它的很棒的教程，不幸的是在Box2d中，但是它们本身的物理原理应该没有什么不同。

Answer 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

});

祝您编程愉快！：）

如何在Matter.js中实现HOVER行为？

2 个答案: