第3篇白板之windows装nodejs及移动图片及画笔迹同步

关键词：windows装nodejs,移动图片,画笔迹同步

一、测试一对一（四）

1.1 装nodejs

   安装时选个目录，安装成功之后，直接去那个目录找。如下：

注：可以直接打开黑窗口（windows+R）,cmd进入之后，选中要运行的文件夹，运行即可。

1.2 移动图片时，有时报错，有时不报

   可能是网络问题。

1.3 传画笔轨迹时，一次传300个单位，不是传到最后一笔（lastPointIndex）

代码如下：

         functionsyncPoints(isSyncAll) {

                  if(isSyncAll && (lastPointIndex = 0), lastPointIndex != points.length) {

                          for(var pointsToShare = [], i = lastPointIndex; i < points.length; i++)

pointsToShare[i - lastPointIndex] = points[i];

                          pointsToShare.length&& sliptSync(pointsToShare,300),

                          !pointsToShare.length&& points.length ||(lastPointIndex = points.length)

                           

                  }

         }

1.4 分析下函数addImgByUrl

   function addImgByUrl(url,restore){

       var image = new Image();

       image.onload = function() {

           var index = imageHandler.images.length;

                          varx = restore?0:80;

                          vary = restore?0:20;

                          varimgW = restore?image.width:400;

                          varingH = 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", [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，把图片插入到canvas中，上面红字程序是用于图片大小的。

上述函数的使用例子如下：

                  //导入图片

                  functionimportImg(){

                      var url =$("#qustionImg").attr("src");

                      if( url == ""){

                           MyAlert("问题图片不存在","false","","","300","200");

                           return;

                      }

           designer.addImgByUrl(url);

                  }

2016年11月16日星期三