第54篇撤销后笔迹的同步解决方案总结（三）

来源：互联网发布：linux 新建用户组编辑：程序博客网时间：2024/05/18 01:55

关键词：撤销后笔迹同步方案总结

一、撤销后笔迹的同步

1.今天的思路

再瘦身一下原版，之后，对分离版瘦身，争取今天解决！

2. 感觉还是连接问题

把原版上的用打开房间按钮换成在url中输入roomid试试。

找到原因了：

在原版上，当写的时候，经过canvas-designer-widget.js中的函数syncData(data)进行数据同步，这一点分离版也做到了。但撤消的时候，原版仍然调用syncData(data)函数进行同步，而分离版没有调用syncData(data)函数，所以导致没有同步过去。syncData(data)函数如下：

function syncData(data) {

console.log('11111111111111');

if (!designer.iframe) return;

designer.postMessage({

canvasDesignerSyncData: data

});

}

3. 解决方案

经过分析，最终原因在于同步点数据时，出错了，在widget.min.js中，未改前代码如下：

functionsyncPoints(isSyncAll) {

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

var dataURL =context.canvas.toDataURL('image/png');

varimage = new Image();

image.src = dataURL;

imageHandler.lastImageURL= dataURL, imageHandler.lastImageIndex = imageHandler.images.length,imageHandler.images.push(image);

points[points.length] =["image", [imageHandler.lastImageURL, 0, 0, canvas_width,innerHeight, imageHandler.lastImageIndex], drawHelper.getOptions()];

}

if(lastPointIndex!= points.length){

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

pointsToShare.length &&sliptSync(pointsToShare,300),!pointsToShare.length && points.length ||(lastPointIndex = points.length)

}

上述红字部分代码的缺点是没把点同步过去，只是把点做了分隔，每300个点传输一次，如果撤销的话，它就无能为力了，修改后代码如下：

functionsyncPoints(isSyncAll) {

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

var dataURL =context.canvas.toDataURL('image/png');

varimage = new Image();

image.src = dataURL;

imageHandler.lastImageURL= dataURL, imageHandler.lastImageIndex = imageHandler.images.length,imageHandler.images.push(image);

points[points.length]= ["image", [imageHandler.lastImageURL, 0, 0, canvas_width,innerHeight, imageHandler.lastImageIndex], drawHelper.getOptions()];

}

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

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

pointsToShare.length&& syncData({

points:pointsToShare || [],

startIndex:lastPointIndex

}),

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

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

}

注：上述蓝色代码，就是加入了数据点同步的内容。Perfect!!!

今天和同事沟通，发现撤销之所以不同步，是因为他之前，做了一个图片传输，因为写的太多的话，传输会报错，他解决的办法把所有的传输笔迹生成一张图片，传过去，这样就避免了写的过多的情况，但产生的一个问题是：当成一张图片，那撤消笔迹就撤消不掉了，所以撤销同步的另外一种解决方式是：把他那个所有笔迹生成图片的代码注释掉就可以，上述函数syncPoints(isSyncAll)可以变成这样：

function syncPoints(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)

}

2017年1月6日星期五

1 0