Draw it

ແຕ້ມມັນເປັນຄໍາຮ້ອງສະຫມັກ canvas ຮ່ວມມືໃນເວລາທີ່ແທ້ຈິງທີ່ພັດທະນາໂດຍໃຊ້ Flutter ສໍາລັບ frontend ແລະ Node.js + Express ກັບ WebSocket ສໍາລັບການ synchronization backend. ແອັບດັ່ງກ່າວອະນຸຍາດໃຫ້ຜູ້ໃຊ້ຫຼາຍຄົນແຕ້ມພ້ອມໆກັນຢູ່ໃນກະດານແບ່ງປັນ, ສະແດງໃຫ້ເຫັນຄວາມຊ່ຽວຊານໃນການພັດທະນາ UI ຂ້າມເວທີແລະການສື່ສານເຄືອຂ່າຍໃນເວລາຈິງ.

🚀 ຈຸດປະສົງຫຼັກ:
ເປີດໃຊ້ວຽກຮ່ວມກັນແບບສົດໆແບບບໍ່ຕິດຂັດໃນກະດານແຕ້ມແບບແບ່ງປັນໂດຍໃຊ້ສະຖາປັດຕະຍະກຳທີ່ຂັບເຄື່ອນດ້ວຍເຫດການ.

🧱 Tech Stack:

Flutter (Dart): ໜ້າມືຖືຂ້າມເວທີທີ່ມີການຈັດການທ່າທາງ ແລະການສະແດງຜົນແບບກຳນົດເອງ

Node.js + Express.js: ເຊີບເວີ backend ທີ່ມີ WebSocket ຮອງຮັບການສື່ສານສອງທິດທາງຢ່າງຕໍ່ເນື່ອງ

WebSocket (ws): ສໍາລັບການ synchronization ໃນເວລາທີ່ແທ້ຈິງຂອງ strokes ໃນທົ່ວຜູ້ໃຊ້

CustomPainter: ການແຕ້ມຮູບແບບກອບໂດຍກອບທີ່ມີປະສິດທິພາບໃນ canvas

Permission Handler & RepaintBoundary: ບັນທຶກຮູບແຕ້ມເປັນຮູບພາບໃນອຸປະກອນ

🖌️ຄຸນສົມບັດຫຼັກ:

✍️ ການແຕ້ມແບບສົດໆທີ່ແບ່ງປັນ: ຜູ້ເຂົ້າຮ່ວມທຸກຄົນເຫັນຈັງຫວະຂອງແຕ່ລະຄົນໃນທັນທີໂດຍໃຊ້ WebSocket ອອກອາກາດ.

📡 ເຊີບເວີ WebSocket ທີ່ບໍ່ມີລັດ: ເຊີບເວີ Node.js ທີ່ມີນ້ຳໜັກເບົາ ຮັກສາການເຊື່ອມຕໍ່ຊັອກເກັດທີ່ເຄື່ອນໄຫວ ແລະ ຖ່າຍທອດເຫດການສະຕັອກແກັດດ້ວຍການຕອບສະໜອງຕໍ່າ.

🎨 ເຄື່ອງຈັກ Canvas: ທ່າທາງສໍາຜັດຖືກປ່ຽນເປັນເສັ້ນທາງ vector ທີ່ສາມາດແຕ້ມໄດ້ ແລະສະແດງໂດຍໃຊ້ Flutter's CustomPainter.

📁 Export Canvas: ຜູ້ໃຊ້ສາມາດບັນທຶກ artwork ຂອງເຂົາເຈົ້າເປັນຮູບພາບ

🔧 ສະຖາປັດຕະຍະກຳແບບໂມດູລາ: ແຍກຊັ້ນຕ່າງໆສຳລັບການແຕ້ມຕາມເຫດຜົນ, ເຫດການເຊີບເວີ, ແລະການເຊື່ອມໂຍງແພລດຟອມ.