相关疑难解决方法(0)

我正在一个小项目上使用matter.js.

我正在尝试更改画布的背景颜色并向对象添加自定义颜色.

有没有人知道教程或东西的样式问题.js

Matter.js

我想将字体或静态图像放在画布上，但不确定使用 Matter.js 的最佳方法是什么。现在，对于图像，我只是创建一个大小为“0”的主体并将图像 url 放在 render.sprite.texture 属性中。似乎可以解决问题，但是否有不同/更好的方法将静态图像放在画布上？

此外，在创建/绘制其他任何内容之前，我正在使用脚本顶部附近的 'afterRender' 事件将文本放到画布上：

_sceneEvents.push(
    Events.on(_engine, 'afterRender', function(event) {
        var context = _engine.render.context;
        context.font = "45px 'Cabin Sketch'";
        context.fillText("THROW OBJECT HERE", 150, 80);
    });
);

唯一的问题是文本一直被绘制在顶部，所以我的可拖动对象一直在文本后面。我只希望文本留在背景中，就像静态图像一样，但我认为在画布上绘制字体可能比让用户下载另一个图像更好。有什么帮助吗？

我想在 Matter.js 中将自定义 HTML 元素渲染为 Bodies。我在 React 中使用它，这增加了一些复杂性，但这与我的问题无关。

我搜索了很多，我发现的唯一一个例子就是这里的这个，它似乎用于querySelector选择 HTML 代码中的元素，然后以某种方式在矩形形状内使用它们。

似乎正在完成这项工作的部分如下：

var bodiesDom = document.querySelectorAll('.block');
var bodies = [];
for (var i = 0, l = bodiesDom.length; i < l; i++) {
    var body = Bodies.rectangle(
        VIEW.centerX,
        20, 
        VIEW.width*bodiesDom[i].offsetWidth/window.innerWidth, 
        VIEW.height*bodiesDom[i].offsetHeight/window.innerHeight
    );
    bodiesDom[i].id = body.id;
    bodies.push(body);
}
World.add(engine.world, bodies);

（VIEW那里的变量可能只是随机数，因为它们定义了形状）

但是，我无法理解如何在 Bodies 矩形内传递 HTML 元素，如上面的示例所示。

理想情况下，我希望有复杂的 HTML 元素与物理世界交互（比如带有按钮的小盒子等）。

关于如何实现这一目标有什么想法吗？或者，您能解释一下示例中使用的似乎已成功实现的方法吗？