Skip to content
Mentat-Uran
BeadForge
Public

About

豆绘 (BeadForge) 是一款零门槛的在线拼豆图案设计工坊。用户只需打开浏览器，即可在画布上自由创作拼豆像素画——150+ 色号覆盖 Perler / Hama / Artkal / MARD 四大品牌，画笔、填充、对称模式一应俱全；更支持图片转拼豆、AI 文本生成图案、高清打印带编号图纸、CSV 采购清单及成本估算。整个应用为单 HTML 文件架构，无需安装、离线可用，让拼豆创作像画画一样简单。

beadforge.mentat4.chatgpt.site/

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

4 stars

Watchers

0 watching

Forks

1 fork
Report repository
BranchesTags

Repository files navigation

🎨 豆绘 BeadForge

HTML5 CSS3 JavaScript License

零门槛的在线拼豆图案设计工坊
无需安装，打开即用，支持 150+ 种颜色、图片转图纸、移动端触控和本地存档

点击 https://beadforge.mentat4.chatgpt.site/ 在线访问最新版本。

📖 目录

✨ 功能特点

🖌️ 绘图工具

  • 画笔工具 - 自由绘制拼豆图案
  • 橡皮擦 - 擦除已放置的拼豆
  • 填充桶 - 一键填充闭合区域
  • 取色器 - 吸取画布上已有的颜色
  • 拖动工具 - 单独拖动画布视角，避免移动画布时误画

🎨 颜色系统

  • 4 大品牌支持：Perler、Hama、Artkal、MARD
  • 150+ 种颜色，涵盖常用色系
  • 颜色搜索 - 快速查找颜色
  • 颜色家族分类 - 按红、黄、蓝等色系筛选
  • 颜色统计 - 实时查看每种颜色的用量和成本估算

📐 画布操作

  • 画布尺寸调整 - 支持 5×5 到 200×200 的自定义尺寸
  • 预设尺寸 - 快速选择标准拼豆板尺寸
  • 旋转画布 - 顺时针或逆时针旋转 90 度
  • 翻转画布 - 水平或垂直翻转
  • 对称模式 - 支持水平或垂直对称绘制
  • 彩色初始图案 - 首次打开即可从一颗彩色像素爱心开始创作

🔍 视图控制

  • 缩放功能 - 10% 到 800% 任意缩放
  • 拖拽平移 - 使用“拖动”工具移动画布视角
  • 双指缩放 - 移动端可以用双指查看局部细节
  • 拼豆效果 - 切换 2D 平面或 3D 立体显示
  • 网格显示 - 显示或隐藏网格线

📤 导入导出

  • 导出 JSON - 保存设计数据，支持后续继续编辑
  • 导入设计 - 加载之前保存的 JSON 文件
  • 导出图片 - 输出高清 PNG 图案
  • 图片转拼豆 - 将照片转换为拼豆网格图纸
  • 导出采购清单 - 生成 CSV 格式的颜色用量清单
  • 打印拼豆图纸 - 输出带颜色编号、网格线和颜色图例的制作图

💾 本地存档

  • 手动保存 - 点击顶部“保存”按钮，或使用 Ctrl + S / Command + S
  • 自动保存 - 页面进入后台或离开页面时保存当前作品
  • 重新打开自动恢复 - 恢复画布尺寸、颜色和完整图案
  • 小红书本地存储 - 在小红书小工具内使用隔离的本地存储，不上传用户作品
  • 备用存储 - 使用 IndexedDB 提供异步冗余存储

本地存档不是账号云同步。清理小红书数据、卸载应用或更换设备后，不保证还能找回作品；重要设计建议同时导出 JSON 备份。

📱 移动端与小红书

  • 移动端优先布局 - 画布优先显示，设置区自然向下排列
  • 安全区适配 - 顶部控制区为小红书右上角分享和更多按钮留出空间
  • 大触控区域 - 关键按钮尽量保持至少 44px 的触控尺寸
  • 相册入口 - 从设备相册选择图片
  • 摄像头入口 - 调用后置摄像头拍照转换
  • 小红书相册保存 - 在支持小红书桥接能力的环境中保存到系统相册

