一种基于H5Canvas实现还原手写笔迹的涂鸦方法与流程

技术特征：
1.一种基于h5 canvas实现还原手写笔迹的涂鸦方法，其特征在于包括如下步骤：步骤1、使用两层canvas画布，一层用来绘画，一层用来显示涂鸦；同时监听绘画层画布的pointerdown事件、pointermove事件和pointerup事件；步骤2、当画笔按下时，触发pointerdown事件，然后初始化canvas画笔的基本属性，包括线宽、颜色和样式等信息；步骤3、根据触发pointerdown事件返回的参数event，判断是否为手写笔设备，并计算当前点a1的半径r1；然后将当前点a1的半径信息保存在涂鸦笔迹数组中；步骤4、当画笔移动时触发pointermove事件，根据pointermove事件触发时获取到点的位置信息和压感系数p，然后获取到移动后当前第一个点b1与步骤3记录下的点a1进行比较，计算出两点之间的距离位置坐标的差值(dx，dy)；其中dx是两个点之间横坐标的差值，dy是两个点之间纵坐标的差值；再根据当前差值(dx，dy)的平方根curdis乘以滑动固定系数0.02得到当前curvel：curvel＝math.hypot(dx,dy)*0.02；然后计算当前点a2的半径r2，并记录当前a2的信息；步骤5、然后根据pointermove事件获取得到一连串点，取第二个点a3与步骤4记录的点a2进行比较，根据步骤4获取的点a2半径r2的方法，获取当前点a3的半径r3；然后记录当前点a3并且添加到贝塞尔曲线的函数类中；用相同的方法计算出剩余一连串点中所有点的半径，并且添加到贝塞尔曲线函数类中，且把每个点的信息保存在涂鸦笔迹数组中；步骤6、根据涂鸦笔迹数组中相邻两点之间的距离dis1，从贝塞尔曲线函数类中取出满足贝塞尔曲线函数的点的数组gradualpoints；步骤7、对当前gradualpoints数组，取任意相邻两点之间的距离dis2，计算当前涂鸦填点的最小半径minradius，并计算需要填点的个数steps；然后根据当前steps计算点a1到点a2的x轴、y轴和半径分别需要变化的值deltax、deltay和deltaw，最后每循环一遍都调用cavas api进行涂鸦绘图，直至循环steps遍；步骤8、画笔抬起的时候处理画笔末尾的涂鸦，当前画笔抬起时触发pointerup事件获取当前点的位置信息(x,y)和压感系数p，把当前点和上一步的最后一个点进行对比,然后根据步骤4的计算方法得到当前点的位置信息(x,y)和半径r，然后结束当前贝塞尔曲线的填点过程；根据步骤6获取满足贝塞尔曲线的集合，得到一个新的数组arr1，根据步骤7对数组arr1中的点进行绘制涂鸦；把数组arr1和步骤6得到的数组gradualpoints进行合并得到新的数组savearr；步骤9、基于得到的数组savearr,根据步骤7方法生成符合相应的svg路径集合，并且使用fabric.js的path方法在渲染层画布上绘制出相应涂鸦，并且清空绘画层画布的涂鸦。2.根据权利要求1所述的一种基于h5 canvas实现还原手写笔迹的涂鸦方法，其特征在于步骤3的半径求解如下：如果是手写笔设备则记录当前压感系数p，然后根据压感系数p的平方和canvas画笔线宽相乘得到当前点a1的半径r1，即r1＝math.pow(p,2)*linewidth，其中math.pow()表示平方函数，linewidth表示canvas画笔线宽；如果不是手写笔设备，则初始化压感系数为0，然后取当前canvas画笔线宽的一半得到此时的半径，即r1＝linewidth*0.5。3.根据权利要求1或2所述的一种基于h5 canvas实现还原手写笔迹的涂鸦方法，其特征在于步骤4获取的curvel用来判断当前此处的笔锋是细还是加粗，当curvel大于设定阈
值时，当前此处的笔锋为加粗，否则当前此处的笔锋为细。4.根据权利要求1或2所述的一种基于h5 canvas实现还原手写笔迹的涂鸦方法，其特征在于根据差值(dx，dy)判断是否符合贝塞尔曲线最小移动的距离；然后再根据两点之间差值(dx，dy)的平方根curdis、点a1的半径r1、curvel和点a2的压感系数p来计算当前点a2的半径r2，记录当前a2的信息，将当前点a2的信息保存在涂鸦笔迹数组中，然后初始化贝塞尔曲线函数类；r2＝linewidth*math.exp(math.log(1.5*2)*(
‑
curvel*0.6 p*(1
‑
0.6))))。5.根据权利要求4所述的一种基于h5 canvas实现还原手写笔迹的涂鸦方法，其特征在于最小半径minradius的求解如下：根据点a1的半径r1、点a2的半径r2和当前的涂鸦线宽的一半，取3个变量中的最小值作为当前涂鸦填点的最小半径minradius。6.根据权利要求4或5所述的一种基于h5 canvas实现还原手写笔迹的涂鸦方法，其特征在于steps的求解如下：若当前的涂鸦线宽linewidth小于6像素，则通过1加上当前相邻点之间的距离dis2除以minradius的商计算出需要填点的个数steps：即steps＝1 dis2/minradius；若当前线宽linewidth大于6像素，则根据当前相邻点之间的距离dis2除以minradius的商再乘以2计算出需要填点的个数steps：即steps＝(dis2/minradius)*2。7.根据权利要求6所述的一种基于h5 canvas实现还原手写笔迹的涂鸦方法，其特征在于deltax、deltay和deltaw的求解如下：deltax＝(a1.x
‑
a2.x)/steps；deltay＝a1.y
‑
a2.y)/steps；deltaw＝(a1.r
‑
a2.r)/steps。8.根据权利要求1或7所述的一种基于h5 canvas实现还原手写笔迹的涂鸦方法，其特征在于所述的数组arr1具体根据当前点的位置信息和上一个从涂鸦笔迹数组中取到的点位置信息计算出dis3，然后再从贝塞尔曲线函数类中,获取符合贝塞尔曲线的点的数组即为arr1。

技术总结
本发明公开了一种基于H5Canvas实现还原手写笔迹的涂鸦方法。本发明使用h5中的canvas标签自带的API实现涂鸦效果，贝塞尔曲线的使用让涂鸦的线段变的更加平滑。使用h5的pointer


技术研发人员：李寒超 廖美雯 宁利
受保护的技术使用者：浙江万朋教育科技股份有限公司
技术研发日：2021.08.30
技术公布日：2021/12/6