本文摘要：
拼豆像素画小程序提供手机端像素编辑器，支持调节网格、画笔撤销、缩放、图片导入转像素、导出PNG和拼豆图纸，图纸包含颜色编号、坐标轴和统计信息，并兼容5大品牌共217种色号。项目可通过npm克隆后分别在微信、支付宝、百度、字节跳动、QQ和H5平台编译运行，适合拼豆爱好者快速生成对照图纸并直接购买所需豆子。
— 本文部分摘要灵感源自 DeepSeek 深度思考 ✨
拼豆像素画小程序是一款创意工具应用，用户可以在手机上设计像素风格的拼豆图案。无论是想制作可爱的动物、精美的植物，还是独特的动漫角色，都可以通过简单的操作完成创作。完成后可以导出图片作为参考，用于实际的拼豆制作。
![图片[1]|自制拼豆像素画小程序源码，图片一键转图纸，买豆子直接对照用量|不死鸟资源网](https://busi.net/wp-content/uploads/2026/08/20260804172408326-image.png)
![图片[2]|自制拼豆像素画小程序源码，图片一键转图纸，买豆子直接对照用量|不死鸟资源网](https://busi.net/wp-content/uploads/2026/08/20260804172423648-image-757x1024.png)
功能特性
像素画编辑器
- 可调节网格大小（默认 16×16）
- 画笔/橡皮擦工具
- 撤销/重做功能（最多 50 步历史记录）
- 缩放功能
- 图片导入转像素画
- 导出 PNG 到相册
- 导出拼豆图纸（支持多种色号系统）
作品管理
- 作品列表展示
- 分类筛选（全部/最近/收藏）
- 作品状态标记（已完成/进行中）
- 作品编辑、删除、导出
- 搜索功能
模板浏览
- 瀑布流模板展示
- 分类标签
- 下拉刷新和无限加载
导出图纸功能
导出图纸是针对拼豆玩家的核心功能，生成包含以下信息的高质量 PNG 图片：
- 标题栏：显示作品名称、网格尺寸和品牌 Logo
- 网格区域：每个格子显示对应颜色的色号
- 坐标轴：行列编号标注（每隔 10 格显示）
- 网格线：每隔 10 格显示加重线
- 色号统计：统计各颜色使用数量
- 水印：底部显示
pindou.348349.xyz
导出配置选项：
| 选项 | 说明 | 默认值 |
|---|---|---|
| 显示网格 | 是否显示网格线 | true |
| 网格间隔 | 网格线间隔（每隔多少格） | 10 |
| 显示坐标 | 是否显示坐标轴 | true |
| 显示色号 | 是否显示单元格色号 | true |
| 网格颜色 | 网格线颜色 | 深灰色 |
| 包含统计 | 是否包含色号统计 | true |
色号系统
拼豆玩家必备的工具，系统支持 5 大品牌色号系统的完整映射，共收录 217 种颜色的精确对应关系。
品牌色号系统
| 色号系统 | 说明 | 色号示例 | 特点 |
|---|---|---|---|
| MARD | 丹麦品牌（默认） | A01, B02, C03… | 字母+数字组合，如 A01-Z26 |
| COCO | 可可色系 | E02, F05, G08… | 字母+数字组合，如 E01-K39 |
| 漫漫 | 漫漫色系 | E2, B3, C7… | 字母+数字组合，如 A1-Q15 |
| 盼盼 | 盼盼色系 | 65, 2, 28… | 纯数字，如 1-253 |
| 咪小窝 | 咪小窝色系 | 77, 2, 28… | 纯数字，如 1-283 |
部署说明
1. 克隆项目
2. 安装依赖
npm install# 或pnpm install
3. 开发模式
微信小程序开发：
npm run dev:weapp
其他平台：
# 支付宝小程序npm run dev:alipay# 百度小程序npm run dev:swan# 字节跳动小程序npm run dev:tt# QQ 小程序npm run dev:qq# H5npm run dev:h5
4. 生产构建
# 微信小程序npm run build:weapp# 其他平台npm run build:alipaynpm run build:swannpm run build:ttnpm run build:qqnpm run build:h5
本站文章部分内容可能来源于网络,仅供大家学习参考,如有侵权,请联系站长📧ommind@qq.com进行删除处理!
THE END
