问Matter.js用鼠标拖动选择多个物体

EN

const engine = Matter.Engine.create();
const render = Matter.Render.create({
  element: document.body,
  engine: engine,
  options: {wireframes: false},
});
const bodies = [
  Matter.Bodies.rectangle(
    400, 200, 810, 60, {isStatic: true, angle: 0.0}
  ),
  ...[...Array(100)].map(() =>
    Matter.Bodies.circle(
      Math.random() * 400,     // x
      Math.random() * 100,     // y
      Math.random() * 10 + 10, // r
      {
        angle: Math.random() * (Math.PI * 2),
        render: {fillStyle: "white"}
      },
    )
  ),
];
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {
    element: document.body,
    collisionFilter: {mask: 0} // disable collision
  }
);
const runner = Matter.Runner.create();
let mouseDown = false;
const selected = [];
Matter.Events.on(mouseConstraint, "mousedown", () => {
  mouseDown = true;
  addSelection();
});
Matter.Events.on(mouseConstraint, "mouseup", () => {
  mouseDown = false;
  selected.forEach(e => e.render.fillStyle = "red");
  selected.length = 0;
});
Matter.Events.on(mouseConstraint, "mousemove", () => {
  if (mouseDown) {
    addSelection();
  }
});
const addSelection = () => {
  const p = mouseConstraint.mouse.position;
  const justSelected = Matter.Query.point(bodies, p);
  selected.push(...justSelected);
  justSelected.forEach(e => e.render.fillStyle = "yellow");
};
Matter.Composite.add(engine.world, [...bodies, mouseConstraint]);
Matter.Runner.start(runner, engine);
Matter.Render.run(render);

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.js"></script>