„Draw it“ yra realiuoju laiku bendradarbiaujanti drobės programa, sukurta naudojant „Flutter“ sąsajai ir „Node.js + Express“ su „WebSocket“, skirta foniniam sinchronizavimui. Programa leidžia keliems naudotojams vienu metu piešti bendroje lentoje, demonstruodama tiek kelių platformų vartotojo sąsajos kūrimo, tiek realiojo laiko tinklo ryšio patirtį.
🚀 Pagrindinis tikslas:
Įgalinkite sklandų bendradarbiavimą realiuoju laiku bendroje piešimo lentoje naudodami našią, įvykiais pagrįstą architektūrą.
🧱 Tech Stack:
„Flutter“ („Dart“): kelių platformų mobilioji sąsaja su gestų valdymu ir tinkintu atvaizdavimu
Node.js + Express.js: Backend serveris su WebSocket palaikymu nuolatiniam dvikrypčiui ryšiui palaikyti
„WebSocket“ (ws): skirtas vartotojų potėpių sinchronizavimui realiuoju laiku
CustomPainter: efektyvus kadras po kadro piešimas ant drobės
Leidimų tvarkytuvas ir perdažymo riba: išsaugokite brėžinius kaip vaizdus įrenginyje
🖌️ Pagrindinės savybės:
✍️ Bendras piešimas realiuoju laiku: visi dalyviai akimirksniu mato vienas kito potėpius naudodami „WebSocket“ transliaciją.
📡 WebSocket serveris be būsenos: lengvasis Node.js serveris palaiko aktyvius lizdų ryšius ir perduoda smūgio įvykius su maža delsa.
🎨 „Canvas Engine“: prisilietimo gestai konvertuojami į nubrėžiamus vektorinius kelius ir pateikiami naudojant „Flutter's CustomPainter“.
📁 Eksportuoti drobę: vartotojai gali išsaugoti savo meno kūrinius kaip vaizdą
🔧 Modulinė architektūra: atskiri sluoksniai, skirti piešti logiką, serverio įvykius ir platformos integraciją.