拼豆像素画小程序源码:图片一键转图纸,买豆子可按色号对照用量

这是一款面向拼豆爱好者的像素画创作小程序源码。用户可以在手机端绘制像素风格图案，也可以把图片快速转换成拼豆图纸；完成后可导出 PNG 参考图，方便实际拼豆时对照制作。项目适合想搭建拼豆设计工具、像素画编辑器或图纸导出工具的开发者参考使用。

项目简介

拼豆像素画小程序集成了像素画编辑、图片转像素、作品管理、模板浏览和拼豆图纸导出等功能。无论是动物、植物，还是动漫角色，都可以通过网格绘制和颜色填充来完成设计。导出后的图纸会标注色号、坐标和用量统计，方便玩家按图纸买豆、配色和制作。

核心功能

1. 像素画编辑器

• 网格尺寸可调，默认 16×16

• 支持画笔与橡皮擦

• 支持撤销、重做，最多保留 50 步历史

• 支持画布缩放

• 可导入图片并转换为像素画

• 可导出 PNG 到相册

• 可导出拼豆图纸，支持多种色号系统

2. 作品管理

• 作品列表展示

• 分类筛选：全部、最近、收藏

• 作品状态标记：已完成、进行中

• 支持作品编辑、删除、导出

• 支持搜索作品

3. 模板浏览

• 瀑布流模板展示

• 分类标签筛选

• 支持下拉刷新与无限加载

图纸导出：拼豆玩家的实用功能

图纸导出是该项目的重点功能。导出的高质量 PNG 会包含完整的拼豆制作参考信息：

• 标题栏：作品名称、网格尺寸、品牌 Logo

• 网格区域：每个格子显示对应颜色色号

• 坐标轴：行列编号标注，每隔 10 格显示

• 网格线：每隔 10 格加粗显示

• 色号统计：统计各颜色使用数量

• 水印：底部显示 pindou.348349.xyz

导出时可配置以下选项：

五大品牌色号系统

项目内置 5 类常见拼豆品牌色号映射，共收录 217 种颜色的对应关系，方便玩家按色号选豆和统计用量。

部署与运行

1. 获取项目

将项目克隆到本地后进入项目目录。

2. 安装依赖

bash

npminstall# 或pnpminstall

3. 开发模式

微信小程序开发：

bash

npm run dev:weapp

其他平台开发：

bash

# 支付宝小程序npm run dev:alipay# 百度小程序npm run dev:swan# 字节跳动小程序npm run dev:tt# QQ 小程序npm run dev:qq# H5npm run dev:h5

4. 生产构建

微信小程序：

bash

npm run build:weapp

其他平台：

bash

npm run build:alipaynpm run build:swannpm run build:ttnpm run build:qqnpm run build:h5

适用场景

该项目可用于拼豆图案设计、像素画创作、图片转图纸、拼豆色号对照和作品管理等场景。对于拼豆玩家来说，图纸中的色号标注和用量统计能够减少手工数格、反复配色的麻烦；对于开发者来说，也可以在此基础上继续扩展模板社区、作品分享、色号自定义等功能。