javascript - 在 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 没有好的文档(尽管相信我它是一个优秀的引擎)。您应该使用具有属性 render 的对象调用 Engine.create，该对象具有属性 element 和 canvas .如果您不将 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;

还有一个内部调整大小的方法，但并不比上面的选项好多少。因此，如果您真的想要覆盖选项(也许您正在引擎之上开发)，那么我建议您通过简单地离开 render.canvas 将 Canvas 创建留给 Matter.JS未定义。

这是使用 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