🤖 AI 功能

  • 文本生成图案 - 根据文字描述生成可导入的拼豆网格数据
  • 支持外部 LLM - 可以与 ChatGPT、Claude 等工具配合生成 JSON
  • 隐私友好 - 仓库不包含 API Key，也不内置第三方 AI 服务

💰 成本统计

  • 拼豆数量统计 - 实时显示使用的拼豆总数
  • 颜色种类统计 - 显示使用的颜色数量
  • 成本估算 - 根据单价计算材料成本
  • 价格设置 - 支持自定义不同材料和品牌的单价

🚀 快速开始

方式一：在线使用

打开最新线上版本：

https://beadforge.mentat4.chatgpt.site/

无需安装，手机和桌面浏览器都可以直接开始设计。

方式二：直接打开

  1. 下载或克隆本仓库。
  2. 打开 BeadForge.html。
  3. 选择画布尺寸和颜色，开始绘制。

方式三：使用本地静态服务器

在项目目录运行：

python -m http.server 8000

然后打开：

http://127.0.0.1:8000/BeadForge.html

系统要求

  • ✅ Chrome、Firefox、Safari 或 Edge 等现代浏览器
  • ✅ 支持 HTML5、Canvas、Pointer Events 和 IndexedDB
  • ✅ 核心编辑功能无需账号和后端
  • ✅ 图片选择、摄像头权限和保存到系统相册由当前浏览器或小红书宿主决定

📚 使用指南

基础操作

操作 说明
点击或拖动 在画笔模式放置拼豆，在橡皮模式擦除拼豆
选择“拖动” 平移画布视角，不修改图案
双指移动 移动端平移或缩放画布
鼠标滚轮 缩放画布
Ctrl + Z / Command + Z 撤销上一步操作
Ctrl + S / Command + S 保存当前作品到本地
B 切换到画笔
E 切换到橡皮
F 切换到填充桶
I 切换到取色器
H 切换到拖动工具
+ / - 放大或缩小画布
0 或空格 恢复默认视图

设计流程

  1. 打开工具 - 在线访问，或在本地打开 BeadForge.html。
  2. 设置画布尺寸 - 选择预设尺寸，或输入 5×5 到 200×200 的自定义尺寸。
  3. 选择颜色 - 从品牌色板、颜色分类或搜索结果中选择需要的颜色。
  4. 绘制图案 - 使用画笔、橡皮、填充和取色工具完成图案。
  5. 调整视图 - 使用缩放和“拖动”工具检查画布细节。
  6. 保存作品 - 点击顶部“保存”；重要作品再导出 JSON 做备份。
  7. 导出成果 - 导出高清 PNG、采购清单，或打开打印图纸选项。

图片转拼豆

  1. 打开“图片转拼豆”。
  2. 在小红书内选择“从相册选图”或“拍照”。
  3. 首次使用时，按系统提示允许相册或摄像头权限。
  4. 调整目标尺寸、颜色数量、抖动和背景处理选项。
  5. 确认转换，继续用画笔微调，再保存或导出。

📕 小红书小工具兼容

本项目已按小红书 Mini Tool 打包规范整理，核心包保持离线可运行，入口为根目录的 index.html，脚本、样式和图标均使用包内相对资源。

权限与相册

  • 相册选择使用图片文件入口，支持从系统选择器选取照片。
  • 拍照入口使用后置摄像头能力。
  • 真实权限弹窗由小红书宿主和手机系统控制；第一次使用时按提示允许即可。
  • 图片导出在支持 window.xhs.miniTool 的环境中会写入临时文件，再保存到系统相册。
  • 在普通浏览器中会提供可长按保存的图片回退界面。

存档边界

小红书没有用于本项目的账号云端存档接口，因此存档使用小红书小工具实例内的设备本地存储。它适合“下次继续编辑”，不等同于跨设备同步或云端备份。需要长期保存时，请使用“导出 JSON”。

📁 文件说明

BeadForge.html             # 主程序：HTML、CSS 和 JavaScript 单文件源代码
favicon.svg                # 页面图标
test_import.json           # 导入功能示例
test_raw_grid.json         # 小尺寸网格示例
test_invalid_colors.json   # 非法颜色数据校验示例
BeadForge-Post.md          # 项目背景和产品说明
AGENTS.md                  # 仓库协作说明
CODE_OF_CONDUCT.md         # 社区行为准则
CONTRIBUTING.md            # 贡献指南
SECURITY.md                # 安全问题报告说明
LICENSE                    # MIT 许可证

