第58篇老师端私有白板展示(一)老师端详细建私有白板及PHP array_reverse 周一
来源:互联网 发布:kt交易师软件下载 编辑:程序博客网 时间:2024/05/17 09:07
关键词:老师端详细建私有白板, 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日星期一
- 第58篇老师端私有白板展示(一)老师端详细建私有白板及PHP array_reverse 周一
- 第59篇老师端私有白板展示(二)老师端私有白板列表显示及列表图片上传到白板 周二
- 第61篇一对多之老师端私有白板点击上共享白板及老师端学生私有白板加载多次及点头像出私有白板列表周四
- 第57篇一对多实现之私有白板向老师端传图片数据(四)新建一个iframe及成功获取私有白板数据 周日
- 第64篇一对多之学生端修改私有白板并保存(三)及私有白板传到老师端
- 第55篇一对多实现之私有白板向老师端传图片数据(二)及array_reduce
- 第56篇一对多实现之私有白板向老师端传图片数据(三)仿制传图片dataURL及array_replace及array_replace_recursive
- 第71篇一对多之优化实时共享私有白板最后一页(二)添加了一个老师辅导按钮
- 第72篇一对多之优化实时共享私有白板最后一页(三)两个学生相互刷新解决及追加div传参数周一
- 第62篇一对多之学生端修改私有白板并保存及array_shift
- 第63篇一对多之学生端修改私有白板并保存(二)
- 第70篇一对多之addImgByUrl优化及学生端实时传输白板到老师端及头像下面添加姓名
- 第67篇一对多之头像与视频合成(二)私有白板在视频上拉取成功
- 第60篇一对多之学生端私有白板图片保存及学生传数组过去不再单张传周三
- 第44篇白板bug修复(一)
- 第42篇白板同步延迟问题(四)及data传输模式分析(一)
- 关于学习loadrunner入门教程的学习笔记(部分截图摘抄老师白板)
- 第58篇 IOS端前端找老师逻辑(一)及Sublime查文件夹
- 树的直径 —— 即一棵树的最长路 附题(大臣的旅费 by蓝桥杯)
- PAT甲级1026. Table Tennis (30)
- struts2:二
- 每日一省之————加权无向图的最小生成树算法(Prim/Kruskal算法)
- 1067. Sort with Swap(0,*) 解析
- 第58篇老师端私有白板展示(一)老师端详细建私有白板及PHP array_reverse 周一
- 统计对象中有几个属性
- Readonly和Disabled的区别
- babel总结
- linux 下 select 编程
- idea for mac快捷键
- 1.2 产品最终定位的心得体会
- 集成模型的五个基础问题
- 462. Minimum Moves to Equal Array Elements II\520. Detect Capital\383. Ransom Note