第58篇老师端私有白板展示（一）老师端详细建私有白板及PHP array_reverse 周一

关键词：老师端详细建私有白板, 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 studentPRiDataURL(){

       imgId=9;

       designer.saveImgPrivate('image/png',imgId, function(dataURL,imgId) {

            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日星期一