丝滑流畅的手写签名 canvas 2d

在最近的小程序项目中，设计师又给我出难题了，需要在小程序里面实现一个手写签名功能，完成后将签名生成文件，上传的服务端去。手写签名不难，难在居然要我生成 svg，还有将签名功能搞得和画板一样，我是不能忍，直呼搞不了。

安卓版手写签名
https://github.com/silencefly96/drawdemo

签名功能实际在我之前的安卓开发中用过，支持笔画的前进、后退、全清除以及图片的导出，真就快做到 生成 SVG 的底部了，要不是我不懂 SVG ，就手撕一个根据 path 路径生成 svg 的代码了。

扯远了，小程序和安卓原生比不得，我就只弄了清除和导出功能。

先看看效果

这个是使用二阶贝塞尔曲线优化后的效果，曲线很流畅。

这个是没使用贝塞尔曲线优化的效果，笔画很粗糙。

性能和适配

一开始我用的旧版本 canvas 去绘制签名，因为网上有个县城的案例，后面发现用起来卡的一批，而且在有些手机上导出图片还会有没数据问题，根本没法忍。

于是自己学了学 canvas 2d 的用法，结合贝塞尔曲线，做了个性能和流畅度都还可以的手写签名页面。

看看代码

• WXML

<canvas class="canvas" type="2d" id="myCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove" />
<cover-view class="row button-container">
  <cover-view class="flex1 button " bindtap='clear'>
    清除
  </cover-view>
  <cover-view class="flex1 button margin-left-12" bindtap='export'>
    提交
  </cover-view>
</cover-view>

这里就是放了一个 canvas，加上使用 cover-view做的两个按钮。

• JSON

{
   
  "usingComponents": {
   },
  "pageOrientation": "landscape",
  "navigationBarTitleText": "手写签名"<