当前位置：

社区首页

文章详情

用代码解决拼豆图纸制作5 个痛点：我做一个在线拼豆图纸制作平台

最近身边有人迷上了拼豆，跟着玩了几次之后，作为程序员的职业病又犯了 ——拼豆图纸制作的流程太原始了。

想把一张喜欢的拼豆图案变成可制作的图纸，要手动像素化、逐格对色号、数豆子用量、调打印尺寸，每一步都是重复劳动。市面上的工具要么只做了其中一环，要么功能残缺，要么水土不服。

于是我做了一个全链路的在线拼豆图纸制作平台，叫拼豆国度（www.aigeoyh.com），网页端和微信小程序数据互通。这篇文章聊聊拼豆图纸制作中最折磨人的 5 个痛点，以及我是怎么用代码一个个解决的。

痛点一：图片转像素，碎色多到怀疑人生

问题在哪

把图片变成拼豆格子，最朴素的做法是把图片缩小到目标尺寸，每个格子取对应位置单个像素的颜色。但这种方式的问题非常明显：

原图中只要有一个像素偏色（噪点、压缩痕迹），对应的格子就会跳出一个突兀的杂色；
细节多的图片，单像素取样丢信息严重，出来的图纸很乱，不还原；
最终效果就是满图纸碎色，拼的时候要频繁换豆子，远看还发灰发脏。

我试过用 Photoshop 的像素化滤镜，也试过几款在线转图工具，效果都不理想 —— 要么碎色多，要么边缘糊。

我的解决方案

拼豆国度在转图时，每个格子不是只看一个像素，而是参考原图中对应的一小块区域，综合判断该用什么颜色。相当于做了一次区域平均采样，大面积主色块更稳定，边缘过渡更自然，碎色明显减少。

同时针对不同类型的拼豆图案做了三种生成模式：

卡通模式：适合头像、表情包、动漫线稿，主动强化轮廓线条，色块更干净；
写实模式：适合真人照片、宠物图，保留更多明暗层次和肤色过渡；
文字模式：专门处理 LOGO、字母、数字，优先保证笔画完整不断连。

生成后如果颜色还是偏多，可以用 "颜色整理" 功能自动合并相近色，或者拖动滑块直接限制色数上限，系统自动保留主色和关键细节色、合并人眼难以区分的相近色。新手建议控制在 8-12 种，进阶 10-18 种。

痛点二：色号对不上手里的豆子，图纸等于白做

问题在哪

拼豆图纸制作最关键的一步，是每个颜色必须对应实体豆子的标准编号。只给 RGB 色值没有意义，因为买豆子、对颜色全靠色号。

我试过的方案里：

海外工具（BeadsCanvas、MakeBead）只适配 Perler、Hama 等海外品牌，和国内主流的 MARD、国产融合豆对不上；
国内轻量工具大多只支持 MARD 基础色，品牌覆盖单一；
修图软件完全没有拼豆色卡概念，所有色号要自己手动对应，低饱和色很容易认错。

有一次转了一张很喜欢的图，结果二十多种颜色里有一半在我的 MARD 套装里找不到对应色号，只能对着色卡一个个猜，猜完拼出来整体色调偏了，白忙活一场。

我的解决方案

拼豆国度目前内置了：

MARD 基础版 221 色；
MARD 完整版 291 色（含扩展色、特殊色系列）；
COCO 主流色系；
国产通用融合豆常见色卡。

拼豆图案转成图纸时，颜色会自动匹配到选定品牌的标准豆号，图纸上直接标注色号。匹配用的是更符合人眼感知的色彩空间计算色差，不是简单比 RGB 数值，目标是把色差控制在人眼基本无感知的范围。

调色盘支持按色号分组筛选，也有最近使用颜色。另外还有一个实用功能：可以选择自己手里现有的豆子套装，系统配色时自动把颜色限定在你有的色号范围内，从根源避免 "转完才发现一半颜色没有豆子"。

如果拿到一张其他品牌色号的现成图纸，也可以在平台里打开后一键切换色卡体系，系统自动批量转换所有颜色，不用手动逐格改。

痛点三：转完不能改，想微调就得从头来

问题在哪

很多轻量转图工具只有 "上传 — 生成 — 保存" 三步，生成之后如果觉得某个颜色不对、轮廓歪了、想加个文字，根本没法改，只能重新上传、重新调参数、重新生成，反复试错效率极低。

修图软件虽然能改，但操作对象是像素图片而非拼豆格子，改完还要重新对应色号和尺寸，流程割裂。专业像素编辑器（Aseprite）编辑能力强，但没有拼豆色号体系和物理尺寸概念，所有拼豆属性要手动加。

我最崩溃的一次是：一张图转了五版，每次都差一点点，要么眼睛位置不对，要么某个色块颜色偏了，来来回回折腾了一个多小时。

我的解决方案

拼豆国度的编辑区做成了类似绘图软件的布局，常用工具都在左侧：

