永中dcs实现浏览器上面的手绘效果

Posted 2021-12-02 华东彭于晏

永中dcs是一款在线预览各种办公文件的网络产品，我们可以只用一个浏览器就可以实现对word，ppt和excel等文件的在线浏览，在其中有一个在线手绘功能很有特色，让我们来探一探它的实现原理吧。

第一，简单的光标滑动中究竟发生了什么

当你啪的一声在屏幕上按下鼠标光标或者更直接的用手指头按住触摸屏，浏览器就会产生对应的触摸事件，输出类似于下面所示的信息

event = {

clientX:xxx,

clientY:yyy,

timeStamp:tttt,

...

}

每划过一段距离和一段时间，浏览器就会产生一个触碰或者光标事件，事件里面记录了点位的位置坐标，产生时间，相对位置，甚至通过一些手段，你可以从事件的深层信息里找到触碰的压力信息。

有了这些点了，我们想到把他们连起来，不就是现成的笔画了吗，但是在虚空中一划可是不会产生任何线条的，你需要一个载体把你的笔画记录下来，我们这边就使用canvas画布用来当我们的背景板。好，开始绘制，

ctx.beginPath();

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.stroke();

从记录下的第一个点开始，移动到下一个点，然后连线，一道笔迹就这样完成了。

 

二、从初步实现到看起来像

但是说实在，这样子画出来的东西真的有人会觉得是可以拿来代替手写的签名笔迹嘛，我的笔锋呢，我的粗细变化呢，我的笔划转折曲线呢，有人可能会把字写成粗细从头到尾全一样，没有曲线只有各种突变的直线首尾相连的样式吗？ 用电脑绘制来模拟笔迹最大的问题，线条缺乏转折过度和粗细变化，尖锐的折角和完全一样粗细的线条肯定不是我们最终追求的。

 

 

 

在纸上，我们控制线条的粗细无非就是减轻我们下笔的力道和提高运笔的速度，那么在浏览器屏幕上我们也是同样的操作。每个点位都记录下了轨迹的产生时间，两个点之间的时间差和距离差拿到手，我们就知道这一道笔划究竟是重运笔还是轻轻划过。具体的笔划粗细可以由自己的需求出发设定，总得原则就是快的细，慢的粗，当然，如果再讲究一点，每段线条之间的粗细还存在过渡效果，你可以保存一下上一段线条的粗细，然后按照比例添加到下一段线条的线宽中。

var distance = Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1))

var time = timeStamp2 - timeStamp1

var width = lastWidth*1/3 + maxWidth*distance/time*2/3

线条的转折变化就不是前后两点能搞定的了，得引入再前面一个点，三个点的位置变化计算出笔迹的转折曲度，这里我们使用二阶贝塞尔曲线进行轨迹拟合，你要再愿意，再引入一个记录点用三阶贝塞尔曲线拟合也可以，但是大部分人在浏览器屏幕上的书写没有精细到这种程度，不需要做这么复杂的操作。

这里我分享一下我个人操作的一个小技巧，在笔迹的初始点和第二点绘制的时候，由于没有前一个点做曲线拟合，这一段可以用粗细不变的练线代替，可以歪打正着的产生一种书写顿笔的效果。

三、使用场景结合

在永中dcs这个产品中，我们可以直接在线预览各种word、ppt之类的办公文件，省去了我们还要特意安装各种办公软件的困扰，一个浏览器，就能比较完美的在线预览我们的办公文件，这个时候，如果还能写写画画，给我们的文档在线添加一些手绘笔记就太好了。

不需要安装其他复杂的程序插件，直接在我们的转换预览页面里添加一个透明的书写板，然后就可以写出效果很好的手写笔记了，真是简单又方便，写完的笔迹可以当一张很简单的图片插入到在线预览的原文档里，又省去了用户安装专业办公软件的麻烦。