做拼豆这些年，我试过市面上几乎所有的在线转图工具，始终觉得差了点意思：
大多数工具只解决了「把图片像素化」这一个环节，生成出来颜色碎得像马赛克，拼起来眼睛都花；色卡只适配海外品牌，手里的国产豆子根本对不上号；想手动修个细节，操作逻辑反人类，来回切好几个面板；后面的备料、打印、分块全要靠自己手动折腾，一张图从生成到开工，中间要倒腾三四个软件。
所以我们做了拼豆国度—— 不只是一个图片转像素的小工具，而是一个从创意到成品全链路覆盖的拼豆作图工作台。
在线体验：**www.aigeoyh.com**微信小程序同步搜索「拼豆国度」即可使用
一、为什么做拼豆国度
在长期和拼豆玩家交流的过程中，我们发现大家的痛点高度一致：
图片转图纸后颜色太碎，大量低饱和相近色混在一起，制作难度陡增，成品效果反而发灰发脏；色卡适配不全，很多工具只支持单一品牌，换个豆子就要重新找工具；导出图纸不清晰，打印出来格子发虚、线条粘连，对不齐拼豆板；用量统计、改色、分块等功能残缺，做一半还要手动补数据；想手动修图，工具难用，画笔、填充、换色这些基础操作都做得很别扭。
拼豆国度从这些真实痛点出发，围绕「生成 — 编辑 — 备料 — 导出 — 打印」全流程打磨，力求功能完整、操作顺手。这篇文章会从产品设计和技术选型的角度，分享我们做这款工具时的核心思路与踩过的坑。
二、图片转拼豆图纸：不是简单缩小取像素
这是整个工具最核心的环节，也是我们花时间最多的地方。
最朴素的做法是把图片缩放到目标尺寸，然后每个格子取对应位置的单个像素颜色。但这种方式有个致命问题：拼豆格子对应的是原图中的一小块区域，只取一个像素，很容易因为噪点、压缩伪影导致颜色偏差，最终整张图碎色泛滥。
我们的核心思路是区域采样 + 色彩聚合：每个拼豆格参考原图中对应区域的整体色彩分布，经过聚合计算后再决定最终色号。这样大面积主色块更稳定，边缘过渡更自然，不会因为单个像素的偏差导致整张图变碎。
在此基础上，我们针对不同类型的原图做了差异化优化：
- 卡通优化模式：强化轮廓检测，合并相近色块，适合头像、表情包、动漫图、线稿；
- 写实优化模式：保留更多色彩层次和过渡，适合真人照片、宠物图；
- 文字专项优化：优先保证笔画连通性和边缘锐利度，适合 LOGO、文字图案。
生成后还支持一键调整色数上限和智能合并相近色，让玩家在还原度和制作难度之间找到最合适的平衡点。
三、色卡匹配：本土化适配是硬需求
这是拼豆国度和很多海外工具最大的区别。
拼豆图纸最终要落地到实体豆子上，屏幕上的 RGB 颜色再好看，对应不上实物色号也是白搭。海外工具普遍只适配 Perler、Hama 等品牌，和国内主流的 MARD、国产融合豆体系完全不通用。
我们的做法是为每个国内主流品牌建立独立的标准色卡数据库，目前已覆盖：
- MARD 基础版与完整版全色号；
- COCO 主流色系；
- 国产通用融合豆 常见色卡；
- 更多品牌持续更新中。
颜色匹配环节，我们没有用简单的 RGB 欧氏距离，而是采用了基于 CIE LAB 色彩空间的色差计算方式。原因很简单：RGB 空间的距离和人眼感知的色差并不线性，同样的数值差在不同色相下人眼敏感度差异很大。CIE LAB 更接近人眼感知，匹配出来的色号色差更小，成品色调更准。
调色盘层面支持按色号分组筛选、最近使用颜色快速切换，频繁改色时不用反复翻找。
四、编辑体验：像绘图软件一样顺手
左侧工具栏参考了专业绘图软件的操作逻辑，常用编辑功能一应俱全：
- 画笔 / 橡皮：直接绘制或擦除，支持调整大小；
- 填充：快速填充连续同色区域；
- 换色：把某一种颜色整体替换为另一种，改配色一键完成；
- 吸管：从画布吸取已有颜色；
- 移动 / 复制粘贴：整体或局部操作，支持跨区域；
- 镜像：水平或垂直翻转，对称图案效率翻倍；
- 形状 / 文字工具：插入基础图形和文字，可调整大小、间距、排列方向。
这里有个设计取舍：我们没有做无限画布和自由变换，因为拼豆的本质是网格对齐，所有操作都必须锁定在整格上。自由变换看起来灵活，但会产生大量半格像素，反而破坏了拼豆的制作属性。这个约束在产品初期就让我们纠结了很久，最终还是选择了「制作优先」的原则。
五、图层与参考图：复杂作品的从容应对
拼豆作品不只有一层。叠层、镂空、局部装饰、分部件制作，这些场景都需要图层支持。
我们的图层系统支持新建、删除、复制、排序、显示 / 隐藏、锁定、重命名，每个图层独立编辑，可选择是否计入用量统计。多图层项目导出时会按图层分别输出图纸，方便分层制作。
参考图临摹功能则是为手动精修准备的：支持单独上传参考图作为底稿，可调整透明度、显示层级、拖动缩放。自动生成后觉得细节不满意，打开参考图一边对照一边手动修，不用在两个窗口来回切换。
六、实时预览与用量统计：做完之前就心里有数
平台内置实时预览区域，编辑过程中随时查看拼豆完成后的视觉效果，支持放大查看细节。豆子形状可在圆形和方形之间切换，不用等全部做完才发现效果不对。
用量统计是另一个高频刚需。右侧面板自动按颜色统计标准色号、对应颗数、预计包数（每包数量可自定义）。多图层项目支持统计全部图层、当前图层或指定图层，分部件制作时备料一目了然。
这个功能看起来简单，但实现上有个细节：用量统计必须和图层的「是否计入」状态联动，而且换色、合并颜色后要实时更新。我们在数据结构设计上把颜色映射和用量计算做了解耦，保证任何编辑操作后用量数据都是准确的，不会出现「图改了但用量没更新」的尴尬。
七、色彩调整：整体色调一键优化
图纸生成后，如果觉得整体偏暗、偏灰，或者颜色太多太碎，可以用调整面板快速优化：
- 亮度、对比度、饱和度、色温、色相整体微调；
- 反色、灰阶、黑白效果一键切换；
- 颜色整理：自动合并相近颜色，减少不必要的碎色；
- 色数上限：限制当前图层最多使用的颜色数量，快速降低制作难度。
所有调整实时反映到画布，配合撤销功能安全使用。
八、导出与打印：最后一公里的标准化
导出是很多工具容易忽略的环节，但对拼豆玩家来说，打印出来能不能对齐豆子直接决定了工具有没有用。
我们支持多种导出格式：
- 图纸导出（PNG / PDF） ：可选按画布尺寸或图案尺寸，可显示色号、辅助线、坐标，导出文件包含完整的标注和底部用量清单，适合直接打印；
- 用量清单导出（Excel） ：包含总数和各图层分项统计，方便整理材料、对接采购；
- 项目云端保存：作品自动保存，随时打开继续编辑。
打印环节有个关键参数：必须选择 100% 实际大小，关闭「适应页面」等自动缩放选项。我们在导出文件中已经预设了标准物理尺寸（5mm / 2.6mm 对应实体豆子），只要打印时不缩放，格子就能严格对齐拼豆板。
大尺寸作品还支持一键分块导出，每块自带对位标记，拼接时按标记对齐即可，不用手动切图。
九、双端同步：大屏精修，随手创作
拼豆国度同时支持网页端和微信小程序，两端数据云端自动同步。
技术选型上，网页端面向深度操作场景，重点优化了大屏画布的渲染性能和鼠标交互精度；小程序面向轻量化场景，重点优化了随手转图、查看备料、分享作品的体验。两端共享同一套核心数据结构和色卡数据库，保证在任何一端编辑，结果都是一致的。
在电脑上做好的大尺寸图纸，打开小程序就能直接查看分享；在手机上随手保存的灵感图，回家打开网页端继续深度调整，创作不受设备限制。
十、踩过的坑与设计取舍
做这款工具的过程中，有几个关键的设计决策值得分享：
**1. 要不要支持自由变换？**最终选择不支持。拼豆的本质是网格对齐，自由变换会产生半格像素，破坏制作属性。看起来少了一个功能，但保证了所有输出都是可直接制作的标准图纸。
**2. 色卡匹配用 RGB 还是 CIE LAB？**最终选择 CIE LAB。RGB 计算简单但和人眼感知偏差大，尤其是低饱和色系，匹配出来的色号经常偏色。CIE LAB 的计算量更大，但成品色调准确度提升明显，值得这个成本。
**3. 功能做全还是做精？**我们的原则是「全链路覆盖，核心功能做深」。转图、编辑、备料、导出、打印这五个核心环节必须完整且好用，不会为了追求功能数量而牺牲核心体验。花哨功能可以后续迭代，但基础链路不能断。
十一、写在最后
拼豆国度从诞生到现在，一直围绕一个朴素的目标：让拼豆人把时间花在创作上，而不是折腾工具上。
我们不追求堆砌花哨功能，而是把每一个和实际制作强相关的环节做深做透。从上传一张图片到打印出图纸开工，全程在一个平台内完成，不用再在三四个软件间来回倒腾。
如果你也受够了功能残缺、操作别扭、色号对不上的转图工具，欢迎来拼豆国度试试：
**网页端：www.aigeoyh.com**微信小程序：搜索「拼豆国度」
好的工具应该是创作的辅助，而不是新的麻烦。愿每一份灵感，都能顺畅地变成指尖的拼豆作品。
