这是我参与「第五届青训营 」伴学笔记创作活动的第 19 天
- 在开始正式介绍之前，还是先展示一下项目的效果
- 整个动画是线条勾勒的形式
- 采用完整的一笔相继勾勒出ldm、心电图、爱心、心电图和zyy几个元素
- 今天要讲解的是心跳波形的实现和字母点阵数据的获取
- 心跳波形数据采用的随机数
- 定义一个步长speed
- 绘制心电图的时候，每次向右移动的距离是步长乘以一个随机数，随机数取值为0-1之间
let x1 = x + Math.random() * speed + speed;
- 每次y的值先设置成屏幕中间的高度的，然后以35%的随机概率会跳动，即y的值会增加或减少maxHeight以内的一个高度
if (Math.random() > 0.65 && active == 0) {
y1 += Math.random() * maxHeight * 2 - maxHeight
}
- 手写字路径实现
- 先把ldm的字母手写出来，因为要实现一笔完成，所以书写的时候要注意美观性和连贯性的协调
- 然后打开photoshop软件，导入图片，使用钢笔工具描绘路径，描绘完毕后转成铅笔线条
- 接着创建一个新的涂层，用ps的铅笔工具进行描点，描点时要注意硬度选到最大，像素选到最小，以确保下一步读取像素点的误差尽可能的小，描点后导出为png图像
- 使用python的numpy，PLT和matplotlib工具包对新生成的点阵图像进行处理，得出表示点坐标的points数组（有效像素数组）
- 由于图像中点和像素并非一一对应的关系，所以还需要计算有效像素之间的距离，距离平方在4px及以内的像素被看作来自于同一个点，保留一个像素即可
- 由于numpy中读取的点是一行一行的，所以points中点的顺序显然不符合我们的要求下一步就是对像素点按照比划顺序进行排序
- 最后排序完成的像素点即可导出成手绘路径的点坐标
- 参考代码： github.com/degiminnal/…
