ESLive课件白板介绍
ESLive课件白板介绍
网络作为一种新兴的教育媒介，我们借助它可以实现价值分享，名师共享，媒体分享、图文动画教学等效果，且不受地域时间限制。网络直播平台分为教师端、学生端。教师端通过PC上的应用展开直播，与之对应的学生端则可以使用诸如浏览器、APP、H5等途径学习直播课程。
ESLive 简介
EduSoho推出的教师端工具 ESLive 在 PC 上为教师提供优质服务，其中主要有课件白板、音视频处理、音视频传输、屏幕共享、聊天、美颜、降噪和其他互动功能。下面将介绍我们EduSoho推出的教师端工具ESLive的白板部分。
ESLive 课件白板之绘图
当教师在白板上使用画笔进行绘图时，由系统API采集获取白板上鼠标的移动点。需要考虑以下关键点。
- 保证绘图 流畅，线条美观。
- 以较小的数据量传输到学生端以便降低延时，同时方便后期回放过程中节省大量的传输和存储成本。
1 如何解决在绘图时出现的界面卡顿、CPU占用过高问题
1.1 前期调研
-
从
update到真正的paintEvent调用一般耗时 3-8 ms -
绘制过程中，如果无法及时响应鼠标移动事件回调事件，将获取不了鼠标的实时位置，或者会丢点，当丢点很多时，绘图就会出现锯齿。
-
考虑画一笔的极限图形，绘制点最多可能达到5000~6000点左右。采用的绘图方式有两种：
1
QPainterPath绘图方式，绘制1000个点耗时达到60ms左右。2
drawLine绘图方式，绘制5000个点耗时达到60ms左右。
1.2 出现的界面卡顿、CPU占用过高的原因
-
所有画笔线条同时绘制
-
update调用频繁（将触发界面更新） -
在绘制文字时，由于光标持续闪烁，会触发界面更新
1.3 界面卡顿、CPU占用过高解决方案
针对以上问题，我们采取“增量绘制”、“多图层”、“合理定时”来解决。
1.3.1 增量绘制
绘制出所有的点，会导致CPU占用过高，对于我们而言没有必要。为此我们采用了增量绘制的方式。绘制流畅，速度快（底层是直接内存拷贝）
将之前的绘图保存为一个底层图，每次绘制时，通过内存拷贝直接渲染底层图，实现每次只绘制最后一笔的效果。
1.3.2 多图层
基于增量绘制的方案，我们设计了三层图层。
- 原色图或课件层 （底层）
- 历史画笔层 （中间层）
- 实时绘图层 （顶层）
1.3.3 合理定时
对于输入文字方面，输入框的光标闪烁引起底层的无限绘制，由于视图间的链式结构，在父图层也会被绘制，所以这个需要控制刷新频率。
2 背景绘制性能问题
当我们遇到高清屏或者巨型屏时, 完成一个背景图层（比如黑板的颜色黑色背景、绿色背景）的填色功能需要消耗很长时间。图片越大，填充过程中越耗时。
背景绘制性能解决方案
在初始状态是纯色场景的前提下，设定较小的场景图，结合 scale 方式，获得大图。将原来的按点计算填充颜色改成了按块计算，性能得到较大的提高。
3 如何绘制圆润线条
线条圆润是能直接影响学习效率的。俗话说，见字如见人，难看的板书，放谁都难有学下去的欲望。
初期使用穿点绘制（drawLine API）存在的问题
当以较慢的速度进行绘制时，会存在过度采集的问题，因为鼠标事件在持续回调。存储了较多无用点，影响性能，就算丢弃一部分点，穿点绘制仍然会有锯齿。尤其是在教师慢慢移动鼠标的情况时，采集的点会上下抖动，若采用穿点，就会造成线条锯齿状，不幸的是，抖动情况不可避免。
使用贝塞尔曲线绘制圆润的曲线
二次贝塞尔曲线
粗略解释一下二次贝塞尔曲线的公式。当 t 从 0 到 1 开始递增时，比如 0.1 ~ 0.2 ~ 0.3 …~ 0.8 ~ 0.9 ~ 1。每取一个点，就得到一个值B，对应图就是移动的黑点（对于计算机绘制系统，自然是间隔越小，因变量B点就越多，绘制起来就越圆润，同时也要要考虑效率和观感平衡）。
每取一个点t，对应计算B的步骤如下：
- 认为P0-P1上有个动态点Q1，P1-P2有个动态点Q2。
- Q1把P0-P1分成两段，P0-Q1和Q1-P1。Q2把P1-P2分成两段，P1-Q2和Q2-P2
- P0-P1两段和P1-P2两段之间满足距离比，满足乘积因子t，确定了Q1，Q2之后，那么认为B是Q1-Q2的一个点，分为Q1-B，B-Q2，这两段也满足该乘积关系。
具体动图如下
原生的绘图API是很难绘出圆润的线条，所以我们借助贝塞尔曲线进行线条绘制。
贝塞尔曲线不仅有二阶还有多阶，多阶我们并不需要，而且多阶计算量也大，所以我们采用了二阶贝塞尔曲线进行绘制。
我们做了一个对比图，第一幅为采集的原始点，第二幅为穿点图，第三幅采用贝塞尔拟合算法绘制。从图中对比可以较为明显地看出，穿点图的锯齿感很大而且非常难看。
贝塞尔拟合算法
既然使用二阶，那么对于一笔很多的点，不能简单的选取三个点一组作为控制点进行绘制。因为这样无法控制拐点的策略（计算机无法得知哪里是拐点），所以我们需要分段绘制。
具体策略步骤
- 输入所有的坐标点 [ P0,…Pn ]；
- 找到 P0 和 Pn 之间的一条贝塞尔曲线C；
- 找出 [ P0, …Pn ]中 距离曲线 C 最大的坐标点 Pi以及距离d；
- 如果d在误差范围内则拟合成功，产生一条贝塞尔曲线并添加到绘图序列中。否则分别拟合 [ P0 ,….Pi ] 和[ Pi ,….Pn ]
图1、图2中第三幅图的中间部分是使用拟合算法绘制的，图片中的红点就是对应的分治点。同时我们也能观察到，每到“变化强烈”的位置（比如拐点），红点较多。其实这就是将多个更小的片段拟合连接在一起的效果。
贝塞尔拟合算法优势
- 能够绘制圆润美观的图形。
- 即使丢弃一半的点，得到的最终图形仍然保真。
4 画笔数据的传输
白板内图形有线条、矩形、圆形、文字等，为了支持画板适配不同的分辨率，我们使用小数来描述位置信息。这样无论在手机上还是在 PC 上都能得到一致的画面。
4.1 传输画笔数据时，图形被细分为一系列点，以线条举例，其他图形类似。
绘图坐标点： (x1,y1), (x2,y2), (x3,y3), …
最初设计的json格式如下：
[
{"x":0.12343,"y":0.23432},
{"x":0.332212,"y":0.34223},
{"x":0.32339,"y":0.983232},
...
]
传输过程需要考虑的因素：
- 消息要急速送达
- 数据会被巨量分发
- 回放需要多次使用
结合以上三点，我们无需将“可读性”作为第一要素考虑，所以部分符号就可以减少使用甚至完全不用。
{、"、x、 y、:、,、0.、}
约定数据长度保留3位，最终优化后的数据传输格式如下：
[123,234,332,342,323,983,...]
EduSoho官方开发文档地址
EduSoho官网 https://www.edusoho.com/
EduSoho开源地址 https://github.com/edusoho/edusoho