在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
    });
})()

警告我得到:

[问题]警告:没有传递"render.element","render.canvas"没有插入到文档中.

根据文档:

render.element HTMLElement

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

Answer 1

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

现在,如果你想设置你经过的主要对象画布的大小,并按照这条道路- > render.options.width和render.options.height所以这将是这样的:

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

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

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

还有一个内部调整大小的方法,但没有比上面的选项更好.因此,如果您真的要覆盖选项(也许您正在开发引擎上),那么我建议您通过简单地离开将画布创建留给Matter.JS render.canvas undefined.

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

 // 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