关于javascript:反向求二次贝塞尔曲线的控制点用贝塞尔曲线编写签名板实现平滑的笔条无菱角

当初很多产品需要都须要用到电子签名

首先想到的解决方案是canvas画板，通过点击，挪动事件，来获取滑动的坐标，再用canvas描线，就能达到画板写字的成果。

1、最简略的实现办法就是用以下的接口

this.ctx.moveTo();this.ctx.lineTo()

来看看成果
PC端：线条看起来有点不平滑...电脑上看还是不太显著

手机端：能够看出很显著的菱角，线条不平滑；

起因很简略，moveTo和lineTo是通过俩个点连线来绘制线条的，留神是直线，所以咱们看到绘制进去的线条是由一条一条直线连贯在一起的

2.解决方案：二次贝塞尔曲线

二次贝塞尔曲线公式：

    通过公式可知，绘制一条贝塞尔曲线须要晓得三个点，终点，起点，控制点，B(t)是曲线上的任意一点，t为常量；    终点和起点咱们能够轻松获取，然而控制点如何获取。所以我想到一个方法是，取门路上的三点绘制一条贝塞尔曲线，别离为P0,P1,P2，其中P0和P2别离为终点和起点,P1为曲线上通过的点，也就是公式上的B（t）；

 P0（x1,y1）,P2(x2,y2), Pc(cx,cy)终点，起点，控制点

通过代入公式，计算简化后得出控制点

cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))t[0-1]

通过以上公式，间接代入坐标即可求得控制点；这就是我反向求二次贝塞尔曲线的办法；

用二次贝塞尔曲线绘制的线条，效果图

作者用以上办法写了一个uniapp的组件

组件地址：点击跳转
git地址：git地址

指标，实现带笔锋的签名板，目前还有点问题，就是写太快不平滑，代码暂不上传