你有没有数过,打开一个在线白板要等多久?注册、登录、等云端同步,然后浏览器开始吞那2MB的JavaScript。我只是想要一块空白画布而已。
所以有了MindNotes Pro——一个只有3个生产依赖的绘图应用:
![]()
react、react-dom、zustand。
就这些。没有Redux,没有styled-components,没有axios,没有lodash。整个绘图引擎塞在一个600行的Canvas.tsx文件里,直接调用Canvas API,没借助任何绘图库。
状态管理靠3个Zustand小仓库。Zustand本身不到1KB,不需要样板代码。一个useDrawingStore装下所有绘图状态,订阅触发Canvas重绘。硬件加速的2D绘制,像素级控制,几千笔笔触也不会拖垮DOM——SVG做命中测试会更简单,但Canvas扛住了。
所有资源都打进了包:字体、图标、甚至纸张背景的SVG噪点纹理。这意味着在中国不用翻墙也能打开。
UI没走常见的冷蓝灰,用了暖大地色系:#f5f0e8背景,#c47a5a强调色,SVG分形噪点模拟纸张质感。
技术栈很薄:React 18、TypeScript 5、Vite 5、Zustand、Canvas API、Tailwind CSS。但薄有薄的好处——你下载的是一个能离线跑的zip,不是又一个需要账户的云服务。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.