第84篇 webrtc一对一研究（十二）

关键词：追寻铅笔轨迹,笔迹同步,铅笔图标显示

一、webrtc

1.1学生端图片展示，把老师端的url传过去，学生能接收到。

  1)追踪铅笔画线，看它是怎么传到学生端的。看如下的原版：

共找到101项pencil，如下：

2）第一匹配项，是铅笔：

3）widget.html中

<canvasid="pencil-icon" width="40" height="40"title="Panchil"></canvas>

上式中，title用于显示悬浮的标题（当鼠标放在那个按钮上时），如下：

下面追踪谁使用了这个id=pencil-icon，一共13项（包括它自身），如下：

挑几项看看：

3a）首选项时，用到了，如下：---widget.js

        if (!firstMatch) {

            window.selectedIcon = 'Pencil';

            firstMatch =document.getElementById('pencil-icon');

        }

3b)绑定事件时用到，如下：---widget.js

   if (this.id === 'pencil-icon' || this.id ==='eraser-icon' || this.id === 'marker-icon') {

                    cache.lineCap = lineCap;

                    cache.lineJoin = lineJoin;

 

                    lineCap = lineJoin ='round';

                }

3b)生成铅笔图标用到了，如下：---widget.js

       function decoratePencil() {

           var context = getContext('pencil-icon');

 

           context.lineWidth = 5;

            context.lineCap = 'round';

           context.moveTo(35, 20);

           context.lineTo(5, 35);

           context.stroke();

 

           context.fillStyle = 'Red';

           context.font = '90px Verdana';

           context.fillText('Pencil', 6, 12);

 

           bindEvent(context, 'Pencil');

       }

不过，以上的属性值，改了也没用，需要修改widget.min.js中的才有效。

3c)如果pencil被选中了，则执行decoratePencil，否则，这个按钮不可见。----widget.js

     if (tools.pencil === true) {

           decoratePencil();

       } else document.getElementById('pencil-icon').style.display = 'none';

相应截图：

3d)控制首选项----widget.min.js

firstMatch || (window.selectedIcon ="Pencil", firstMatch =document.getElementById("pencil-icon")), setSelection(firstMatch, window.selectedIcon)

         },!1)

3e)控制缓存及显示----widget.min.js

                                     "pencil-icon"=== this.id || "eraser-icon" === this.id || "marker-icon"=== this.id ? (cache.lineCap = lineCap, cache.lineJoin = lineJoin, lineCap =lineJoin = "round") : cache.lineCap && cache.lineJoin&& (lineCap = cache.lineCap, lineJoin = cache.lineJoin),"eraser-icon" === this.id ? (cache.strokeStyle = strokeStyle,cache.fillStyle = fillStyle, cache.lineWidth = lineWidth, strokeStyle ="White", fillStyle = "White", lineWidth = 10) : cache.strokeStyle&& cache.fillStyle && "undefined" != typeofcache.lineWidth && (strokeStyle = cache.strokeStyle, fillStyle =cache.fillStyle, lineWidth = cache.lineWidth)

 

3f)控制笔的图标的线宽、线顶端的形状等----widget.min.js

                   functiondecoratePencil() {

                            varcontext = getContext("pencil-icon");

                            context.lineWidth= 50, context.lineCap = "round", context.moveTo(35, 20),context.lineTo(5, 35), context.stroke(), context.fillStyle = "Red",context.font = "9px Verdana", context.fillText("Pencil", 6,12), bindEvent(context, "Pencil")

                   }

3g) 控制铅笔图标显示不显示----widget.min.js

3h) 控制首先项（不起作用）----decorator.js

   if (!firstMatch) {

       window.selectedIcon = 'Pencil';

       firstMatch = document.getElementById('pencil-icon');

}

3i) 控制铅笔所选属性的缓存（不起作用）----decorator.js

           if (this.id === 'pencil-icon' || this.id === 'eraser-icon' || this.id=== 'marker-icon') {

                cache.lineCap = lineCap;

                cache.lineJoin = lineJoin;

 

                lineCap = lineJoin = 'round';

           }

3j) 控制铅笔图标展示（不起作用）----decorator.js

 function decoratePencil() {

       var context = getContext('pencil-icon');

 

       context.lineWidth = 5;

       context.lineCap = 'round';

       context.moveTo(35, 20);

       context.lineTo(5, 35);

       context.stroke();

 

       context.fillStyle = 'Gray';

       context.font = '9px Verdana';

       context.fillText('Pencil', 6, 12);

 

       bindEvent(context, 'Pencil');

    }

3k) 控制铅笔是否显示（不起作用）----decorator.js

   if (tools.pencil === true) {

       decoratePencil();

} elsedocument.getElementById('pencil-icon').style.display = 'none';

2016年10月30日星期日