ReactJS: изменение размера холста внутри flexbox

Question

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

Как можно уменьшить размер холста вместе с окном браузера?

Вот где я сейчас нахожусь: https://codesandbox.io/s/thirsty-pare-vk4yb

Answer 1

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

Вы можете получить избавиться от установки высоты холста (я следую вашему примеру, я не уверен, как это повлияет на реальный случай) и использовать аналогичный подход, как <Container /> и <FloorPlanWrapper /> - установить родительский display: flex и ребенок flex-grow: 1.

Вот так:

const FloorPlanWrapper = styled.div`
  flex-grow: 1;
  background-color: blue;
  display: flex;
  flex-direction: column;
`;

const StyledCanvas = styled.canvas`
  background-color: yellow;
  display: block;
  flex-grow: 1;
`;

https://codesandbox.io/s/boring-dubinsky-0rzyi

Примечание: Даже если flexbox может позаботиться о канве размер , не может позаботиться о его разрешении . Для этого вам необходимо прослушать изменение размера окна и обновить его разрешение (canvas.width = canvas.height * (canvas.clientWidth / canvas.clientHeight);), а затем повторно отрендерить его.

https://codesandbox.io/s/boring-dubinsky-0rzyi

Спасибо https://bob1german.com/2015/03/09/stretching-the-html-5-canvas-fixing-aspect-ratio-problems/ за эту формулу