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是很難繪出圓潤的線條，所以我們借助貝塞爾曲線進行線條繪制。

貝塞爾曲線不僅有二階還有多階，多階我們并不需要，而且多階計算量也大，所以我們采用了二階貝塞爾曲線進行繪制。

我們做了一個對比圖，第一幅為采集的原始點，第二幅為穿點圖，第三幅采用貝塞爾擬合算法繪制。從圖中對比可以較為明顯地看出，穿點圖的鋸齒感很大而且非常難看。

圖1、M圖形的繪制

圖2、周圖形的繪制

貝塞爾擬合算法

既然使用二階，那么對于一筆很多的點，不能簡單的選取三個點一組作為控制點進行繪制。因為這樣無法控制拐點的策略（計算機無法得知哪里是拐點），所以我們需要分段繪制。

具體策略步驟

輸入所有的坐標點 [ 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

總結

以上是生活随笔為你收集整理的ESLive课件白板介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。