更改matterjs中的默认画布大小

Question

我正在尝试覆盖设置为：800x600 的默认画布大小

在对文档进行了一些挖掘后，我发现：

Matter.Render.create([options])

看起来很有趣的选项是：render.options.height和render.options.width。

如何正确使用它们

我尝试过的：

(function(){
    //this is the correct reference
    var canvas = document.getElementById('canvas');
    var renderer = Matter.Render.create({
        canvas: canvas,
        height: 1000,
        width: 1000
    });
})()

警告：

[Mater]warn:未传递"render.element"，未传递"render.canvas"插入到文档中。

根据文件：

render.element HTMLElement

对画布所在元素的引用要插入（如果未指定render.canvas）

Answer 1

不幸的是，Matter.js没有很好的文档（尽管相信我，它是一个出色的引擎）。您应该使用具有属性render的对象调用Engine.create，该对象具有属性element和canvas。如果不将画布传递给此函数，则会创建一个新的画布元素，并将其附加到给定的元素。尽管在我的测试用例中，它似乎仍然需要一个元素作为呈现属性。我知道这很奇怪，但情况越来越糟。。。

现在，如果你想设置画布的大小，你可以穿过主对象，然后沿着这个路径->render.options.width和render.options.height，这样就有点像：

{
   render: {
       options: {
           height: 1000,
           width: 1000
       }
   }
}

但问题是，当你传递自己的画布元素时，Matter决定画布的高度和宽度应该是为该元素设置的，而不是智能程序员传递选项的。我已经在Matter.js的GitHub存储库中提交了这个问题，并提供了解决方案的PR，但可能不会很快合并。因此，我还不能真正为您提供一个完美的解决方案来覆盖选项中的这一点，但解决这一问题的一个简单方法是在初始化引擎之前设置canvas.width和canvas.height。

canvas.width = 1000;
canvas.height = 1000;

还有一个内部调整大小的方法，但并不比上面的选项更好。因此，如果你真的想覆盖这些选项（也许你是在引擎之上开发的），那么我建议你把画布的创建留给Matter.JS，只需留下render.canvasundefined。

以下是使用canvas.width和canvas.height的完整解决方案，请注意，上面提到的警告不再存在，Matter.js使用给定的画布元素并将其附加到给定的渲染元素

 // Matter.js module aliases
 var Engine = Matter.Engine,
   World = Matter.World,
   Body = Matter.Body,
   Bodies = Matter.Bodies,
   Composites = Matter.Composites,
   Composite = Matter.Composite,
   Constraint = Matter.Constraint,
   engine;
 (function() {
   var canvas = document.getElementById('canvas');
   var width = 1000,
     height = 1000;
   canvas.width = width;
   canvas.height = height;
   engine = Engine.create({
     render: {
       element: document.body,
       canvas: canvas,
       options: {
         width: 1000,
         height: 1000
       }
     }
   });
   // run the engine
   Engine.run(engine);
 })();

<script src="http://brm.io/js/libs/matter-js/matter-0.7.0.min.js"></script>
<canvas id="canvas"></canvas>

编辑：

如果您需要画布来填充整个页面，请使用：

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", function(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// Matter.js module aliases
var Engine = Matter.Engine,
  World = Matter.World,
  Body = Matter.Body,
  Bodies = Matter.Bodies,
  Composites = Matter.Composites,
  Composite = Matter.Composite,
  Constraint = Matter.Constraint,
  engine;
(function() {
  var canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  engine = Engine.create({
    render: {
      canvas: canvas
    }
  });
  
  window.addEventListener("resize", function(){
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
  });
  // run the engine
  Engine.run(engine);
})();

body {
  margin: 0;
  overflow: hidden;
}

<script src="http://brm.io/js/libs/matter-js/matter-0.7.0.min.js"></script>
<canvas id="canvas"></canvas>

编辑2：拉取请求已合并，将在下一个边缘构建中可用。

https://github.com/liabru/matter-js/issues/168