# 如何在手机上制作九宫格切图，兼谈 Shortcuts 中的数学

> 本文公开全文。

原文：https://utgd.net/article/20142

所谓九宫格式图片排布，就是把一张图切成九张，以便在常见社交媒体的时间流中抢占最大的版面（不熟悉九宫格布局的读者，可在 banner 中看到实际效果）；朋友圈中也有用心人，会以九宫格形式发图。前几年设计图片拼接 Shortcuts 动作时，我顺手做了九宫格拼图功能，以便将别人发的九张图恢复回完整照片。

这类图片，拼起来容易，做起来却不简单，因为需要把一张图等比例切成九张，多数人一听到数字就连连摇头了。也无怪乎，为何一些后期软件内置的切图功能会受到欢迎。不过，Shortcuts 本身就有切图（Crop）功能，只需一点数学技巧，就能打造出效果实用而过程优美的自动化动作。

- Shortcuts 动作下载

- 在 GitHub 第一时间获得更新

## 如何使用

九宫格切图，最后一定是希望获得九张正方形图片，方能展示成 3x3 的矩阵。论其操作，倒也简单，无非是准备好正方形的图片素材，然后让软件负责切割。我设计的动作高度自动化，您只要选择照片，然后稍作调整、将其改为正方形图片，后面的事情全部交给 Shortcuts。

详言之，选择图片后，Shortcuts 会显示一个精简的图片编辑界面（实际上是叠放界面），中间是一个正方形的画布，视原始图片的情况可选择以下操作：

- 图片本身就是正方形，此时稍稍缩放一下，让其边缘与画布边缘差不多对其即可；

- 图片不是正方形，想要展示的也只是其一部分，就可以进一步抻大，让多余部分溢出画布——此时，留下的部分就是一分不多一分不少的正方形；

- 图片不是正方形，但想要完整展示，此时需要给图片配一个底图，就像拍立得相机的相纸一样，此时也仅需要缩放、移动图像，挪到合适的位置——当然，即便是正方形的图片，也有人希望配上边框，让它看上去有相纸风格，此时同样只需调整图片位置和尺寸。

以上三种情形，均可在同一个操作中完成，不需要设置一系列复杂的 If 判断模块，大大降低了 Shortcuts 动作本身的复杂性。有很多 Shortcuts 动作，为了照顾不同的用户，内置了各种功能，结果就是步骤无比冗长、难以维护，甚至设计者自己都看不懂；另一个极端则是学福特汽车：您可以使用任何功能，只要您想要的只是我们提供的这一个功能。如果在设计上就能解决问题，最好不要陷入艰难的选择环节。

确定好需要切分的图片后，视图片大小，在几秒内即可获得切分好的图片。早期的相片店常用“立等可取”之广告，标榜自己冲印速度快；而本动作，可算是实打实的“立等可取”了。

## 简析原理

要用 Shortcuts 切图不难，难的是如何把这件事儿做得不要那么蠢。前文已经提及，仅仅是准备素材这一步，就要考虑多种情形，而传统做法是塞一大堆的 If 模块。其实，自 iOS 14 开始，Shortcuts 就引入了一个不起眼但威力十足的模块：Calculate Expression。它支持部分 BSD 算式以及部分 Apple 自己的表达式，用它处理涉及数字的内容，就不用一个接一个地组合 Shortcuts 计算模块。我曾在会员栏目中介绍过 PDF 下载动作，它还有个自动裁剪页面的增强版，就用到了算式。

切图时，我也引入了大量算式，把原本可能要几十步的动作压缩到仅仅十几步，大大降低后期维护成本。如波利亚所言，链条的强度取决于其最薄弱的环节，而一个几十步甚至上百步的动作，可能会留下太多弱点，以至于你都不知道哪一步出了问题。

### 用算式找出图片的长边

动作一开始，Shortcuts 会准备一张底图（以 base64 编码形式存储，可用此动作将您自己准备的图片编码），并以原图的长边为变长，将底图其调整为 长边x长边 的正方形。而输入的图片既可能是高度更长，也可能是宽度更大，需要判断。我写了一个算式，用基础算术即可算出长边的数值。下面的完整算式还将长边除以 3，得出的是切分后的小正方形图片边长。 \(\(Photos Width\+Photos Height\)\+abs\(Photos Width\-Photos Height\)\)/2/3

换成几何图示比较好理解，长加宽，再加上长宽的差，刚好就是两个长边；将其除以 2，就得到了长边的值。

### 用算式确定切图位置

接下来，要准备切图工作。切图有两组参数，一组是开始切图的座标，另一组是切分所得图片的长宽，后者刚刚已经算出来了，只需直接填上；现在的问题，是如何确定起始座标。稍微观察一下每一次切图的座标位置（单位座标），不难发现，其中必有规律。

具体推导过程此处略去，突破口在于 3 这个数字，无论横竖座标，均每三次出现一轮更迭，而对应的算子一般就是取余 mod 和最常见的除法。稍加归纳，计算座标轴的算式就出来了：

- 计算 x 座标：\(Repeat Index\+2\)mod3\*width

- 计算 y 座标：rint\(\(Repeat Index\-2\)/3\)\*width

## 小结

Shortcuts 并非寻常意义上的软件（Application），它不是传统的生产\-消费模式，而是让用户自己制作工具。因此，制作过程也是软件体验的一部分，涉及一个 Shortcuts 动作的内部“工艺”是否精巧，是否易于理解，是否便于维护。

Shortcuts 有不少模块——例如正则表达式匹配、URL Scheme 和 Javascript——属于通用工具，在大大缩减对图形化界面之依赖的同时，也便于调试，不需要揣测 Apple 的设计师埋了什么新品种地雷或留了什么祖传未爆弹。相比之下，对于算式模块的关注则太少了，本文借九宫格切图这一涉及大量计算的场景，一探 Shortcuts 中的算式与数学。

就像 Jobs 监督制造苹果电脑时说的那样，工具的内部结构，用户或许看不到，但设计者看得到，制作者看得到，上帝看得到。

---

[前往标准阅读页](https://utgd.net/article/20142?audience=web)
