React - změna velikosti canvasu podle velikosti okna

React - změna velikosti canvasu podle velikosti okna
« kdy: 06. 12. 2022, 20:32:38 »
Ahoj,

skoro se stydím dát takovou otázku sem, ale Stackoverflow ani Reddit nepomohly.
V Reactu vytvářím webovou aplikaci, která by měla mít následující layout:
  • Top bar s ovládacími prvky - výška daná velikostí obsahu
  • Side bar s ovládacími prvky - šířka daná velikostí obsahu
  • Canvas - zabírá zbytek volného místa na stránce, vykreslují se na něj nějaká data
Aplikace by měla vždy přesně vyplnit výšku i šířku okna prohlížeče - to jde snadno udělat pomocí dvou flex boxů, problém ale nastáva u canvasu, u kterého je nutné nastavit explicitně šířku a výšku, jinak je obsah úplně rozmazaný. Co jsem se dočetl, je to normální a rozlišení se opravdu musí vždy nastavit.
Rozlišení nastavuji takto (proměnná canvas je reference na canvas prvek):
Kód: [Vybrat]
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
To dělám pří prvním vykreslení pomocí effect hooku pokaždé když se změní velikost okna pomocí event listeneru.

Když to ale udělám, canvas se přestane přizpůsobovat velikosti okna prohlížeče, přesněji na zvětšení výšky okna reaguje správně, na zvětšení šířky tak napůl a při zmenšení okna se neděje vůbec nic.

Netušíte někdo, jak z toho ven? Na https://codesandbox.io/s/toggle-example-forked-vpu6ke?file=/canvas.js jsem dal jednoduchý příklad - jen pro ilustraci, co nefunguje.
« Poslední změna: 06. 12. 2022, 20:44:45 od Petr Krčmář »


L..

  • ****
  • 258
    • Zobrazit profil
    • E-mail
Re:React - změna velikosti canvasu podle velikosti okna
« Odpověď #1 kdy: 06. 12. 2022, 21:30:14 »
Obal si ten canvas divem s overflow: hidden a resizuj canvas podle něj.

Re:React - změna velikosti canvasu podle velikosti okna
« Odpověď #2 kdy: 06. 12. 2022, 21:51:04 »
Obal si ten canvas divem s overflow: hidden a resizuj canvas podle něj.
Díky, to funguje perfektně - to by mě samotného nikdy nenapadlo.