这是我参与「第五届青训营 」伴学笔记创作活动的第 20 天
- 项目的效果如下所示
- 整个动画是线条勾勒的形式
- 采用完整的一笔相继勾勒出ldm、心电图、爱心、心电图和zyy几个元素
- 接上一节
- 上一节已经实现了手写字母转像素点的坐标数组的工作
- 这一节提出了两个策略可以实现坐标数组按手写笔画排序的功能
- 方法一（暴力标注法）：
- 实现思路：因为字母的点已经在数组中存储了，所以只需要一个一个输出数组中的点然后对照真实书写过程中的顺序，即可完成一个序列的转化
- 操作步骤：
按照如下的方式对散点进行编号
从points数组中依次用不同颜色遍历标识出数组中的点
根据根据标识的结果对照编号定义一个indexs数组
其中indexs[i]即为points数组中第i个点对应真实笔画中第几个点
根据indexs的索引顺序，对points中的散点重新排序
4.方法二（通道编码法）：
- 实现思路：用像素点的颜色来编码点的顺序
- 像素点的颜色可以从（0，0，0）变化到（255，255，255）
- 其中一个状态用于区分背景，其余种状态可以编码点的顺序
- 我们直需要在PS描点的步骤每画一个点变一个颜色即可，数值依次递增
- 最终可以轻松在代码中对这些点根据颜色值进行排序
5.方法三（分组编码法）：
- 这是方法二的进阶版
- 仔细思考方法二我们可以发现，其实没有必要每个点设置一个RGB数值，用于区分顺序
- 因为点本身坐标也会存储位置信息
- 这样我们把坐标可以区分的点各自分组
- 每一组中的点都满足一个特点，即在笔画中处于相近的位置，且其横坐标随着笔画的书写单调增或单调减
- 比如：方法一的图中点{0, 1}属于同一组，点{1,2,3,4}也属于同一组
- 组内的单调信息用其中一个通道来表示（其实一个比特位就行），组号用其余两个通道来表示即可
- 最后根据RGB的值对分组进行排序，然后根据组内横坐标对组内点进行排序
6.参考代码： github.com/degiminnal/…
