1 let maxLineWidth = this.renderStyle.lineWidth;
 2             let minLineWidth = this.renderStyle.lineWidth / 3;
 3             let pointCounter = 0;
 4             let points: Array<Point>;
 5             if (isUp||this.penType != 1)//不是需要绘制笔锋的线条类型 或者鼠标松开时
 6                 points = this.points;
 7             else
 8                 points = Util.clone(this.points);
 9             //当前绘制的线条最后笔锋处补点 贝塞尔方式增加点
10             if (this.penType == 1 && points.length >= 2) {
11                 let i = points.length - 1;
12                 let endPoint;
13                 let controlPoint;
14                 let startPoint = points[i];
15                 let allInsertPoints = new Array<Point>();
16                 while (i >= 0) {
17                     endPoint = startPoint;
18                     controlPoint = points[i];
19                     if (i == 0)
20                         startPoint = points[i];
21                     else
22                         startPoint = new Point((points[i].x + points[i - 1].x) / 2, (points[i].y + points[i - 1].y) / 2);
23                     if (startPoint && controlPoint && endPoint) {//使用贝塞尔计算补点
24                         let dis = (XlMath.distance(startPoint, controlPoint) + XlMath.distance(controlPoint, endPoint)) * ctx.scaleVal;
25                         let insertPoints = XlMath.bezierCalculate([startPoint, controlPoint, endPoint], Math.floor(dis / 6) + 1);
26                         // 把insertPoints 变成一个适合splice的数组（包含splice前2个参数的数组，第一个参数要插入的位置，第二个参数要删除的原数组个数）
27                         insertPoints.unshift(0, 0);
28                         Array.prototype.splice.apply(allInsertPoints, insertPoints);
29                         points.pop();
30                     }
31                     pointCounter++;
32                     if (pointCounter >= 6)
33                         break;
34                     i--;
35                 }
36                 //赋值最后几个点的线宽
37                 let insertCount = allInsertPoints.length;
38                 for (let i = 0; i < insertCount; i++) {
39                     let w = (maxLineWidth - minLineWidth) / insertCount * (insertCount - i) + minLineWidth;
40                     allInsertPoints[i].setLineWidth(XlMath.toDecimal(w));
41                     points.push(allInsertPoints[i]);
42                 }
43             }

View Code

有了这个效果，代价就是性能了。

几个耗费性能的点：

1）因为一条线段的结尾处在不断变化设置lineWidth；同时也需要多次调用stroke接口

2）使用椭圆api

3）中间计算线宽以及用贝塞尔补点的过程

第五版去笔锋优化画笔流畅度

后来证明对于学校老旧电脑来说，用户流畅度的需求大过于线条的美观度。所以我们又恢复了原来的绘制方式，去掉了笔锋效果。同时从事件响应，收集鼠标坐标点上也做了优化。

对于第二版的优化去掉折线感后带来的鼠标移动笔迹跟不上的问题，我的解决方案每次绘制整条线是有一定的性能影响的，我也曾建议在绘制过程中在drawingCanvas上面绘制的线条容许有折线，鼠标释放笔迹成型后优化掉折线绘制到mainCanvas上，但产品不太接收。后来妥协的接受方式是绘制中笔迹并不能紧跟鼠标的效果。

所以来来回回最后取消了第二次和第四次的改版实现，这个过程也是在平衡笔迹外观和性能的过程，哪个对用户更重要，就往哪个方向改进。

擦除流畅性的限制

前几久产品又提出我们擦除上面的不流畅，不如其他软件的真实流畅，据此我也调研了几种方案：

1. 可以将整个canvas画布转化成base64编码的image(调用api方法toDataURL)，后面再次绘制的时候把这个image数据再绘制到canvas上，可以继续在这个canvas上进行绘制和擦除内容。但我们黑板的画布是可移动的，所以这个方法会丢掉屏幕之外的线条笔迹，另外线擦除无法使用
2. 将画布每个像素点rgb保存到课件（使用api方法getImageData）,但存储范围也仅限可视区域，我们黑板的画布是可移动的，所以这个方法会丢掉屏幕之外的线条笔迹，另外线擦除无法使用
3. 为解决上面两种方法造成屏幕置为笔迹丢失问题，我们使用globalCompositeOperation设置成destination-out的擦除方法（可以理解成覆盖书写），同时保存拖拽擦除时鼠标经过的点，也就是按照画笔线条的方式 另外保存一份擦除线条的点集合，这个方法会造成课件体积变大，需要数据库支撑，另外也不能实现线擦除，一条线被从中间擦除仍然还是一条线（需要的效果是两条单独的线了），所以会出现擦除混乱的情况。
   总结，基于我们业务的复杂性，画布实际上很大可平移，有点擦除和线擦除，只能采用目前的实现方式。