画笔、橡皮、填充：基础绘制和擦除，大小可调；
换色：选中一种颜色，全图所有该颜色一键替换成另一种。想给拼豆图案换个配色方案，几秒钟出一个新版本；
吸管：从画布上直接吸色；
移动、复制粘贴：整图或局部挪动，支持跨图层，做重复元素很高效；
镜像：水平或垂直翻转，对称图案省一半功夫；
形状和文字：插入直线、矩形、圆形、三角形，或直接打字，字号、间距、方向可调。

复杂拼豆图案支持多图层编辑：新建、删除、复制、排序、显示隐藏、锁定、重命名，还能设置某个图层是否计入用量。分部件制作、叠层设计、草稿与成品分离都能应对。

另外可以上传参考图做底稿，透明度可调，能放在拼豆层上方或下方，对着原图慢慢修细节，不用在两个窗口之间来回切。

所有操作支持撤销重做，改坏了随时退回。生成后觉得整体偏暗、偏灰，调整面板可以直接改当前图层的亮度、对比度、饱和度、色温、色相，不用重新生成。

痛点四：用量统计靠手数，大图纸数到眼花

问题在哪

拼豆图纸制作完成，备料是下一道关。手动数格子不仅慢，而且 48×48 以上的图纸很容易数错 —— 数到一半被打断，回来就忘了数到哪；低饱和相近色混在一起，经常数混。

我试过的方案里：

轻量工具大多只有简单的色号计数，甚至没有统计功能；
海外工具有统计但色号对不上国产豆子；
修图软件和像素编辑器完全不具备这个能力。

有一次做一张 64×64 的装饰画，数用量数了半个多小时，数完还不放心又数了一遍，结果买豆子时还是少买了一个色号，做到一半停工等快递。

我的解决方案

拼豆国度右侧面板会自动统计每种颜色的：

标准色号；
颗数；
预计包数（每包数量可自定义，默认按 500 颗一包计算）。

多图层项目可以选择统计全部图层、当前图层或指定图层。用量清单支持导出 Excel，包含总数和各图层分项统计，买豆子的时候对着清单下单，不会多买浪费也不会少买停工。

统计是实时的，编辑过程中改了颜色、增减了格子，用量面板自动更新，不用重新数。

痛点五：打印错位、大尺寸没法拼，最后一步前功尽弃

问题在哪

拼豆图纸制作的最后一步是打印，也是最容易前功尽弃的一步。常见问题：

格子尺寸不准：打印时默认开启 "适应页面"，图纸被自动缩放，格子和豆子对不上；
边缘发虚：用 JPG 格式打印，经过压缩后网格线模糊；
大尺寸拼接错位：超过 A4 幅面的图纸，手动切图没有对位标记，接缝处容易偏移半格到一格，拼完线条对不齐。

我试过用修图软件手动把大图纸切成 A4 大小的几块，切的时候要算尺寸、对齐网格，打印后拼接还要肉眼对齐，一次做下来比转图还累，最后接缝处还是歪了半格。

我的解决方案

拼豆国度支持两种导出格式：

PNG/PDF 图纸

可选择按画布尺寸或图案尺寸导出；
可选是否显示色号、辅助线、坐标；
可设置作品昵称和作者昵称；
导出的图纸包含坐标、辅助线、色号标注和底部用量清单，适合直接打印；
多图层项目按图层分别导出，方便分层制作。

大尺寸一键分块导出

超过 A4 幅面的图纸可以一键分块，系统自动按网格线拆分，边界严格对齐整格；
每块自带十字对位标记，拼接时按标记对齐，误差控制在极小范围；
不用自己拿尺子切图，也不用担心手动拆分出现半格错位。

用量清单

导出为 Excel，包含色号、颗数、预计包数，多图层有分项统计。

打印时建议用 PDF 格式，选择 100% 实际大小，关闭 "适应页面"，先打一小段用豆子比对尺寸，确认无误再批量打印。

全流程闭环：从拼豆图案到打印开工，一个平台搞定

这五个痛点单独看都不大，但叠在一起足以把创作的兴致磨掉。拼豆国度想做的就是把这些环节在一个平台里串顺：

上传拼豆图案 → 选模式生成 → 在线编辑精修 → 自动统计用量 → 导出 / 分块打印

全程不用离开这个页面，不用在三四个工具之间来回倒腾。作品自动云端保存，网页端（www.aigeoyh.com）适合电脑大屏精修，微信小程序适合随手转图、出门看备料、分享作品，两端数据同步，不用手动传文件。

和其他方案的对比

表格

方案转图碎色控制国内色卡适配编辑能力自动用量统计大尺寸分块打印多端支持修图软件手动取决于个人无（需手动对应）极强无无仅电脑海外生成器较好低（仅海外品牌）较强有需手动仅网页国内轻量工具一般单一品牌无或极弱简单无仅网页 / 小程序专业像素编辑器高（需手动）无极强无无仅电脑拼豆国度较好（多模式 + 智能减色）高（MARD/COCO/ 国产豆）完整 + 多图层有（Excel 导出）一键分块带对位标记网页 + 小程序同步

简单总结：