手绘视频工具架构设计

目录

• 1. 使用场景
• 2. 思路和原理
  • 2.1. 方案1
  • 2.2. 方案2
• 3. 整体结构与关系
• 4. 功能特性
• 5. 内容
• 6. 路径
  • 6.1. 文本
  • 6.2. 失量图
  • 6.3. 位图
  • 6.4. 其它内容
• 7. 渲染
• 8. 导出视频

内容

1. 使用场景

1. 课程人员提供包含 内容、排版、布局、绘制顺序等信息的文件，解析该文件 生成 手绘效果的视频 或 数据
   • 需要实现排版模块，比如文字的
   • 如果布局有变动，需要更改前端项目 和 重新生成手绘数据
2. 课程人员配置 绘制顺序，前端人员将绘制顺序作为 标签属性 配置在需要被绘制的元素上，然后调用手绘引擎传递 元素 或 网页，手绘引擎生成 手绘效果的数据 或 视频；
   • 如果布局有变动，只更改前端项目

2. 思路和原理

2.1. 方案1

1. 对文字、失量图、图片 生成路径
2. 根据路径和时间 生成 位置点
3. 根据位置点移动手势图片 和 绘制遮罩，这样便产生了 手写动作（通过移动手势图片） 和 内容被写出来的效果（通过绘制遮罩）

2.2. 方案2

1. 做一个或几个通用的手绘手势动画
2. 对于文字，将手势动画沿着文字方向移动，对于矩形区域，将手势沿着特定的方向往复前行

3. 整体结构与关系

架构图

• 内容：对外暴露接口，方便用户使用；提取输入内容
• 路径：将内容转为路径
• 渲染：将路径渲染为动画
• Web展示：使用Web的机制展示动画
• 导出视频：将动画转为视频

4. 功能特性

• 支持对 文本、失量图、位图 或 其它的东西 生成手绘效果
• 支持某个已存在的元素生成手绘效果
• 支持对整个网页生成手绘效果
• 支持对网页中具有相应配置的元素生成手绘效果
• 整个功能可放在前端执行，也可以后端负责解析路径，前端负责渲染
• 如果使用后端解析路径、前端渲染的方式，则可以减少前端与后端传输数据的体积

5. 内容

内容模块对外暴露接口，方便用户使用；并提取用户输入的内容。

用户可以提供以下内容：

• 内容：直接提供要被绘制的内容，如：文本、失量图 等等
• 元素：用户提供了 Dom元素 或 元素的选择器
• 网页：用户提供了网页的地址，并且元素中包含绘制顺序信息

6. 路径

6.1. 文本

文本的字体分为两类，一是位置字体 和 失量图 字体。

• 位图字体：我们可以通过查询 字码 与 字体失量信息的表来获得对应字体的字的失量信息；
• 失量字体：失量字体也可通过上术方法获取字体的失量信息，也可以通过读取字体文件直接获取失量信息；

6.2. 失量图

可通过相关工具读取失量图的信息，对于 SVG，即使没有相关路径提取库，也可自行解析并提取；

6.3. 位图

可以通过一些算法 或 工具 对位置生成轮廓路径

6.4. 其它内容

我们预置一些手绘手势的路径（如：从左下到右上的往运动路径），对所有未知的类型采用这种路径

7. 渲染

光有路径还不能直接做动画，因为动画是基于时间 和 位移序列，所以，我们还需要根据动画时间 和 路径 生成一系列 坐标点序列，然后根据这些坐标序列点生成动画。

动画内容分布为两块：

1. 手绘手势的运动动画
2. 内容跟随手绘位置逐渐展示，这个可以通过绘制遮罩的方案

8. 导出视频

可对每个动画帧生成图片，然后通过一些工具（比如：FFmpeg）这些图片 合成视频