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

【问题标题】：How to draw a semicircle with matter.js?如何用matter.js画一个半圆？
【发布时间】：2021-07-02 11:27:56
【问题描述】：

我在玩matterjs 库，太棒了！

我想知道如何画出这样的半圆：

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

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

任何推荐都会很棒！

【问题讨论】：

标签： javascript matter.js

【解决方案1】：

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.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>

【讨论】：

我忘了添加一个 codepen 示例，对此感到抱歉。 codepen.io/mp1985/pen/eYWpdLp 我可以用矩形做一个半圆形，我添加了你的 svg 代码建议，它们或多或少看起来是一样的。你知道为什么形状不像 svg 那样平滑吗？你可以很容易地看到点，所以曲线不是很平滑。有没有办法让曲线更平滑？我猜增加更多的点会使曲线更平滑？
是的，这是一般的想法，圆圈上的点越多越平滑，但可能会影响性能，因此可能需要为您的用例取得适当的平衡。这个例子非常好，感谢分享——我建议将其编辑到您的问题中以供后代使用。您还可以添加一个 self answer 来展示您的矩形技术。