Matter js Body.set 不更新对象位置

Question

我有一个Matter.js World where I'm updating some Bodies。

let ball1 = document.getElementById("ball-1");
let ball2 = document.getElementById("ball-2");
let ball3 = document.getElementById("ball-3");


// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body,
    Events = Matter.Events;

// create an engine
var engine = Engine.create();

var w = window.innerWidth;
var h = window.innerHeight;

// create 3 circles and walls
var circle1 = Bodies.circle(w/2, 40, ball1.offsetWidth/2, { restitution: 0.99 });
var circle2 = Bodies.circle(w/2, 100, ball2.offsetWidth/2, { restitution: 0.99 });
var circle3 = Bodies.circle(w/2, 50, ball3.offsetWidth/2, { restitution: 0.99 });

var ceiling = Bodies.rectangle(w/2, -15, w, 30, { isStatic: true });
var wallLeft = Bodies.rectangle(-15, h/2, 30, h, { isStatic: true, restitution: 0.99 });
var wallRight = Bodies.rectangle(w+15, h/2, 30, h, { isStatic: true, restitution: 0.99 });
var floor = Bodies.rectangle(w/2, h+15, w, 30, { isStatic: true, restitution: 0.99 });

// add all of the bodies to the world
World.add(engine.world, [circle1, circle2, circle3, floor, wallLeft, wallRight, ceiling]);
Engine.run(engine);

Events.on(engine, "afterUpdate", function(){
  ball1.style.transform = "translateX(" + circle1.position.x + "px) translateY(" + circle1.position.y + "px) rotate("+circle1.angle+"rad)";
  ball2.style.transform = "translateX(" + circle2.position.x + "px) translateY(" + circle2.position.y + "px)  rotate("+circle2.angle+"rad)";
  ball3.style.transform = "translateX(" + circle3.position.x + "px) translateY(" + circle3.position.y + "px)  rotate("+circle3.angle+"rad)";
});

我遇到的问题是，当我调整 window 大小时，我调用了以下方法：

window.addEventListener("resize", () => {
  w = window.innerWidth;
  h = window.innerHeight;

  Body.set(circle1, { x: w/2, y: 10 });
  Body.set(circle2, { x: w/2 + 10, y: 10 });
  Body.set(circle3, { x: w/2 - 10, y: 10 });
  Body.set(floor, { x: w/2, width: w, y: h+15 });
  Body.set(ceiling, { x: w/2, width: w });
  Body.set(wallLeft, { y: h/2, height: h });
  Body.set(wallRight, { x: w+15, y: h/2, height: h });
  console.log(floor.y);
});

但是，虽然 console.log 显示地板的新 y 位置，但屏幕上的元素并未更新。我是不是把这个函数调用错了？

Body.set(floor, { x: w/2, width: w, y: h+15 });

完整演示： https://codepen.io/EightArmsHQ/pen/9fe08dd4365f63666be2e53a676642c7

Answer 1

这个问题有点老了，但如果有人有同样的问题，我最好回答一下。

在 matter-js 中

使用

更新位置

Matter.Body.set(circle1, "position", {x: 100, y: 100})

源代码link：https://github.com/liabru/matter-js/blob/e909b0466cea2051267bab92a38ccaa9bf7f154e/src/body/Body.js#L222

Matter js Body.set 不更新对象位置

Matter js Body.set not updating objects position

javascript

matter.js