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的步骤如下:

  1. 认为P0-P1上有个动态点Q1,P1-P2有个动态点Q2。
  2. Q1把P0-P1分成两段,P0-Q1和Q1-P1。Q2把P1-P2分成两段,P1-Q2和Q2-P2
  3. P0-P1两段和P1-P2两段之间满足距离比,满足乘积因子t,确定了Q1,Q2之后,那么认为B是Q1-Q2的一个点,分为Q1-B,B-Q2,这两段也满足该乘积关系。

具体动图如下

在这里插入图片描述

原生的绘图API是很难绘出圆润的线条,所以我们借助贝塞尔曲线进行线条绘制。

贝塞尔曲线不仅有二阶还有多阶,多阶我们并不需要,而且多阶计算量也大,所以我们采用了二阶贝塞尔曲线进行绘制。

我们做了一个对比图,第一幅为采集的原始点,第二幅为穿点图,第三幅采用贝塞尔拟合算法绘制。从图中对比可以较为明显地看出,穿点图的锯齿感很大而且非常难看。

ESLive课件白板介绍_第1张图片

图1、M图形的绘制

ESLive课件白板介绍_第2张图片

图2、周图形的绘制
贝塞尔拟合算法

既然使用二阶,那么对于一笔很多的点,不能简单的选取三个点一组作为控制点进行绘制。因为这样无法控制拐点的策略(计算机无法得知哪里是拐点),所以我们需要分段绘制。

具体策略步骤
  1. 输入所有的坐标点 [ P0,…Pn ];
  2. 找到 P0 和 Pn 之间的一条贝塞尔曲线C;
  3. 找出 [ P0, …Pn ]中 距离曲线 C 最大的坐标点 Pi以及距离d;
  4. 如果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},
  ...
]
传输过程需要考虑的因素:
  • 消息要急速送达
  • 数据会被巨量分发
  • 回放需要多次使用
结合以上三点,我们无需将“可读性”作为第一要素考虑,所以部分符号就可以减少使用甚至完全不用。

{"xy:,0.}

约定数据长度保留3位,最终优化后的数据传输格式如下:
[123,234,332,342,323,983,...]

EduSoho官方开发文档地址

EduSoho官网 https://www.edusoho.com/
EduSoho开源地址 https://github.com/edusoho/edusoho

你可能感兴趣的:(ESLive课件白板介绍)