Fórum Root.cz
Hlavní témata => Vývoj => Téma založeno: prechodovy_jev 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):
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 (https://codesandbox.io/s/toggle-example-forked-vpu6ke?file=/canvas.js) jsem dal jednoduchý příklad - jen pro ilustraci, co nefunguje.
-
Obal si ten canvas divem s overflow: hidden a resizuj canvas podle něj.
-
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.