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

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

我正在使用 matterjs 库，太棒了！

我想弄清楚如何绘制这样的半圆：

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

看起来很简单的形状，但我不知道是否可以用库画一个半圆。

任何推荐都会很棒！

解决方法

SVGs 是一种方法：

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.World.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.17.1/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>