Matter.js 重力点

Question

在matter.js中创建一个重心/力点并使其位于x/y坐标的中心是可行的吗？

我已经用d3.js实现了它，但想询问一下matter.js，因为它具有使用多个polyshape的能力。

http://bl.ocks.org/mbostock/1021841

- MichaelBell

---

链接失效，可能是由于Heroku免费套餐最近消失所致。 为了后人，我们有更新吗？ - ggorlen

Answer 1

这个问题已经有了一个著名的答案：点此查看：

not sure if there is any interest in this. I'm a fan of what you have created. In my latest project, I used matter-js but I needed elements to gravitate to a specific point, rather than into a general direction. That was very easily accomplished. I was wondering if you are interested in that feature as well, it would not break anything.

All one has to do is setting engine.world.gravity.isPoint = true and then the gravity vector is used as point, rather than a direction. One might set:

engine.world.gravity.x = 355;
engine.world.gravity.y = 125;
engine.world.gravity.isPoint = true;

and all objects will gravitate to that point.

If this is not within the scope of this engine, I understand. Either way, thanks for the great work.

- MichaelBell

---

可以请您演示一下这个功能吗？我已经试了两个小时了，但还是无法使其工作。请帮我解决一下。 - leAthlon

大于等于0.17.0版本，请使用 engine.gravity。World已过时。 - ggorlen

@ggorlen很想看到一个例子，因为我在文档中没有看到isPoint的参考。 - Zach Saucier

@ZachSaucier 这个回答中链接的合并请求实现了 isPoint，但被关闭且未合并。MJS 库的作者最终评论指向了一个插件 https://github.com/liabru/matter-attractors。 - ggorlen

我添加了一个答案，希望能够澄清这种情况。 - ggorlen

Answer 2

你可以使用物质吸引器插件来完成这个操作。这是他们的基本示例：

Matter.use(
  'matter-attractors' // PLUGIN_NAME
);

var Engine = Matter.Engine,
    Events = Matter.Events,
    Runner = Matter.Runner,
    Render = Matter.Render,
    World = Matter.World,
    Body = Matter.Body,
    Mouse = Matter.Mouse,
    Common = Matter.Common,
    Bodies = Matter.Bodies;

// create engine
var engine = Engine.create();

// create renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: Math.min(document.documentElement.clientWidth, 1024),
    height: Math.min(document.documentElement.clientHeight, 1024),
    wireframes: false
  }
});

// create runner
var runner = Runner.create();

Runner.run(runner, engine);
Render.run(render);

// create demo scene
var world = engine.world;
world.gravity.scale = 0;

// create a body with an attractor
var attractiveBody = Bodies.circle(
  render.options.width / 2,
  render.options.height / 2,
  50, 
  {
  isStatic: true,

  // example of an attractor function that 
  // returns a force vector that applies to bodyB
  plugin: {
    attractors: [
      function(bodyA, bodyB) {
        return {
          x: (bodyA.position.x - bodyB.position.x) * 1e-6,
          y: (bodyA.position.y - bodyB.position.y) * 1e-6,
        };
      }
    ]
  }
});

World.add(world, attractiveBody);

// add some bodies that to be attracted
for (var i = 0; i < 150; i += 1) {
  var body = Bodies.polygon(
    Common.random(0, render.options.width), 
    Common.random(0, render.options.height),
    Common.random(1, 5),
    Common.random() > 0.9 ? Common.random(15, 25) : Common.random(5, 10)
  );

  World.add(world, body);
}

// add mouse control
var mouse = Mouse.create(render.canvas);

Events.on(engine, 'afterUpdate', function() {
    if (!mouse.position.x) {
      return;
    }

    // smoothly move the attractor body towards the mouse
    Body.translate(attractiveBody, {
        x: (mouse.position.x - attractiveBody.position.x) * 0.25,
        y: (mouse.position.y - attractiveBody.position.y) * 0.25
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/matter-attractors@0.1.6/build/matter-attractors.min.js"></script>

历史注释："重心点"功能曾被提议作为MJS的一个特性PR #132，但被关闭，MJS的作者（liabru）提供了物质吸引器插件作为替代品。在撰写本文时，this answer误导地表明了来自PR的功能实际上已经合并。

不幸的是，在撰写本文时，吸引器库已经过时6年，并且在使用新版本的MJS（0.12.0以上）时会引发警告。从issue #11的讨论中可以得知，忽略警告并与0.18.0等版本一起使用此插件似乎是可以的。以下是警告内容：

matter-js: Plugin.use: matter-attractors@0.1.4 适用于 matter-js@^0.12.0 ，但安装在 matter-js@0.18.0 上。

一开始看起来行为正常，但我仍会在上面的例子中保留0.12.0版本以消除它。如果你更新到最新版本，请注意{{link1：Matter.World已被弃用}}，应该替换为Matter.Composite和engine.gravity。

- ggorlen