毛标标开发日志：让图片标注成为表达的乐趣

需求背景

毛标标说来好玩，本来是我想做一个给自己所有图片类产品用的一个标注公共组件，没想到做着做着，投入了很大的激情，反而被这个产品所打动，甚至爱上了用它发图文的体验，更爱表达了。

产品介绍

闲话不多说，直接进入产品介绍环节。

1. 首先它是一款图片标注软件，可以处理一般图片、GIF、实况照片，原格式进原格式出，对于 GIF 和实况的标注会在上面加一层，不影响动图本身；

2. 它有着全面的标注功能，有：

   1. 文本添加

   2. 画线条（头尾可设置箭头样式）

   3. 手绘线条

   4. 模糊

   5. 马赛克

   6. 矩形

   7. 圆形

   8. 添加图片

   9. 裁剪或扩图

   10. 圆角

我挑选一些注入了很多巧思的功能来讲。

文本添加

文本添加功能，是在朋友圈里看到了朋友小云、小鱼他们喜欢发直接在图片上写文字的图文形式，忽然想到，如果我对一个图片添加文本，只需要写文案而不需要调整样式和位置，那该多么畅爽，于是做了这个自动排版的文字添加功能。它有几个很巧妙的特性：

1. 自动避开图片主体，找一个适合安放文本又不妨碍图片主题阐述的位置。

2. 自动配色，会根据图片中的关键色彩，搭配出文本的颜色，出几套方案给你选，通常默认效果就相当不错。

   

基础属性的调整就不说了，我在其中加了几个比较特别的功能，相当独特：

1. 主体绕排。使用这个功能，文字会沿着画面主体（通常是人）的边缘排布，写出环绕的效果来。

   

2. 文字画笔。文字画笔相当于手动的主体绕排，更自由，更狂野，可以玩出很不一样的花招来。

   

3. 自适应双色。根据图片的色彩，悬浮在上面的文字会逐字自动调整为白色或者黑色，起到一个反差强化的效果。

   

4. 微信气泡对话。这也是最近做出来的一个效果，可以做出非常经典又抢眼的微信对话效果，首次使用的时候上传一张图当自己和对话方的头像，下次就可以直接使用了。

   

手绘

1. 毛笔笔迹。手绘最值得一提的是我将此前做的一个毛笔笔迹 demo 引入了这个项目，于是在毛标标里，你可以使用非常逼真的笔迹手绘效果，就这一个效果就比市面上各种画笔圈选靓丽了不止一个档次。

   

2. 播放笔迹。更酷的是，如果你编辑的是实况照片，可以勾选播放笔记开关，最后生成的实况照片里，笔记是可以播放出来的，就像你写的一样。

   

图片

插入图片的时候是支持提取主体的，也就是你可以完成很多奇怪的拼图～

其他

这个产品打磨了挺久，自己每天都在用，有很多交互上的巧思，比如：

1. 使用各种工具在图片上操作的时候，UI 会隐藏，保证能看清图片全览；

2. 一边画一边缩放图片大小的交互不冲突；

3. 工具栏的排布，螺蛳壳里做道场，千锤百炼。

4. 另外这个产品是 iOS、iPadOS、MacOS 三端可用的，在 MacOS 里针对 Mac 系统做了很多优化，比如拖曳图片进去编辑、打开和保存都走 finder、以及各种快捷键支持。

价格

这个产品也是我第一个完全免费的产品，只设置了一个捐赠，如果你用得还不错，可以一次捐赠 18 元人民币，或者每年捐 18 元人民币，支持我做更好、便宜的产品。如果不捐赠，也完全不影响使用。我戏称这是我互联网乞讨的开始。

和我目前做的所有产品一样，这个产品里的引导并不是很多，需要你自己多尝试点点，撤销重做机制很成熟，不必担心把东西弄丢了，希望你用得开心，更乐意表达！