本文介绍了一个在线教育平台中师生交互白板功能的实现细节，包括如何将学生端私有白板的图片数据传送到教师端并显示，如何在教师端清空私有白板以及如何将选中的图片加载到教师端私有白板上。
关键词：老师端私有白板列表显示,老师端私有白板列表图片上传到老师端私有白板,老师端私有白板清空,老师端私有白板图片加载函数
一、私有白板向老师端传图片数据
1.1 服务器运行平台
老师端：https://localhost:9101/demos/index.html?roomid=888&t=600
学生一：
学生二：
学生三：
1.2 加载学生私有白板图片
1)列表展示
描述：学生端传过来几张图片，老师端能显示一个列表出来，代码如下：
a)div-----------------------index.html
<!-- 老师端展示学生端私有白板-->
<div id="picWrapStuPriPic" class="picWrap">
<div class="picContentStuPri">
<spanclass="img_divStuPri" id="btn-getDataURL_StuPri">
<p><imgsrc="/static/img/icon1.png" /></p>
私有白板
</span>
<spanclass="img_divStuPri tea_base64_selectStuPri">
<!-- <img id= "arr_base64_imgStuPri0" name="thumbnailStuPri"class="tea_base64StuPri "/> -->
<!-- <spanclass="page_index_div">1</span> -->
</span>
</div>
</div>
b）控制函数
<!-- 此script用于对学生端私有白板图片怎么在老师端私有白板上进行显示进行控制-->
//判断变量是否为数组-----------------1
function isArray(o){
return Object.prototype.toString.call(o)=='[object Array]';
}
$('#btn-getDataURL_StuPri').click(function() {
for (var i = stuPriUrlIdArray.length - 1; i >= 0; i--) {
if(isArray(stuPriUrlIdArray[i]) && stuPriUrlIdArray[i][0] ==1001 ){
var dataURL_Pri=stuPriUrlIdArray[i][1];
console.log('dataURL_Pri',dataURL_Pri);
$("#arr_base64_imgStuPri" + i+1).attr("src",dataURL_Pri);
$("[name =thumbnailStuPri]").parent().removeClass("tea_base64_selectStuPri");
var pageIndexPri = i + 2;
var imgContentPri = ' <span class="img_divStuPritea_base64_selectStuPri"><img id= "arr_base64_imgStuPri' + i+1 + '"name="thumbnailStuPri" class="tea_base64StuPri"><span class="page_index_divStuPri">' + pageIndexPri +'</span> </span>';
$(imgContentPri).appendTo($("#picWrapStuPriPic .picContentStuPri"));
}
}
});
c)运行效果如下：
注：现在还有几个小bug：一是序号显示不对，二是单击先出现三个白页，三是可以多次单击。慢慢改。
2）清空
描述：学生端上传完私有白板图片后，私有白板页面清空。
实现了，具体代码如下：
a.) 修改一：-------------------------------------------------------------------------canvas-designer-widget.js
//做一个学生端私有白板undo-------start---复制1
designer.pointsLength = 0;
designer.undo = function(index) {
if (!designer.iframe) return;
designer.postMessage({
undo: true,
index: index || designer.pointsLength - 1 || -1
});
};
//清空学生端私有白板
designer.pointsLength= 0;
designer.undoPrivate = function(index) {
if (!designer.iframe_private) return;
designer.postMessagePrivate({
undoPrivate: true,
index: index || designer.pointsLength - 1 || -1
});
};
//做一个学生端私有白板undo-------end---复制1
注：designer.postMessage要改成designer.postMessagePrivate，因为designer.postMessage里面要用到iframe，必须改成designer.iframe_private。
b.) 修改二：-------------------------------------------------------------------------widget.private.min.js
else if(event.data.undoPrivate && points.length) {//清空学生端私有白板---------复制2
return points = [], drawHelper.redraw(), voidsyncPoints(!0);
}
c.) 函数调用如下：
designer.undoPrivate();
d.)运行效果如下：
清除前后对比如下：
1.3 点击出图片
描述：点击老师端私有白板列表中任一张图片，立马展示到老师端私有白板上。
1）往老师的私有白板上追加图片
需要重写一个函数，仿制addImgByUrl写出addImgByUrlPrivateTea，如下：
a.) 代码修改一：创建designer.addImgByUrl--------canvas-designer-widget.js中
//----------------------addImgByUrl--------start------------------------复制1
designer.addImgByUrl = function(url,restore){
if (!designer.iframe) return;
designer.postMessage({
addImgByUrl: true,
url: url,
restore: restore?restore:false
});
} //同步图片到老师的私有白板--修改4处
designer.addImgByUrlPrivateTea =function(url,restore){
if (!designer.iframe_private_tea) return;
designer.postMessagePrivateTea({
addImgByUrlPrivateTea: true,
url: url,
restore: restore?restore:false
});
}
//----------------------addImgByUrl--------end------------------------复制1
b.) 代码修改二： 数据引入--------widget.js中
//----------------------addImgByUrl--------start------------------------复制2
// 增加通过URL导入图片功能
if (event.data.addImgByUrl) {
var url = event.data.url;
var restore =event.data.restore;
addImgByUrl(url, restore);
}
// 增加通过URL导入图片功能--老师端把图片传入到老师的私有白板---修改2处
if (event.data.addImgByUrlPrivateTea) {
var url = event.data.url;
var restore =event.data.restore;
addImgByUrlPrivateTea(url,restore);
}
//----------------------addImgByUrl--------start------------------------复制2
c.) 代码修改三： 创建函数addImgByUrlPrivateTea()--------widget.js中
//----------------------addImgByUrl--------start------------------------复制3
function addImgByUrl(url, restore) {
var image = new Image();
image.onload = function() {
var index = imageHandler.images.length;
var x = restore ? 0 : 80;
var y = restore ? 0 : 20;
var imgW = restore ? image.width : 400;
var ingH = restore ? image.height : 400 * (image.height / image.width);
imageHandler.lastImageURL = image.src, imageHandler.lastImageIndex =index, imageHandler.images.push(image), drawHelper.image(tempContext,[imageHandler.lastImageURL, x, y, imgW, ingH, imageHandler.lastImageIndex]),
points[points.length] =["image", [restore ? imageHandler.lastImageURL : "", x, y,imgW, ingH, imageHandler.lastImageIndex], drawHelper.getOptions()], restore ?find("pencil-icon").click() : find("drag-last-path").click()
};
image.crossOrigin = 'anonymous';
image.src = url;
}
// 增加通过URL导入图片功能--老师端把图片传入到老师的私有白板---修改1处
function addImgByUrlPrivateTea(url,restore) {
var image = new Image();
image.onload = function() {
var index = imageHandler.images.length;
var x = restore ? 0 : 80;
var y = restore ? 0 : 20;
var imgW = restore ? image.width : 400;
var ingH = restore ? image.height : 400 * (image.height / image.width);
imageHandler.lastImageURL = image.src, imageHandler.lastImageIndex =index, imageHandler.images.push(image), drawHelper.image(tempContext,[imageHandler.lastImageURL, x, y, imgW, ingH, imageHandler.lastImageIndex]),
points[points.length] =["image", [restore ? imageHandler.lastImageURL : "", x, y,imgW, ingH, imageHandler.lastImageIndex], drawHelper.getOptions()], restore ?find("pencil-icon").click() : find("drag-last-path").click()
};
image.crossOrigin = 'anonymous';
image.src = url;
}
//----------------------addImgByUrl--------start------------------------复制3
d.e.) 代码修改四五： 数据导入及创建函数
addImgByUrlPrivateTea()--------widget.private.tea.min.js中
注：这个和widget.js中是一样的。
2）优化了点两次私有白板才出图片列表的情况及点击列表中的图片能加载到私有白板上去
a.)代码一：div及点击函数
<!-- 老师端展示学生端私有白板-->
<div id="picWrapStuPriPic" class="picWrap">
<div class="picContentStuPri">
<spanclass="img_divStuPri" id="btn-getDataURL_StuPri">
<p><imgsrc="/static/img/icon1.png" /></p>
私有白板
</span>
<spanclass="img_divStuPri tea_base64_selectStuPri">
</span>
</div>
</div>
$('#btn-getDataURL_StuPri').click(function(){
for (var i = 0; i < stuPriUrlIdArray.length; i++) {
if(isArray(stuPriUrlIdArray[i]) && stuPriUrlIdArray[i][0] ==1001 ){
dataURL_Pri =stuPriUrlIdArray[i][1];
varj = i+1;
varpageIndexPri = i + 1;
varimgContentPri = ' <span class="img_divStuPritea_base64_selectStuPri"><img id= "arr_base64_imgStuPri' + j + '"src = "'+dataURL_Pri+'" name="thumbnailStuPri"class="tea_base64StuPri "><spanclass="page_index_divStuPri">' + pageIndexPri + '</span></span>';
$(imgContentPri).appendTo($("#picWrapStuPriPic.picContentStuPri"));
$(".tea_base64StuPri").off("click");
$(".tea_base64StuPri").on("click",onImgClickPrivate);
}
}
});
注：这个更新了for循环，之前是从最大到最小，现在是从最小到最大，这样输出的图片列表是递增的。另外改变了图像url的加载方式，这样，一次就可以加载图片列表，不用点两次才出来。
2）点击列表图片函数onImgClickPrivate()
function onImgClickPrivate() {
designer.undoPrivateTea();
designer.addImgByUrlPrivateTea(this.src,true);
$("[name = thumbnailStuPri]").parent().removeClass("tea_base64_selectStuPri");
$(this).parent().addClass("tea_base64_selectStuPri");
}
注：这里面，我新仿制了两个函数，分别是designer.undoPrivateTea()和designer.addImgByUrlPrivateTea(this.src,true)，作用分别为：
designer.undoPrivateTea()用于清空老师的私有白板；
designer.addImgByUrlPrivateTea(this.src,true)：用于把私有白板列表中的图片加载到老师的私有白板上。
3）接下来要做的事
a. 老师端单击学生头像出来相应的作业图片列表
b. 学生端私有白板图片保存
c. 学生端同样的私有白板图片只上传一张到老师端私有白板
2017年2月28日星期二
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
