date: 2026-06-15
version: V1.0.0
tag: V1.0.0
commit: 8f556fb468ea91fd32a740fab28e1279f320d3f7
author: William
license: MIT
---

一次点击，浏览器里就能完成从「灵感图」到「可制作的拼豆图纸」再到「社区分享」的全流程。

拼豆（Perler Bead / Hama Bead / 融合豆）是一种历史悠久的小颗粒拼装手作。爱好者通常需要把一张图人工「像素化」、逐格选择对应颜色、统计用量，再对着图纸一颗一颗地拼。

这个过程有三大痛点：

1. **设计门槛高**：靠纸笔、Excel 表格画网格，效率极低。
2. **配色不精准**：肉眼挑色经常和实际拼豆色号存在偏差。
3. **作品难分享**：做好的图纸没有统一平台可以保存、检索与展示。

V1.0.0 正是为了解决这些问题而生的**第一个正式版本**：把「专业画板 + AI 辅助 + 社区 + 店家」四件套，第一次以完整的 Web 应用形态呈现在爱好者面前。

 1. 专业级网格画布

- HTML5 Canvas 双层结构：**底层网格线 + 上层珠子**。
- 脏矩形重绘：移动 / 缩放只重绘变化区域，性能稳定。
- 默认 29×29 标准底板起步，最大支持 100×100。
- 缩放使用 CSS `transform`，避免全量重绘。
- 珠子渲染为带高光的圆形，更接近真实拼豆外观。

 2. 完整的绘图工具集

内置 7 种基础工具，**B / E / G / I / L / R / C** 一键切换：

| 工具 | 快捷键 | 说明 |
| --- | --- | --- |
| 画笔 | B | 单格上色 |
| 橡皮 | E | 单格清除 |
| 填充 | G | Flood Fill（BFS + 队列，不爆栈） |
| 取色器 | I | 从画布吸取已有颜色 |
| 直线 | L | Bresenham 直线 |
| 矩形 | R | 矩形描边 / 填充 |
| 圆形 | C | 圆形描边 / 填充 |

> 撤销 / 重做：`Ctrl+Z` / `Ctrl+Shift+Z`，**最多 100 步**，基于命令模式的历史栈实现。

3. 官方拼豆色板

- 内置 **50+ 种拼豆颜色**：基础 / 荧光 / 金属 / 夜光。
- 支持**分类筛选、关键词搜索、最近使用记录**。
- 想要自定义色板？直接编辑 `src/core/beadColors.ts` 即可。

 4. 图片转图：CIEDE2000 精准配色

- 图像 → 拼豆图纸**全自动**：上传 JPG / PNG / WebP / GIF。
- 颜色匹配基于 **CIEDE2000 色差公式**，比简单的 RGB 欧氏距离更接近人眼感受。
- 可选 **Floyd–Steinberg 抖动算法**，让渐变更平滑。
- 可调参数：目标网格尺寸、颜色数量限制、抖动开关、亮度 / 对比度。
- 同一 RGB 输入的颜色匹配**结果自动缓存**，大幅提升大图转换速度。

 5. AI 动漫化（浏览器本地推理）

V1.0.0 已内置 **7 套 AnimeGANv3 ONNX 模型**，并通过 **ONNX Runtime Web** 在浏览器本地运行——**图片不需要上传到服务器**：

| 模型 | 风格 |
| --- | --- |
| `Hayao` | 宫崎骏 |
| `Shinkai` | 新海诚 |
| `large_Ghibli` | 吉卜力大模型 |
| `JP_face` | 日漫人像 |
| `PortraitSketch` | 素描 |
| `Cute` | Q 版 |
| `face_paint_v2` | 脸绘 |

> 首次加载需下载数十到上百 MB 模型，建议使用 Chrome / Edge 桌面版以获得最佳 WebAssembly / WebGL 性能。

 6. 多格式导出

| 格式 | 用途 |
| --- | --- |
| **PNG** | 高清图案，用于打印 / 投影 |
| **PDF** | 图案 + 材料清单（jsPDF 生成） |
| **CSV** | 各颜色珠子用量统计，便于采购 |
| **`.pbd`** | 工程文件，可重新加载继续编辑 |

 7. 社区与服务端

- **图纸库 Pattern Library**：登录后将作品保存到云端，跨设备访问。
- **展示柜 Showcase**：浏览与分享社区作品。
- **店家模块 Shop**：店家可管理拼豆库存，**与图案用量自动关联**。
- **管理后台 Admin**：用户与作品管理（仅管理员可见）。
- **三角色体系**：`user` / `shop` / `admin`。
- **首登强改密**：默认账号首次登录必须修改密码（可在后台配置）。

8. 跨端体验

- 响应式布局：桌面 / 平板 / 移动端自适应。
- 移动端提供**抽屉式工具栏 + 底部浮动按钮**。
- 支持浅色 / 暗色主题。

前端

- React 18 + TypeScript 5
- Vite 6（构建）
- Zustand（状态管理）
- Tailwind CSS 3（样式）
- HTML5 Canvas（画布渲染）
- ONNX Runtime Web（AI 推理）
- jsPDF（PDF 导出）
- React Router 6（路由）

后端

- Node.js + Express
- Multer（文件上传）
- JSON 文件型数据库（`server/data/db.json`）
- CORS 跨域支持

AI 模型

- AnimeGANv3 全系列（ONNX 格式，浏览器端推理）

 

1. 新建项目 → 设定网格尺寸（默认 29×29）。
2. 手动绘制 → 选择工具与颜色，在画布上放置拼豆。
3. 或导入图片 → `Ctrl+I`，可先选 AI 模型做动漫化，再调整网格尺寸 / 抖动参数后生成图案。
4. 导出 → PNG / PDF / CSV / `.pbd` 工程文件。
5. 保存到云端 → `Ctrl+S` 登录后即可保存到个人图纸库。
6. 分享到展示柜 → 一键发布到社区。

 

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。