项目地址:Zhischooler/character-pincher
起因很简单:我想改一张人物图的脸型,打开 Photoshop 的液化,调画笔大小、调压力、推两下不满意又得撤销重来,一套流程下来,改动的其实就下巴那一点点。工具很强大,但为了“捏两下”付出的操作成本太高了。
于是我想,能不能做一个东西,打开网页,图片就在那儿,按住拖就完了——像捏橡皮泥一样。
这就是 character-pincher,中文我叫它“人物捏捏乐”。
核心是“橡皮泥模式”
名字里的 pincher,就是“捏”的意思。
市面上不少变形工具是“推像素”:鼠标底下那几个像素跟着走,边缘容易撕裂,推多了会出现局部塌陷。我想要的不是这个手感。
我实现的是平滑局部网格形变:图片被铺成一张网格,你拖动一个点时,不是只有它动,而是它周围一圈顶点按距离平滑地跟着偏移。结果是轮廓被拉伸、挤压时依然连续自然,不会出现锯齿状的断裂。手感上更像在捏一块有弹性的面团,而不是在推一堆沙子。
这也是整个项目里我最花心思的部分——形变半径和衰减曲线决定了“捏起来舒不舒服”。半径太小,捏一下只动一点点,累;半径太大,一动整张脸都跟着走,失控。最终的手感是调出来的,不是算出来的。
上传自己的图,才算真正可用
内置了几张人物图,打开就能玩。但只玩内置图,它就是个 demo。
所以加上了直接上传图片:拖一张你自己的照片、画作、表情包进去,立刻就能捏。这一步让它从“内置角色的小游戏”变成了“随手能用的轻量捏脸工具”。图片全程在浏览器本地处理,不上传任何服务器。
捏坏了能退,才敢乱捏
有撤销、重做、重置。
这三个按钮看着不起眼,但它们是“玩”的前提。橡皮泥的乐趣就在于试错——这个角度拉一下会怎样?眼睛放大一点会不会更可爱?如果没有退路,人就会变得保守,不敢动手。把试错成本降到零,工具才真的好玩。
捏满意了,直接导出 PNG。
工程上几个我觉得值得说的点
纯前端,没有后端。 没有数据库,没有服务器处理,部署就是 GitHub Pages。打开即用,不注册,图片不离开浏览器。对于“随手玩一下”的场景,这是最合适的架构。
内置图片列表是自动生成的。 图片放在 src/ 目录下,GitHub Actions 会自动扫描并生成列表。以后想加新图,扔进目录就行,不用手动改配置。这种小自动化,省的是以后每一次维护的力气。
零依赖的交互体验。 没有引入重型图形库,网格形变和 Canvas 渲染都是直接写的。项目结构干净,想读代码或者 fork 改造的人不会一上来就被依赖树劝退。
它不做什么
它不是专业修图工具。没有图层,没有选区,没有滤镜,不追求像素级精确。它只做一件事:让你用最低的操作成本,把一张人物图捏成你想要的样子,然后带走。
如果你手里刚好有一张想“动手”的图,传进去捏两下试试。玩得开心的话,给个 star。
我是志校儿,咱们下次再见!