💡 技术亮点

前端技术

  • 单文件架构 - 核心应用不依赖构建系统和后端
  • 现代 CSS - CSS 变量、Flexbox、Grid 和响应式布局
  • 移动端适配 - 安全区、动态可视高度、触控手势和弹窗滚动
  • 离线资源 - 核心编辑功能不依赖外部字体或网络请求

Canvas 绘图

  • Canvas 网格渲染 - 支持大尺寸拼豆画布
  • 交互式视口 - 绘制、拖动、缩放互不误触
  • 像素级输出 - 使用清晰的网格和像素化显示
  • 撤销管理 - 使用历史栈保存可撤销的编辑状态

颜色算法

  • CIEDE2000 - 用于更准确的颜色差异计算
  • Lab 颜色空间 - 改善图片转拼豆时的颜色匹配
  • 颜色缓存 - 减少重复计算，提高转换效率

数据与兼容

  • 二维数组 - 网格数据结构直观、易于导入导出
  • 本地存档 - localStorage 快速恢复，IndexedDB 异步备用
  • 宿主桥接 - 仅在小红书提供能力时调用相册保存接口
  • 无内置密钥 - 外部 AI 能力由用户自行提供，仓库不保存凭据

🌐 浏览器兼容性

环境 支持状态
Chrome / Edge ✅ 推荐，桌面和移动端均支持
Firefox ✅ 支持
Safari / iOS ✅ 支持触控绘制和双指缩放
小红书小工具 WebView ✅ 已按 Mini Tool 离线资源和移动端规则适配
IE ❌ 不支持

小红书打包版按 Chrome 61 / Android 8.1 兼容边界处理了 CSS 回退和脚本语法，真实相册、摄像头权限弹窗仍需要在小红书手机客户端中确认。

🗺️ 开发计划

已实现 ✅

  • 基础绘图、橡皮、填充和取色
  • 150+ 种品牌颜色
  • 导入导出和 JSON 校验
  • 图片转换功能
  • 打印和采购清单
  • 撤销功能
  • 主题切换
  • 移动端响应式布局
  • 拖动画布和双指缩放
  • 小红书相册、摄像头和相册保存桥接
  • 小红书本地存档与重新打开自动恢复

计划中 📝

  • 图层系统
  • 动画预览
  • 更完整的 3D 预览模式
  • 社区分享功能
  • 引导式教程模式
  • 多语言支持

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

提交 Issue

  • 🐛 Bug 报告
  • 💡 功能建议
  • 📖 文档改进

代码贡献

  1. Fork 本仓库。
  2. 创建特性分支：git checkout -b feature/AmazingFeature
  3. 提交更改：git commit -m "Add some AmazingFeature"
  4. 推送到分支：git push origin feature/AmazingFeature
  5. 打开 Pull Request。

提交前请确认没有加入私人图片、导出文件、访问令牌或其他敏感信息。

📝 许可协议

本项目采用 MIT License 开源协议。

您可以自由地：

  • ✅ 商业使用
  • ✅ 修改
  • ✅ 分发
  • ✅ 私人使用

只需保留版权声明即可。

🙏 致谢

  • 灵感：iOS / macOS Liquid Glass 设计风格
  • 算法：CIEDE2000 颜色差异公式
  • 产品方向：让拼豆图纸制作像画画一样简单

📧 联系方式

如有问题或建议，欢迎通过以下方式联系：

Made with ❤️ by Mentat

About

豆绘 (BeadForge) 是一款零门槛的在线拼豆图案设计工坊。用户只需打开浏览器，即可在画布上自由创作拼豆像素画——150+ 色号覆盖 Perler / Hama / Artkal / MARD 四大品牌，画笔、填充、对称模式一应俱全；更支持图片转拼豆、AI 文本生成图案、高清打印带编号图纸、CSV 采购清单及成本估算。整个应用为单 HTML 文件架构，无需安装、离线可用，让拼豆创作像画画一样简单。

beadforge.mentat4.chatgpt.site/

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

4 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages