Matter.js中的自定义元素 反应

编程问答 2022-06-13

问题描述

Kinda坚持使用Matter.js，希望能获得一些帮助。

我想在Matter.js中将自定义html元素呈现为实体

（我在React中使用它会增加一些复杂性，但这与我的问题无关）

我进行了很多搜索，发现的唯一示例是this one here。似乎是将查询选择器用于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元素与物理世界互动（例如带有按钮等的小盒子）

关于如何实现此目标的任何想法？还是至少可以理解在示例中使用的似乎可以管理它的方法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptmatter.jsreactjsreactjs