你有没有数过,打开一个在线白板要等多久?注册、登录、等云端同步,然后浏览器开始吞那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,不是又一个需要账户的云服务。
热门跟贴