关于这个应用
自由绘画、涂鸦和创作——你的画布,你的规则
Draw it 是一款实时协作画布应用,前端使用 Flutter 开发,后端使用 Node.js + Express 和 WebSocket 进行同步。该应用支持多位用户同时在共享画板上绘图,展现了我们在跨平台 UI 开发和实时网络通信方面的专业技能。
🚀 关键目标:
使用高性能的事件驱动架构,在共享画板上实现无缝、实时的协作。
🧱 技术栈:
Flutter (Dart):跨平台移动前端,支持手势处理和自定义渲染
Node.js + Express.js:支持 WebSocket 的后端服务器,可实现持久双向通信
WebSocket (WS):用于跨用户实时同步笔触
CustomPainter:在画布上高效逐帧绘制
权限处理程序和 RepaintBoundary:将绘制内容保存为设备端图片
🖌️ 核心功能:
✍️ 实时共享绘制:所有参与者均可通过 WebSocket 广播即时查看彼此的笔触。
📡 无状态 WebSocket 服务器:轻量级 Node.js 服务器维护活动的套接字连接,并以低延迟传递笔触事件。
🎨 Canvas 引擎:触摸手势将转换为可绘制的矢量路径,并使用 Flutter 的 CustomPainter 进行渲染。
📁 导出画布:用户可以将自己的作品保存为图像。
🔧 模块化架构:绘图逻辑、服务器事件和平台集成均采用独立的层级结构。