如何用matter.js画一个半圆？

Question

我正在玩 matterjs 库，太棒了！

我正在想办法画出这样的半圆：

我尝试了 Bodies.circle、Bodies.rectangle 和 Bodies.polygon，但没有成功。

看起来很简单的形状，不知道能不能用库画一个半圆

任何推荐都会很棒！

Answer 1

是一种方法：

const engine = Matter.Engine.create();
const render = Matter.Render.create({
  element: document.body,
  engine: engine,
});
const bodies = [
  Matter.Bodies.rectangle(
    400, 210, 810, 60, {isStatic: true, angle: 0.0}
  ),
  ...Array(50).fill().map(() => {
    const path = document.querySelector("svg > path");
    const body = Matter.Bodies.fromVertices(
      Math.random() * innerWidth, // x
      0,    // y
      Matter.Svg.pathToVertices(path), // vertexSets
      {},   // options
      true, // flag internal
    );
    const scale = Math.random() / 2 + 0.2;
    Matter.Body.scale(body, scale, scale);
    return body;
  }),
];
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {element: document.body}
);
Matter.Composite.add(engine.world, [...bodies, mouseConstraint]);
Matter.Runner.run(engine);
Matter.Render.run(render);

svg {display: none;}

<script src="https://cdn.jsdelivr.net/npm/pathseg@1.2.0/pathseg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.js"></script>
<svg>
  <!-- SVG path from https://upload.wikimedia.org/wikipedia/commons/e/e9/Semicircle.svg -->
  <path d="M 98,93 L 169,93 C 169,54 137,22 98,22 C 59,22 27,54 27,93 L 98,93 z " />
</svg>

如何用matter.js画一个半圆？

How to draw a semicircle with matter.js?

javascript

matter.js