Matter.js 矩形内的文本

Question

我有一些用 Matter.js 创建的矩形，如下所示：Bodies.rectangle (getRandomInt (200,400), 50,140,50, {restitution: 0.7, timeScale: 0.5}) 但现在我需要在该矩形内添加文本。我怎么能这么做呢？文档对于此类操作并不清楚

Answer 1

Matter.js 中最常见的问题类别之一是“我该如何做 X（使用内置渲染器）？”

我怀疑这些问题大部分都源于对内置渲染器用途的根本误解。Matter.js 首先是一个物理引擎，而不是一个渲染库。内置渲染器仅用于原型设计：显示线框、基本颜色或精灵的简单用例。

文档非常明确：

有一个包含的调试渲染器，称为Matter.Render. 该模块是一个可选的基于画布的渲染器，用于可视化Matter.Engine. 它主要用于开发和调试目的，但也可能是简单游戏的合适起点。

对于开发和调试之外的任何渲染需求，该库希望您使用适合您需求的自己的渲染解决方案。

在这种情况下，根据 MJS 创建者在问题 #321 中的评论，文本是渲染器中不可用的东西：是否有在 Matter.js 中渲染文本的方法？：

不是使用内置的调试渲染器，如果您需要做任何奇特的事情，我建议您创建自己的渲染器，请参阅渲染。一个开始的地方是复制 的代码Matter.Render。

因此，让我们继续使用我们自己的渲染器，而不是尝试推动内置渲染器执行其设计之外的操作。

DOM 非常适合文本，所以这是我的第一个建议，建立在使用 Matter.js 渲染到 DOM 或 React 的基础上。

const engine = Matter.Engine.create();
const box = {
  w: 140,
  h: 80,
  body: Matter.Bodies.rectangle(150, 0, 140, 80),
  elem: document.querySelector("#box"),
  render() {
    const {x, y} = this.body.position;
    this.elem.style.top = `${y - this.h / 2}px`;
    this.elem.style.left = `${x - this.w / 2}px`;
    this.elem.style.transform = `rotate(${this.body.angle}rad)`;
  },
};
const ground = Matter.Bodies.rectangle(
  200, 200, 400, 120, {isStatic: true}
);
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {element: document.body}
);
Matter.Composite.add(
  engine.world, [box.body, ground, mouseConstraint]
);
(function rerender() {
  box.render();
  Matter.Engine.update(engine);
  requestAnimationFrame(rerender);
})();

@import url(https://fonts.bunny.net/css?family=amatic-sc:700);

#box {
  position: absolute;
  background: #111;
  color: #eee;
  height: 80px;
  width: 140px;
  cursor: move;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Amatic SC";
  text-shadow: 2px 2px 3px #38e;
}

#ground {
  position: absolute;
  background: #666;
  top: 140px;
  height: 120px;
  width: 400px;
}

html, body {
  position: relative;
  height: 100%;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<div id="box">
  <h1>hello world</h1>
</div>
<div id="ground"></div>

希望这个例子足以表明您可以使用 DOM 渲染几乎任何内容并插入 MJS，从<video>元素到图像到<canvas>es，<iframes>再到 SVG。