在 matterjs 中更改默认 canvas 大小

Question

我正在尝试覆盖设置为 canvas 的默认尺寸：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
    });
})()

我收到警告：

[Matter] warn: No "render.element" passed, "render.canvas" was not inserted into document.

根据docs：

render.element HTMLElement

A reference to the element where the canvas is to be inserted (if render.canvas has not been specified)

Answer 1

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

现在，如果你想设置 canvas 的大小，你可以通过主要对象并遵循此路径 -> render.options.width 和 render.options.height 这样就像：

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

但问题是当你传递一个你自己的canvas元素时，Matter决定canvas高度和宽度应该是设置给元素的那些而不是那些聪明的程序员正在传递选项。我已提交 this issue at Matter.js's GitHub repository 并提供了包含解决方案的 PR，但可能不会很快合并。因此，我还不能真正为您提供一个完美的解决方案来在选项中覆盖它，但是解决这个问题的一个简单方法是在您初始化引擎之前设置 canvas.width 和 canvas.height。

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

还有一个内部调整大小的方法，但并不比上面的选项好多少。因此，如果您真的想要覆盖选项（也许您正在引擎之上开发），那么我建议您将 canvas 创建留给 Matter.JS，只需留下 render.canvas undefined.

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

 // 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 填满整个页面使用：

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

在 matterjs 中更改默认 canvas 大小

Change default canvas size in matterjs

javascript

matter.js