目录
内容
1. 使用场景
- 课程人员提供包含 内容、排版、布局、绘制顺序等信息的文件，解析该文件 生成 手绘效果的视频 或 数据
- 需要实现排版模块，比如文字的
- 如果布局有变动，需要更改前端项目 和 重新生成手绘数据
- 课程人员配置 绘制顺序，前端人员将绘制顺序作为 标签属性 配置在需要被绘制的元素上，然后调用手绘引擎传递 元素 或 网页，手绘引擎生成 手绘效果的数据 或 视频；
- 如果布局有变动，只更改前端项目
2. 思路和原理
2.1. 方案1
- 对文字、失量图、图片 生成路径
- 根据路径和时间 生成 位置点
- 根据位置点移动手势图片 和 绘制遮罩，这样便产生了 手写动作（通过移动手势图片） 和 内容被写出来的效果（通过绘制遮罩）
2.2. 方案2
- 做一个或几个通用的手绘手势动画
- 对于文字，将手势动画沿着文字方向移动，对于矩形区域，将手势沿着特定的方向往复前行
3. 整体结构与关系
架构图
- 内容：对外暴露接口，方便用户使用；提取输入内容
- 路径：将内容转为路径
- 渲染：将路径渲染为动画
- Web展示：使用Web的机制展示动画
- 导出视频：将动画转为视频
4. 功能特性
- 支持对 文本、失量图、位图 或 其它的东西 生成手绘效果
- 支持某个已存在的元素生成手绘效果
- 支持对整个网页生成手绘效果
- 支持对网页中具有相应配置的元素生成手绘效果
- 整个功能可放在前端执行，也可以后端负责解析路径，前端负责渲染
- 如果使用后端解析路径、前端渲染的方式，则可以减少前端与后端传输数据的体积
5. 内容
内容模块对外暴露接口，方便用户使用；并提取用户输入的内容。
用户可以提供以下内容：
- 内容：直接提供要被绘制的内容，如：文本、失量图 等等
- 元素：用户提供了 Dom元素 或 元素的选择器
- 网页：用户提供了网页的地址，并且元素中包含绘制顺序信息
6. 路径
6.1. 文本
文本的字体分为两类，一是位置字体 和 失量图 字体。
- 位图字体：我们可以通过查询 字码 与 字体失量信息的表来获得对应字体的字的失量信息；
- 失量字体：失量字体也可通过上术方法获取字体的失量信息，也可以通过读取字体文件直接获取失量信息；
6.2. 失量图
可通过相关工具读取失量图的信息，对于 SVG，即使没有相关路径提取库，也可自行解析并提取；
6.3. 位图
可以通过一些算法 或 工具 对位置生成轮廓路径
6.4. 其它内容
我们预置一些手绘手势的路径（如：从左下到右上的往运动路径），对所有未知的类型采用这种路径
7. 渲染
光有路径还不能直接做动画，因为动画是基于时间 和 位移序列，所以，我们还需要根据动画时间 和 路径 生成一系列 坐标点序列，然后根据这些坐标序列点生成动画。
动画内容分布为两块：
- 手绘手势的运动动画
- 内容跟随手绘位置逐渐展示，这个可以通过绘制遮罩的方案
8. 导出视频
可对每个动画帧生成图片，然后通过一些工具（比如：FFmpeg）这些图片 合成视频
网友评论