1

我已经设置了这个 Matter.js 场景，它有三个墙——地面、墙左和墙右。最初设置它们的位置，以便它们恰好位于场景的指定边缘。

这是用墙壁定义场景的代码：

var Engine = Matter.Engine,
            Render = Matter.Render,
            World = Matter.World,
            Bodies = Matter.Bodies;
        var engine = Engine.create();
        var container = $(this).get()[0];
        var canvas = $(this).find("canvas").get()[0];
        var render = Render.create({
            element: container,
            canvas: canvas,
            engine: engine,
            options: {
                width: container.offsetWidth,
                height: container.offsetHeight,
                wireframes: false,
            }
        });

        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;

window.addEventListener("resize", function () {
    canvas.width = container.offsetWidth;
    canvas.height = container.offsetHeight
});

        // create two boxes and a ground
var ground = Bodies.rectangle(canvas.width / 2, canvas.height + 30, canvas.width, 60, {
    isStatic: true, label: "Ground"
});
var wallLeft = Bodies.rectangle(-30, canvas.height / 2, 60, canvas.height, {
    isStatic: true, label: "Wall Left"
});
var wallRight = Bodies.rectangle(canvas.width + 30, canvas.height / 2, 60, canvas.height, {
    isStatic: true, label: "Wall Right"
});

我正在寻找的是一种改变墙壁位置的方法window.resize。所以基本上只是在调整窗口大小时再次在主体上分配相同的大小属性。我该怎么做？我可以通过它们的标签以某种方式改变墙壁的位置，然后只改变position.x和position.y值吗？如果是这样，我如何通过标签选择特定的身体？

4

1 回答 1

1

实际上，我刚刚发现您可以为每面墙使用声明的变量来选择它们。所以下面的代码在改变墙壁的位置方面起作用：

window.addEventListener("resize", function () {
    canvas.width = container.offsetWidth;
    canvas.height = container.offsetHeight
    Matter.Body.setPosition(ground, {x: canvas.width / 2, y: canvas.height + 30})
    Matter.Body.setPosition(wallRight, {x: canvas.width + 30, y: canvas.height / 2})
});

但是，我仍然需要ground根据container.offsetWidth. 但似乎改变已创建主体宽度的唯一方法是缩放它。如果您知道以像素为单位更改主体宽度而不是缩放它的方法，请在评论中联系。

于 2019-07-23T10:29:48.037 回答