Масштабирование холста по размеру - Материя. js - PullRequest
0 голосов
/ 03 февраля 2020

Согласно приложенному изображению, я пытаюсь удалить участок, который выходит за нижнюю горизонтальную стену, нацарапанную зеленым.

Я новичок в этом деле. js и у меня проблемы с шириной и высотой холста. Я пробовал несколько способов, но все еще безрезультатно.

Я не совсем понимаю asp, как двигатель масштабируется и рендерится сам. Это также станет размытым в зависимости от ширины и высоты, которые я установил.

Как правильно настроить холст, чтобы он соответствовал миру ?

Example

Я использую этот пример смешанных форм из материи. js demo .

    //Fetch our canvas
    var canvas = document.getElementById('world3');
    var width = 200, height = 200; // example width and height


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

    var Engine = Matter.Engine,
            Render = Matter.Render,
            Runner = Matter.Runner,
            Composites = Matter.Composites,
            Common = Matter.Common,
            MouseConstraint = Matter.MouseConstraint,
            Mouse = Matter.Mouse,
            World = Matter.World,
            Bodies = Matter.Bodies;

        // create engine
        var engine = Engine.create(),
            world = engine.world;

        // create renderer
        var render = Render.create({
            canvas:canvas,
            engine: engine,
            options: {
            background: '#fff',
            showAngleIndicator: true,
            wireframes:false,
            },
        });

// truncated below code as is similar to the demo's
---
---

css:

#world3 {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
}
...