零门槛的在线拼豆图案设计工坊
无需安装，打开即用，支持150+种颜色、AI生成、图片转换、打印导出
- 画笔工具 - 自由绘制拼豆图案
- 橡皮擦 - 擦除已放置的拼豆
- 填充桶 - 一键填充闭合区域
- 取色器 - 吸取画布上已有的颜色
- 4大品牌支持：Perler、Hama、Artkal、MARD
- 150+种颜色，涵盖各种色系
- 颜色搜索 - 快速查找颜色
- 颜色家族分类 - 按红、黄、蓝等分类筛选
- 画布尺寸调整 - 支持5×5到200×200任意尺寸
- 预设尺寸 - 快速选择标准拼豆板尺寸
- 旋转画布 - 顺时针/逆时针90度旋转
- 翻转画布 - 水平/垂直翻转
- 对称模式 - 水平或垂直对称绘制
- 缩放功能 - 10%到800%任意缩放
- 拖拽平移 - 自由移动画布视角
- 拼豆效果 - 切换2D平面/3D立体显示
- 网格显示 - 显示/隐藏网格线
- 导出JSON - 保存设计数据，支持后续编辑
- 导出图片 - 高清PNG格式，支持自定义尺寸
- 导入设计 - 加载之前保存的JSON文件
- 图片转拼豆 - 将任意图片转换为拼豆图案
- CSV采购清单 - 生成购买清单，包含颜色统计
- 文本生成图案 - 输入描述自动生成拼豆图案
- 支持外部LLM - 可与ChatGPT、Claude等配合使用
- 打印拼豆图纸 - 带颜色编号的制作图纸
- 高清导出 - 支持2倍高清输出
- 自定义选项 - 颜色编号、网格线、颜色图例
- 拼豆数量统计 - 实时显示使用的拼豆总数
- 颜色种类统计 - 显示使用的颜色数量
- 成本估算 - 根据单价自动计算材料成本
- 价格设置 - 支持自定义单价（义乌豆/国产/进口）
- 下载
perler_bead_platform.html文件 - 双击文件，在浏览器中打开
- 开始使用！
将文件上传到任意Web服务器或静态托管服务（如GitHub Pages、Netlify）即可在线访问。
- ✅ 现代浏览器（Chrome、Firefox、Safari、Edge）
- ✅ 支持HTML5和ES6
- ✅ 无需网络连接（除Google字体外）
| 操作 | 说明 |
|---|---|
| 左键点击 | 放置拼豆（画笔模式）/擦除（橡皮模式） |
| 右键点击 | 反向操作（画笔变橡皮，橡皮变画笔） |
| 中键/Alt+左键拖拽 | 平移画布 |
| 滚轮 | 缩放画布 |
| Ctrl+Z | 撤销 |
| Ctrl+S | 保存 |
| B | 切换到画笔 |
| E | 切换到橡皮 |
| F | 切换到填充桶 |
| I | 切换到取色器 |
- 设置画布尺寸 - 在左侧设置面板选择或输入尺寸
- 选择颜色 - 在颜色面板选择需要的颜色
- 绘制图案 - 使用画笔工具在画布上绘制
- 调整视图 - 使用缩放和平移功能查看细节
- 导出作品 - 点击"打印"按钮导出图片或打印
matrix_generator/
├── perler_bead_platform.html # 主程序文件（核心）
└── README.md # 本文件
- 单文件架构 - HTML/CSS/JS全部集成在一个文件中
- 现代CSS - CSS变量、Flexbox、Grid布局
- 玻璃态设计 - 半透明毛玻璃视觉效果
- 响应式布局 - 适配桌面和移动设备
- 双缓冲渲染 - 缓存画布提高性能
- 脏检查机制 - 只重绘变化区域
- 像素级渲染 - 使用
image-rendering: pixelated
- CIEDE2000 - 业界标准的颜色差异算法
- Lab颜色空间 - 更准确的颜色匹配
- 缓存优化 - Lab值缓存避免重复计算
- 栈结构 - 实现撤销功能（HistoryManager）
- 哈希映射 - O(1)时间复杂度的颜色查找
- 二维数组 - 网格数据存储
| 浏览器 | 版本 | 支持状态 |
|---|---|---|
| Chrome | 80+ | ✅ 完全支持 |
| Firefox | 75+ | ✅ 完全支持 |
| Safari | 13+ | ✅ 完全支持 |
| Edge | 80+ | ✅ 完全支持 |
注：IE浏览器不支持
- 基础绘图功能
- 150+颜色支持
- 导入导出功能
- 图片转换功能
- 打印功能
- 撤销功能
- 主题切换
- 图层系统
- 动画预览
- 3D预览模式
- 社区分享功能
- 教程模式
- 多语言支持
欢迎提交Issue和Pull Request！
- 🐛 Bug报告
- 💡 功能建议
- 📖 文档改进
- Fork本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开Pull Request
本项目采用 MIT License 开源协议。
您可以自由地：
- ✅ 商业使用
- ✅ 修改
- ✅ 分发
- ✅ 私人使用
只需保留版权声明即可。
- 字体: Inter by Rasmus Andersson
- 灵感: iOS/macOS Liquid Glass 设计风格
- 算法: CIEDE2000 颜色差异公式
如有问题或建议，欢迎通过以下方式联系：
- 提交 GitHub Issue
- 发送邮件至 uran0831@qq.com
Made with ❤️ by Mentat