關鍵詞：老師端詳細建私有白板, array_reverse

一、私有白板向老師端傳圖片數據

1.1 服務器運行平臺

老師端：https://123.57.206.36:9100/demos/index.html?roomid=888

學生一：

https://123.57.206.36:9100/demos/student.html?studentId=1001&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1479740395ZMJkiF.jpg#888

學生二：                   

https://123.57.206.36:9100/demos/student.html?studentId=1002&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480494624FDjMGetutor.png#888

學生三：

https://123.57.206.36:9100/demos/student.html?studentId=1003&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480475198N2F0kntutor.png#888

1.2學生端私有白板dataURL傳到老師端

1）把學生端私有白板dataURL傳過去

  實現了，代碼如下：

  a.) 學生端（Student.html）發dataURL過去：

   function student

            connection.send({

                studentPri: true,

                imgId:imgId,

               dataURL: dataURL

           });

       });

}

b.)老師端（index.html）接收，代碼如下：

   //獲取學生私有白板圖片數據

    if (event.data.studentPri) {

       console.log('event.data------>',event.data);

        return;

    }

2）把學生端傳過來的圖片數據及頭像id放到一個數組中

   生成數組成功，代碼如下：

stuPriUrlIdArray = new Array();

   //獲取學生私有白板圖片數據

   if (event.data.studentPri) {

       //把學生id及學生傳過來的私有白板圖片追加到數組中，供老師查看

       stuPriUrlIdArray.push([event.data.studentId,event.data.dataURL]);

       console.log('stuPriUrlIdArray------>',stuPriUrlIdArray);

       return;

}

注：現在保留一個問題，就是學生端上傳的私有白板圖片有重復的（原因是學生寫滿一張，可能會多次上傳），另外，學生端也要生成一個數組，用于存放過往私有白板dataURL，供自己回放來看，后期再優化。

1.3 老師端建一個私有白板，供查詢學生作業

 1）建立成功，詳細代碼如下：

a.)建立一個div----index.html

<divid="widget-container-private-tea" class="widget-container"style="display:block;height: 800px;"></div>

b.)引用這個div----index.html

designer.appendPriTeaTo(document.getElementById('widget-container-private-tea'));

c.)建函數designer.appendPriTeaTo----canvas-designer-widget.js

         //老師私有白板iframe

    designer.appendPriTeaTo =function(parentNode) {

        designer.iframe_private_tea =document.createElement('iframe');

        designer.iframe_private_tea.src =designer.widgetHtmlPriTeaURL + '?widgetPriTeaJsURL=' +designer.widgetjspriTeaURL + '&tools=' + JSON.stringify(tools) +'&selectedIcon=' + selectedIcon;

        designer.iframe_private_tea.style.width= '100%';

       designer.iframe_private_tea.style.height = '100%';

       designer.iframe_private_tea.style.border = 0;

        //window.removeEventListener('message',onMessage);

        //window.addEventListener('message',onMessage, false);

       parentNode.appendChild(designer.iframe_private_tea);

    };

上述函數中，新建了一個iframe為：designer.iframe_private_tea，又設置了三個變量分別為：designer.widgetHtmlPriTeaURL、designer.widgetJsPriTeaURL及widgetPriTeaJsURL分別定義如下：

C1.)designer.iframe_private_tea---------- canvas-designer-widget.js中

     designer.iframe_private_tea= null;

C2.) designer.widgetHtmlPriTeaURL---------------- canvas-designer-widget.js中

designer.widgetHtmlPriTeaURL= '/demos/widget_private_tea.html';

C3.)designer.widgetJsPriTeaURL------------------ canvas-designer-widget.js中

designer.widgetJsPriTeaURL= '/static/js/widget.private.tea.min.js';

C4.）widgetPriTeaJsURL--------------------widget_private_tea.html中

script.src =params.widgetPriTeaJsURL || './widget.js';

當然，要增加兩個文件如下：widget_private_tea.html及widget.private.tea.min.js，所在文件具體為：

widget_private_tea.html位于：/static/js/下面

widget.private.tea.min.js位于：/demos/下面

運行效果如下：

2）加載學生私有白板圖片

  a.)先顯示一張

二、php

2.1 PHP array_reverse() 函數

1）定義和用法

array_reverse() 函數返回翻轉順序的數組。

2）語法

array_reverse(array,preserve)

3）看個例子一如下：

注：數組反轉，不排序；不加參數true，鍵名重新標記；加了參數true，鍵名不變，跟著原來的鍵值。

4）看個例子二如下：

注：只是翻轉，不進行值的排序。

2017年2月27日星期一