[源码阅读]基于Canvas+贝塞尔曲线算法的平滑手写板

signature_pad一个基于Canvas的平滑手写画板工具

---

介绍

实现手写有多种方式。

一种比较容易作出的是对鼠标移动轨迹画点，再将两点之间以直线相连，最后再进行平滑处理，这种方案不须要什么算法支持，但一样，它面对一个性能和美观的抉择，打的点多，密集，性能相对较低，但更加美观，视觉上更平滑；

此处用的另外一种方案，画贝塞尔曲线。

因为canvas没有默认的画出贝塞尔曲线方法（感谢@madRain评论中更正）因为canvas并无提供根据初始和结束点计算出贝塞尔曲线控制点的API，所以这里使用了贝塞尔曲线的一系列算法，包括求控制点，求长度，计算当前点的大小，最后用canvas画出每个肯定位置的点。

补充：我的认为，之因此不使用 canvas提供的贝塞尔曲线API，是由于能够实时控制线条粗细(点的大小)，在斜街的时候达到平滑的效果。

参数及配置介绍

提供的可配置参数以下

export interface IOptions {
  // 点的大小(不是线条)
  dotSize?: number | (() => number);
  // 最粗的线条宽度
  minWidth?: number;
  // 最细的线条宽度
  maxWidth?: number;
  // 最小间隔距离(这个距离用贝塞尔曲线填充)
  minDistance?: number;
  // 背景色
  backgroundColor?: string;
  // 笔颜色
  penColor?: string;
  // 节流的间隔
  throttle?: number;
  // 当前画笔速度的计算率，默认0.7，意思就是 当前速度=当前实际速度*0.7+上一次速度*0.3
  velocityFilterWeight?: number;
  // 初始回调
  onBegin?: (event: MouseEvent | Touch) => void;
  // 结束回调
  onEnd?: (event: MouseEvent | Touch) => void;
}

这里要注意的是并无线条粗细这个选项，由于这里面的粗细不等线条都是经过一个个大小不一样的点构造而成；

throttle这个配置能够参考loadsh或者underscore的_.throttle，功能一致，就是为了提升性能。

注册事件

在constructor内部，除了配置传入的参数外，就是注册事件。

这里优先使用了PointerEvent触点事件，PointerEvent能够说是触摸以及点击事件的统一，若是设备支持，不须要再分别为mouse和touch写两套事件了。

状态数据储存

状态开关：

• this._mouseButtonDown

  当执行move事件时，会检查此状态，只有在true的状况下才会执行。

数据储存分为2种格式：

1. pointGroup

   这是当前笔画的点的一个集合，内部储存了当前笔画的颜色color和全部的点points<Array>。

2. this._data

   这是一个储存全部笔画的栈，格式为[pointGroup, pointGroup, ..., pointGroup]，当须要执行undo的时候，只须要删除this._data中的最后一条数据。

事件流程及方法

mouseDown事件

当鼠标(触点)按下时，改变状态this._mouseButtonDown = true，调用onBegin回调，建立当前笔画的一个新的集合，而后对当前点执行更新。

mouseMove事件

首先检查this._mouseButtonDown状态，对当前点执行更新。

mouseUp事件

改变状态this._mouseButtonDown = false;，调用onEnd回调，对当前点执行更新。

能够看到，上面的每个事件内部都调用对当前点执行更新的方法。

_strokeUpdate——点的更新方法

private _strokeUpdate(event: MouseEvent | Touch): void {
    // 获取当前触点的位置
    const x = event.clientX;
    const y = event.clientY;

    // 建立点
    const point = this._createPoint(x, y);
    // 调出最后一个点集
    const lastPointGroup = this._data[this._data.length - 1];
    // 获取最后一个点集的点的数组
    const lastPoints = lastPointGroup.points;
    // 若是存在上一个点，获取上一个点
    const lastPoint =
      lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
    // 判断上一个点到当前点是否太近(也就是小于配置的最小间隔距离)
    const isLastPointTooClose = lastPoint
      ? point.distanceTo(lastPoint) <= this.minDistance
      : false;
    // 调出点集的颜色
    const color = lastPointGroup.color;

    // Skip this point if it's too close to the previous one
    // 存在上一个点可是太近，跳过，其他的执行
    if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
      // 向上一次的点数组中添加当前点，而且生成一个新的贝塞尔曲线实例
      // 包括4个点 （初始点，2个控制点，结束点）
      // 初始宽度，最终宽度
      const curve = this._addPoint(point);

      // 若是不存在lastPoint，即当前点是第一个点
      if (!lastPoint) {
        // 画一个点
        this._drawDot({ color, point });
      // 若是存在lastPoint 而且能造成一个贝塞尔曲线实例(3个点以上)
      } else if (curve) {
        // 画出参数中curve实例中两点之间的曲线
        this._drawCurve({ color, curve });
      }
      // 添加到当前笔画的点数组
      lastPoints.push({
        time: point.time,
        x: point.x,
        y: point.y,
      });
    }
  }

这个方法前面就是一系列判断

• 判断是不是第一个点
• 判断是否能加入点的集合(知足点的最小间隔)
• 判断是否能画出贝塞尔曲线(知足至少3个点)

  对于能画出贝塞尔曲线的点，执行算法，求出Besier实例，包括4个点初始点，结束点，控制点1，控制点2以及当前曲线中线条的的初始宽度和结束宽度。

  具体如何算的，请参考源码src/bezier.ts和这篇文章。

对于能画出贝塞尔曲线的，对已经求出的Bezier实例，执行this._drawCurve，不然执行this._drawDot

this._drawDot——画点的方法

获取配置中的dotSize，执行canvas画点。

this.__drawCurve——画线的方法

1. 求出当前Bezier实例初始点和结束点之间的距离，这个距离不是直线距离，而是贝塞尔曲线距离。
2. 对这个距离进行扩展，例如，计算获得距离为50，那就扩展为100个点，即我须要在50这个距离内画出100个点；

   这么作能够保证在正常或者稍微快速的书写中，不出现断层。

3. 接着又是算法，目的是求出这个距离内的每个点的大小，这是一个变化值，是的粗细变化更加平滑。
4. 最后一样是canvas画点。

以上就是整个基本流程。

总结

阅读一遍后，这个库说白就是基础的事件操做+贝塞尔曲线算法，可是，它内部的代码格式很是清晰，细粒度+代码复用使得维护起来很是方便。

同时能够对贝塞尔曲线有一个更深层的了解(算法仍是无法手撕囧)，但起码有一个比较完整的思路；

一些能够借鉴的东西：

• PointerEvent的优点
• canvas+贝塞尔曲线
• 节流throttle的写法(参考源码src/throttle.ts)
• 数据结构及实现undo的方案

导图

贝塞尔曲线算法资料：

• https://medium.com/square-cor...
• https://www.lemoda.net/maths/...

---

源码阅读专栏对一些中小型热门项目进行源码阅读和分析，对其总体作出导图，以便快速了解内部关系及执行顺序。
当前源码(带注释)，以及更多源码阅读内容： https://github.com/stonehank/sourcecode-analysis，欢迎 fork，求