IT技术 - 使用 Matter.js 渲染到 DOM 或 React - 吾爱随笔录

使用 Matter.js 渲染到 DOM 或 React

IT技术 javascript html reactjs matter.js

2021-04-06 22:21:53

我想将自定义 HTML 元素呈现为 Matter.js 中的正文。我在 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 元素与物理世界交互（比如一个带按钮的小盒子等）。

关于如何实现这一目标的任何想法？或者，您能否解释一下示例中使用的似乎已经管理它的方法？

1个回答

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

这不是这个例子所做的。当无头运行时，Matter.js 处理物理而不知道它是如何渲染的。每个动画帧，您可以使用 MJS 主体的当前位置并重新定位您的元素（或在画布上绘制等）以反映 MJS 的世界观。

为 MJS 提供根元素似乎确实打破了单向数据流，但这只是为了通知 MJS 有关鼠标位置和点击等事件——不要与渲染混淆。

这是一个最小的例子，希望能更清楚地说明这一点：

const engine = Matter.Engine.create();  
const box = {
  body: Matter.Bodies.rectangle(150, 0, 40, 40),
  elem: document.querySelector("#box"),
  render() {
    const {x, y} = this.body.position;
    this.elem.style.top = `${y - 20}px`;
    this.elem.style.left = `${x - 20}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.World.add(
  engine.world, [box.body, ground, mouseConstraint]
);
(function rerender() {
  box.render();
  Matter.Engine.update(engine);
  requestAnimationFrame(rerender);
})();

#box {
  position: absolute;
  background: #111;
  height: 40px;
  width: 40px;
  cursor: move;
}

#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.17.1/matter.min.js"></script>
<div id="box"></div>
<div id="ground"></div>

react

React 改变了工作流程，但基本概念是相同的——MJS 主体数据从 MJS 后端单向流向渲染前端，因此从 MJS 的角度来看，一切都与上面的 vanilla 示例相同。大部分工作是设置refs并useEffect正确使用requestAnimationFrame.

#box {
  position: absolute;
  background: #111;
  height: 40px;
  width: 40px;
  cursor: move;
}

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

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

<script type="text/babel" defer>
const {Fragment, useEffect, useRef} = React;

const Scene = () => {
  const requestRef = useRef();
  const boxRef = useRef();
  const groundRef = useRef();

  const animate = () => {
    const engine = Matter.Engine.create();
    
    const box = {
      body: Matter.Bodies.rectangle(150, 0, 40, 40),
      elem: boxRef.current,
      render() {
        const {x, y} = this.body.position;
        this.elem.style.top = `${y - 20}px`;
        this.elem.style.left = `${x - 20}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.World.add(
      engine.world, [box.body, ground, mouseConstraint]
    );
    
    (function rerender() {
      box.render();
      Matter.Engine.update(engine);
      requestRef.current = requestAnimationFrame(rerender);
    })();
  };
  
  useEffect(() => {
    animate();
    return () => cancelAnimationFrame(requestRef.current);
  }, []);
  
  return (
    <Fragment>
      <div id="box" ref={boxRef}></div>
      <div id="ground" ref={groundRef}></div>
    </Fragment>
  );
};

ReactDOM.render(<Scene />, document.body);

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>

请注意，这些只是概念验证。在支持更多涉及的用例之前，可能需要更多的工作来设置抽象。

其它你可能感兴趣的问题

上一篇Karma 单元测试：尚未为上下文加载module名称“react”：_。使用 require([]) 下一篇带括号而不是花括号的箭头函数语法？