主题 : 从入门到精通:四个实例参透 iOS “快捷指令” (下)
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61679(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

从入门到精通:四个实例参透 iOS “快捷指令” (下)

— 速览 —
• 本帖为"上、中、下"的下篇,请先阅读中篇(点此跳转[color=transparent])和上篇(点此跳转[color=transparent])
• 在中篇里,我介绍了向指令中添加新操作的方法,以及调整输入、使用结果的技巧;
• 自行设计实用指令的关键是:明确需求,找出步骤,搜索对应操作;
• 本帖将使用两个新的实例,"图片九宫格切割器"以及" OCR 文字识别",为大家展现"快捷指令"的真正实力。可能会涉及到的概念:
1. JavaScript,一种构建网页的编程语言;
2. API,又叫"应用程序接口",是软件 App 间传递数据的通道;
3. JSON,软件 App 通过 API 传递数据时,数据使用的格式;
废话不多说,开始正文。




— "实例三:图片九宫格分割器" —
成品点此下载👉九宫格分割器
这个工具在主流社交平台很有用,之家的 IT 圈也好,微信的朋友圈也好,图片预览的数量都是 9 张,且排列成九宫格。我们只要把一张图片分为九等份,它们就能在九宫格视图里重新组成完整的图片。


[color=transparent]首先思考🤔正常情况下,我们是如何利用 iPhone 将图片九等分的?

1."九等分"的本质是"裁剪",而 iOS 原生相册就支持"裁剪"功能; 


2.考虑到"九宫格"整体是一个"正方形",我们得先把矩形的图片裁剪为正方形,才能进一步对其"九等分";


3.如果是手工裁剪的话:
▼ 首先利用网格线看准左上、右上、左下、右下等几个"九等分"的位置;


▼ 然后将裁剪框拖到相应位置,并将裁切操作重复 9 次,我们就能得到"九等分"的图片了;


显然,手工"九等分"完全靠感觉,无法做到绝对准确,有强迫症的用户不喜欢;但以上步骤说明了一件事:iPhone 原生功能是可以实现"九等分"的,如此一来,"快捷指令"中有相应"操作"的可能性就很高。
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61679(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

▼ 不出所料,在"快捷指令"中搜索"裁剪",果然有此功能


▼ 遇到不熟悉的"操作",还是那句话,添加进去试一试就懂了


• 输入:照片;
• 位置:裁剪框放置的位置;
• 宽度:裁剪框的水平边的长度;
• 高度:裁剪框的垂直边的长度;
至此,大家心里应该隐约知道,"九宫格分割器"是如何运作了吧?与"洗衣计时器"一样,前者是以"创建新提醒"为核心,通过计算"洗衣结束时刻"来实现定点通知;后者是以"图片裁剪"为核心,通过设定裁剪框的位置、大小,来实现精确的"九等分"。
不过,正如最开始的步骤所言,一张图片想要"九等分",它自己就必须是"正方形",所以我们得先添加一个"将原始图片裁剪为正方形"的步骤:
1. 裁剪框的位置:虽然照片的主体未必在正中,但一般来说,保留中央区域对照片观感不会产生太大影响,所以我们选择"中间";
2. 正方形裁剪:小学几何知识,正方形是四边等长的矩形,只要保证"宽度"和"高度"一样即可;
3. 正方形的边长具体是多少:这个是问题的关键,为了最大限度地保留照片内容,我们肯定会让"正方形的边长"与"照片的短边长度"相同,即撑满画面,如下图所示


所以,为了实现"原图的正方形裁剪",指令的逻辑是:
1.找到图片的短边;
2.把短边长度设为"正方形边长";
3.居中裁剪;
▼ 获取边长的"操作",怎么找到它不需要再重复了吧?搜索,搜索,搜索


▼ 将所选照片的"宽度" "高度"都获取一次


▼ 判定的逻辑,用大白话说就是,如果"宽度"小于"高度",那"宽度"就是短边长,我们就把"宽度"作为"正方形边长";否则的话,就把"高度"作为"正方形边长"。在"快捷指令"里搜索"如果",发现 iPhone 支持这种逻辑;


▼ 遇到陌生的操作,不要害怕,插入看看你就瞬间明白了:只要把后续的指令拖动到"如果"或"否则"的下面,它们就会按照"如果…否则…"的逻辑运行了;


▼ 先按照大白话,把"如果"的条件输进去。记得使用"魔法变量"来选择参数!


▼ 目前指令中尚不存在名叫"正方形边长"的变量,为了让指令看起来清晰一点,我们搜索"变量",找到一个"设定变量"的操作
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61679(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

▼ 仍然是大白话,把"正方形边长"设为"宽度"


▼ 如法炮制,"否则"的部分大家应该知道怎么做了吧?


▼ 别忘了把"图片裁剪"中的"高度" "宽度"设为"正方形边长"!


▼ 我们运行下指令,看看效果如何:


[color=transparent]虽然有种大功告成的感觉,但我们只进行了九宫格分割的第一步:将原图裁剪为正方形备用。不过随着你对"快捷指令"的不断熟悉,我们的步伐可以加快一些了。

接下来要将图片九等分。我们只需要将裁剪框设置成一个 1/9 的正方形,然后在九个方位依次裁剪,产生9 个"小正方形",不就可以了?


所以实现"九宫格"裁剪的逻辑是:
1.确定"小正方形"的边长,并将它的边长作为裁剪框的边长;
2.分别将裁剪框定位在↖️↗️↙️↘️等 9 个位置,裁剪 9 次;
3.保存裁剪后的 9 张图片;
▼ 根据小学几何知识,"小正方形"边长= 1/3 的"正方形边长"


▼ 接着,我们要将"小正方形"准确地放到图片的 9 个方位上,以实现"九等分"的裁剪效果。还记得"图片裁剪"里的位置参数吗?这个参数是可以自定义的:


▼ 所以,问题的关键就变成,如何算出裁剪框的坐标位置?这里科普一个小常识:所谓"裁剪"的坐标,指的是裁剪框左上角的位置,如下图:
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61679(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

• X 坐标的值:相当于裁剪框与左边缘的距离;
• Y 坐标的值:相当于裁剪框与右边缘的距离;
这个功能好啊!在原生相册中,我们九等分图片全靠感觉;没想到在"快捷指令"中,"裁剪"这个功能相比相册居然得到了强化,以至于能准确设定裁剪的位置。
1. 左上角小正方形坐标:
[color=transparent]•[color=transparent] X = 0,Y = 0
[color=transparent]•[color=transparent] 因为它同时贴着左边缘和上边缘;
2. 右下角小正方形坐标:
 • X = 2 × "小正方形边长",Y = 2 × "小正方形边长"
• 因为它与左边缘和上边缘都隔了 2 个小正方形;
我把所有小正方形的坐标列成了一个表格,请看:


举例:如果我想裁剪右下角位置的小正方形(第九个),则需要在"裁剪图片"中设置:


敏锐的读者会发现,的确,我只要把"裁剪图像"这个操作重复 9 次,每次都输入相应的 X、Y 坐标,最后就能输出 9 张等分的图片,但我有这精力,还要什么"快捷指令"呢?直接手动裁剪不是更快吗?
说得好!所以我们搜索下,发现 iPhone 能代替你完成"重复"的步骤


这个"操作"也属于一看就会的类型,放在"重复"和"结束重复"之间的操作,会被重复 ?次


[color=transparent]但是,我们并不是把完全相同的任务重复 9 次;每次重复,小正方形的坐标都需要修改,这该怎么办?显然,iPhone 没那么蠢,当然可以在每次重复中使用不同的参数

iPhone 会给每次"重复"进行编号,比如第一次重复记为 1,第二次重复记为 2,这个编号被称为"重复索引",我更喜欢称为"第 X 次重复"。


拥有编号,事情就简单了。我们只需要一个列表,这个列表的每一行代表了一次重复。比如第 2 行,这一行会指导iPhone 在第 2 次重复时应该怎么做。见下图:
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61679(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

但是但是,"快捷指令"不是只能像做填空题一样,修改特定的参数吗?列表该怎么办?其实,你只要搜索一个叫做"词典"的"操作",问题就解决了;


(注意!"词典"是个很关键的概念,它是"快捷指令"使用网络 API 实现高阶功能的基础)
虽然名字叫"词典",但它本质上就是个表格,如下图(值的类型要选择"词典"):


一行就代表一次"重复"。然后,我们需要在每一行中填充"做什么"。以右下角的小正方形,即第 9 个小正方形为例,它会在第 9 次重复时被裁剪出来,因此我在第 9 行中输入对应的参数(值的类型要选择"数字")


• X = 2,代表 2 倍的小正方形边长;
• Y = 2,代表 2 倍的小正方形边长;
以此类推,我们把整张表格填完,并把这张指导"iPhone 应该如何重复"的表格放进"重复"的"操作"里。接下来的逻辑就很简单了:
1.假设现在是第 3 次重复,那"重复索引"的值就是 3;
2.我首先让 iPhone 去表格中找到第 3 行(学到这里,大家应该能够自己找到这个"操作"吧?"获取词典值"



3. iPhone 成功找到了第 3 行,里面记录了 X、Y 坐标关于"小正方形边长"的倍数信息。我只要让"倍数"与"边长"相乘,不就能得到 X、Y 坐标的具体值了?这里用到的操作仍然是"获取词典值",因为每一行也相当于一个"小词典"


4.将相关结果输入到"图片裁剪"操作中去,大功告成!


[color=transparent]5.别忘了在 9 次重复结束后,把生成的 9 张照片"保存到相册"
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61679(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

我们来试运行一下吧:
▼ 原图:


▼ 九宫格分割后:






— 下篇总结 —
本帖中,我从零开始制作了一个"图片九宫格分割器",至此各位已经见识到了"快捷指令"中 99% 的操作。总结下就是:
• 总共有种逻辑:
1. 如果…否则…:指令会根据某个条件,在岔路口二选一,当然,你也可以进行套娃,这样就能四选一、八选一了;
2. 重复:指令会重复执行相关操作,我们只要使用一张表格,就能实现每次重复时调用不同的参数;
3. 选取:这是在"社畜的洗衣机"中用到的逻辑,类似"如果…否则…",不过选项能有很多,且最后用哪个选项完全看用户的意愿;
• 虽说"魔法变量"使得用户不需要"定义一个变量,使用一个变量",但有时引入变量并不会使逻辑变得混乱,反而能帮助用户进行后续的思考;




下篇内容到此结束,希望各位有一个良好的阅读体验。细心的读者可能发现,说好的 Java 呢?说好的 API 呢?这些内容也很有趣,但本帖的篇幅已经超标了,所以请各位期待一个"番外篇"吧。如果文中出现错误,还请大佬们批评指正,在此谢过了~🙏
知足常乐
级别: 十方秋水

UID: 23
精华: 1
发帖: 261065
威望: 117081 点
无痕币: 2195 WHB
贡献值: 0 点
在线时间: 9388(时)
注册时间: 2007-11-24
最后登录: 2024-03-29

看看了解一下,谢谢总版分享!
事能知足心常乐 人到无求品自高
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61679(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

这个可以看看,了解一下。
级别: 十方秋水

UID: 88
精华: 0
发帖: 129690
威望: 220744 点
无痕币: 105747 WHB
贡献值: 0 点
在线时间: 51559(时)
注册时间: 2008-03-18
最后登录: 2024-03-29

支持楼主,感谢分享。
Total 3.059438(s) query 4, Time now is:03-29 07:16, Gzip enabled 粤ICP备07514325号-1
Powered by PHPWind v7.3.2 Certificate Code © 2003-13 秋无痕论坛