Как разместить холст p5. js внутри контейнера div? - PullRequest
Новая
       6

Как разместить холст p5. js внутри контейнера div?

1 голос
/ 18 марта 2020

Пока у меня есть размер холста p5. js, чтобы реагировать на его родительский размер контейнера div, используя document.getElementById("divName").offsetWidth и .offsetHeight, но мне не удалось понять, почему он не разделяет свою позицию как хорошо. Вот упрощенная версия моего приложения.

p5. js: 

var sketchWidth;
var sketchHeight;

function setup() {
  sketchWidth = document.getElementById("square").offsetWidth;
  sketchHeight = document.getElementById("square").offsetHeight;
  createCanvas(sketchWidth, sketchHeight);
}

function draw() {
  background(0,0,255);
}

function windowResized() {
  sketchWidth = document.getElementById("square").offsetWidth;
  sketchHeight = document.getElementById("square").offsetHeight;
  resizeCanvas(sketchWidth, sketchHeight);
}

HTML: 

<html>
  <body>
    <div id="squareContainer">
      <div id="square">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
        <script src="square.js"></script>
      </div>
    </div>
  </body>

  <style>
    body {
      background-color: black;
    }

    #squareContainer {
      display: flex;
      width: 50%;
      height: 50%;
      margin: 0 auto;
      background-color: white;
    }

    #square {
      box-sizing: border-box;
      width: 80%;
      height: 80%;
      margin: auto;
      background-color: red;
    }
  </style>
</html>

А вот скриншот того, что я сейчас рендеринг. Как вы можете видеть, синий квадрат (мой код p5. js) имеет те же размеры, что и красный квадрат (div), но я бы хотел, чтобы он также перекрывался в той же позиции.

Большое спасибо за любую помощь!

1 Ответ

0 голосов
/ 18 марта 2020

См. Документацию createCanvas a p5.Renderer. Установите контейнер как рендеринг parent(): 

let renderer = createCanvas(sketchWidth, sketchHeight);
renderer.parent("square");
...