我又来了，拼豆生成器 4 更（Vibe Coding 真的太容易上头了🤣）：全沉浸式图纸工作台、 iPad 专属触控，现在你可以直接带去线下店开拼了！
前几贴链接防迷路：
- [看到有 V 友做了拼豆站，手痒也 Vibe Coding 了一个拼豆图纸生成器](https://www.v2ex.com/t/1220906#reply6)
- [Update 昨天发完帖后，我把拼豆生成器做上头了：画廊、在线编辑、用户系统全搞定](https://www.v2ex.com/t/1221167#reply2)
- [接了阿里百炼大模型，一键提取线稿平涂，解决原图转像素的痛点](https://www.v2ex.com/t/1222226#reply2)
我又来了（这已经是第四更了，再次感叹 Vibe Coding 真的太容易上头了，每天都在疯狂爆肝重构）。
上一版我用 AI 视觉模型解决了“底图转像素杂乱”的问题后，我自己试着照着生成的图纸拼了一次，结果发现：**看图纸依然是个很折磨人的体力活！**
在手机或平板上看一张静态的 PNG 图片，放大之后很容易找不到自己拼到哪一行了。尤其是当你手里拿着某一种颜色的豆子，想一口气把这个颜色的区域全拼完时，要在密密麻麻的格子里找同一种颜色，眼睛都要瞎了。
为了解决这个“落地实操”的最后一百米痛点，这几天我直接把详情页的底层渲染逻辑给重写了，做了一个**全沉浸式的交互工作台**：
#### 1. 终极杀手锏：色票“聚光灯”高亮模式
现在图纸右侧会展示当前图案使用的所有色号列表。**当你点击或悬浮在某个色票上时，神奇的事情发生了**——画布上所有不相关的拼豆都会瞬间降到只有 15% 的透明度，变成浅浅的水印背景。而你选中的那种颜色会保持 100% 实体高亮！就像聚光灯打在上面一样。这个功能**简直是带 iPad 去线下手工店（或者自己在家撸豆子）的神器**。你只需要选一种颜色，照着高亮的地方无脑放豆子就行，绝对不可能看错眼！
#### 2. 100% 沉浸式宽屏 & 吸顶坐标轴
我干掉了之前拘谨的卡片布局，现在的图纸工作台是 100% 撑满浏览器宽度的。更重要的是，我给图纸加上了 **Sticky (吸顶) 坐标轴**。不管你怎么放大、怎么拖拽图纸，最外圈的行号和列号永远死死钉在屏幕边缘，彻底告别“数格子数到迷路”。
#### 3. 移动端/iPad 专属手势适配
之前在手机上浏览图纸效果很拉垮，这次我专门写了原生的 Touch 事件监听：
- **单指拖拽**：顺滑地在图纸上漫游平移
- **双指捏合**：丝滑无极缩放
并且针对手机屏幕，大幅调高了初始加载的放大倍率，告别一上来密密麻麻缩成一团的尴尬。
---
### 一个非常重要的提示（必看）
因为这套沉浸式交互工作台依赖于全新的网格数据结构渲染（以前是纯静态图片），所以**网站上以前的“旧图纸”是不支持这些新功能（高亮、缩放）的！**
想要体验这个爽快的工作台，你有两个方法：
1. **新建**一张图纸
2. 在画廊里找到你喜欢的旧图纸，点击图纸下方的 **“二次编辑”** 按钮，系统会带着原图重新进生成器，你只要点一下保存，它就会拥有全新的交互魔法！
给大家看一个我非常满意的作品示例，大家可以用手机或平板点开这个链接，感受一下选中右侧颜色时的“高亮”快感：
👉 **[带珍珠耳环的小新 (体验新版图纸交互)](https://pindouai.app/pattern/ebc84d69-e9a4-40ee-9cbb-5a2b03bc7cec)**
### 体验地址
产品折腾到现在，核心的链路终于彻底跑通并且非常丝滑了，欢迎大家继续来玩，多提 Bug 和建议！
**官网地址：** [https://pindouai.app/](https://pindouai.app/)
（注：图纸生成、编辑、工作台查看全都是免登录免费使用的！）
---
原文链接：[点击查看](https://www.v2ex.com/t/1228018)
- [看到有 V 友做了拼豆站，手痒也 Vibe Coding 了一个拼豆图纸生成器](https://www.v2ex.com/t/1220906#reply6)
- [Update 昨天发完帖后，我把拼豆生成器做上头了：画廊、在线编辑、用户系统全搞定](https://www.v2ex.com/t/1221167#reply2)
- [接了阿里百炼大模型，一键提取线稿平涂，解决原图转像素的痛点](https://www.v2ex.com/t/1222226#reply2)
我又来了（这已经是第四更了，再次感叹 Vibe Coding 真的太容易上头了，每天都在疯狂爆肝重构）。
上一版我用 AI 视觉模型解决了“底图转像素杂乱”的问题后，我自己试着照着生成的图纸拼了一次，结果发现：**看图纸依然是个很折磨人的体力活！**
在手机或平板上看一张静态的 PNG 图片，放大之后很容易找不到自己拼到哪一行了。尤其是当你手里拿着某一种颜色的豆子，想一口气把这个颜色的区域全拼完时，要在密密麻麻的格子里找同一种颜色，眼睛都要瞎了。
为了解决这个“落地实操”的最后一百米痛点，这几天我直接把详情页的底层渲染逻辑给重写了，做了一个**全沉浸式的交互工作台**：
#### 1. 终极杀手锏：色票“聚光灯”高亮模式
现在图纸右侧会展示当前图案使用的所有色号列表。**当你点击或悬浮在某个色票上时，神奇的事情发生了**——画布上所有不相关的拼豆都会瞬间降到只有 15% 的透明度，变成浅浅的水印背景。而你选中的那种颜色会保持 100% 实体高亮！就像聚光灯打在上面一样。这个功能**简直是带 iPad 去线下手工店（或者自己在家撸豆子）的神器**。你只需要选一种颜色，照着高亮的地方无脑放豆子就行，绝对不可能看错眼！
#### 2. 100% 沉浸式宽屏 & 吸顶坐标轴
我干掉了之前拘谨的卡片布局，现在的图纸工作台是 100% 撑满浏览器宽度的。更重要的是，我给图纸加上了 **Sticky (吸顶) 坐标轴**。不管你怎么放大、怎么拖拽图纸，最外圈的行号和列号永远死死钉在屏幕边缘，彻底告别“数格子数到迷路”。
#### 3. 移动端/iPad 专属手势适配
之前在手机上浏览图纸效果很拉垮，这次我专门写了原生的 Touch 事件监听：
- **单指拖拽**：顺滑地在图纸上漫游平移
- **双指捏合**：丝滑无极缩放
并且针对手机屏幕，大幅调高了初始加载的放大倍率，告别一上来密密麻麻缩成一团的尴尬。
---
### 一个非常重要的提示（必看）
因为这套沉浸式交互工作台依赖于全新的网格数据结构渲染（以前是纯静态图片），所以**网站上以前的“旧图纸”是不支持这些新功能（高亮、缩放）的！**
想要体验这个爽快的工作台，你有两个方法：
1. **新建**一张图纸
2. 在画廊里找到你喜欢的旧图纸，点击图纸下方的 **“二次编辑”** 按钮，系统会带着原图重新进生成器，你只要点一下保存，它就会拥有全新的交互魔法！
给大家看一个我非常满意的作品示例，大家可以用手机或平板点开这个链接，感受一下选中右侧颜色时的“高亮”快感：
👉 **[带珍珠耳环的小新 (体验新版图纸交互)](https://pindouai.app/pattern/ebc84d69-e9a4-40ee-9cbb-5a2b03bc7cec)**
### 体验地址
产品折腾到现在，核心的链路终于彻底跑通并且非常丝滑了，欢迎大家继续来玩，多提 Bug 和建议！
**官网地址：** [https://pindouai.app/](https://pindouai.app/)
（注：图纸生成、编辑、工作台查看全都是免登录免费使用的！）
---
原文链接：[点击查看](https://www.v2ex.com/t/1228018)
评论
暂无评论。