第87篇 webrtc一对一学生端研究（二）

关键词：老师端学生端图片同步,隐藏与显示按钮,隐藏与显示div

一、webrtc学生端

1.1学生端图片同步-----老师切换白板时

a) 发消息，模拟新建白板

          //老师端新建白板时,向学生端发个消息

             $("#btn-getDataURL1").click(function(){

                connection.send('gdata');

              

           })

b)学生端收到消息，单击学生的新建白板按钮

else if(event.data=='gdata'){//老师端新建白板时

                     $("#btn-getDataURL-student").click();

                 return;

           }

c)成功截图如下：

d)当老师端点击下面的任意一张（比方说第二张），学生端也要同时点击，模拟如下：

  之前，老是提示even.data.substr()不是一个函数，原因是它获取的值为空；

       今天提示不能读取even.data的长度。

  解决方法如下：

                 if(event.data.length){

                        switchimgStudent = event.data.substr(0,9);

                 }else{

                        switchimgStudent = null;

                 }

注：event.data.length解决了不能读取event.data长度的问题；当event.data.length为真时，再执行switchimgStudent = event.data.substr(0,9)，解决了substr函数取值为空的问题。

1.2 切换图片问题解决了，代码如下：

  1）老师端切换图片时，向学生端发个消息

          connection.send('switchimg'+ globelId);

注：为了让学生端知道单击哪张图片，图把老师端单击的那张图片id传过去(globelId).

2)学生端接到消息后执行单击函数，如下：

           //切换图片时，对老师端传过来的消息及图片id进行处理

                 if(event.data.length){

                        switchimgStudent = event.data.substr(0,9);                  

                 }else{

                        switchimgStudent = null;

                 }

   //学生端收到消息，要模拟单击函数onImgClickStudent()

   elseif(switchimgStudent =='switchimg'){

                              globelIdTeacher= event.data.substr(9);

                              onImgClickStudent(globelIdTeacher);

                          return;

                     }

注：这个函数onImgClickStudent与老师端的不同之处在于，要向里面传入一个参数globelIdTeacher，让学生端知道应该点击哪张图片，并做更新。onImgClickStudent函数里面也要做好接收参数的工作，代码如下：

   //学生函数s4--------------------------------------------------------student

     function onImgClickStudent(){

       

          saveCanvasStudent(globelIdStudent);

          designer.undo('all');

           globelIdStudent = globelIdTeacher;

          designer.addImgByUrl(this.src,true);

     

          $("[name =thumbnail_student]").removeClass("tea_base64_select_student");

          $(this).addClass("tea_base64_select_student");

     }

1.3 老师端仅显示老师端图片；学生端仅显示学生端图片

   现在老师端、学生端都显示两套图片，如下图所示：

 补充知识：标签的三种隐藏方式（css中）

在制作网页时，隐藏内容也是一种比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏弹出层、隐藏滚动条、清除错位和浮动等等。使用CSS即可使以上提到的内容隐藏起来，常用的三种隐藏内容的方法如下： 

a）使用display:none来隐藏所有内容

display:none可以让网页中所有内容不显示，如代码、文字、链接、图片、div层，是推荐的内容隐藏方式。

<div style="display:none;">我不占地儿，你看不见我；</div>

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
inherit	规定应该从父元素继承 display 属性的值。

 

b）使用visibility:hidden来隐藏内容

visibility:hidden和display:none可以隐藏的内容几乎一样，但唯一区别是它虽然隐藏了内容，但被隐藏掉的内容仍旧占据空间，这段隐藏了内容却保留空间的位置会在网页中显示为空白。

<divstyle="visibility:hidden;">我占了地儿，你也看不见我；</div>

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

 

c）使用overflow:hidden隐藏溢出内容

overflow:hidden这种方式可以隐藏掉固定区域外的内容，它可以有效控制显示区域。但应注意，使用它时需要给它定义宽度和高度，否则会无效。

<div style="width:120px;height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</div>

overflow用法中存在一个分支，overflow-x:hidden和overflow-y:hidden，x是横向范围，y是纵向范围，这两个属性经常用在需要隐藏滚动条时。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

d) 针对本项目，解决步骤如下：

  d1）针对老师的初始白板，默认是显示的，只需在学生端隐藏，代码如下：

   <!--老师端-->

      <divid="picWrap">

       <div class="img_div">

         <img  id="arr_base64_img0" name="thumbnail" class="tea_base64tea_base64_select"/>

         <div class="page_index_div">1</div>

       </div>

     </div>

 

    //3.1.1 老师新建的初始白板在学生端隐藏

                       $("#picWrap").hide();

d2) 针对学生端的初始白板，把默认改成隐藏，建立连接后，在学生端设置成显示，代码如下：

         <!--学生端-->

      <div id="picWrap_student"style="display: none;">

       <div class="img_div_student">

         <img  id="student_arr_base64_img0" name="thumbnail_student"class="tea_base64_student tea_base64_select_student"/>

         <div class="page_index_div_student">1</div>

       </div>

     </div>

 

//3.1.2 学生端新建的初始白板开始时设置的隐藏的，在学生端要显示

                 $("#picWrap_student").show();

d3)修改代码后，老师与学生未建立连接时，效果图如下：

注：未建立连接时，老师端，学生端均显示老师的初始白板，因为此时学生端的初始白板被隐藏了。

d4)当老师与学生建立连接后，效果图如下：

当两端建立连接后，老师端的初始白板在学生端隐藏；而学生端的初始白板通过调程序，显示了，达到了老师端显示老师端初始白板，学生端显示学生端初始白板的目的。

d5)老师端新建白板，更换白板时，学生端会同步，效果如下：

注：老师新建白板和替换时，都可以同步过去。

e) 隐藏按钮----这个做起来比较简单

  隐藏按钮具体来说，就是老师新建按钮，在老师端显示，在学生端不显示；

                        学生新建按钮，在老师端不显示，在学生端不显示；

 e1)学生新建按钮因为两端都不显示，只需把它的display属性设置为none即可。代码如下：

<buttonid="btn-getDataURL-student" style="width:220px;font-size:36px;display:none;">学生新建</button></span>

e2)对于“老师新建”，开始时应设置为显示，连接后老师端显示，学生端不显示；所以，默认显示属性不用改，只需在连接时，把学生端“老师新建”隐藏即可。代码如下：

<buttonid="btn-getDataURL1" style="width:220px;font-size:36px;">老师新建</button></span>

//3.2老师新建白板按钮在学生端隐藏

                     var newCreateWhiteBoardBtn =document.getElementById("btn-getDataURL1");

                    newCreateWhiteBoardBtn.style.display = "none";

修改程序后，两端建立连接前，效果图如下：

两端建立连接后，效果图如下：

 2016年11月2日星期三