java 轨迹平滑算法_[源码阅读]基于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;

// 笔颜色