9

我正在尝试覆盖设置为的默认画布大小：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
    });
})()

警告我得到：

[问题]警告：没有“render.element”通过，“render.canvas”没有插入到文档中。

根据文档：

render.element HTML元素

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

4

1 回答 1

15

不幸的是，Matter.js 没有很好的文档（尽管相信我它是一个优秀的引擎）。您应该Engine.create使用具有属性的对象调用，该属性render具有属性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.canvas undefined.

canvas.width这是使用and的完整解决方案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

于 2015-11-09T08:44:50.453 回答