小程序实现表单内签名效果

1.效果图：

2.签名页

2.1 html

<view class="cont cont02" hidden="{
   {istanc}}">
        <view class="weui-cells__title">签名区</view>
        <view class="weui-cells weui-cells_radio" style="padding:0 20rpx;text-align: center;">
            <template is="handwriting"></template>
            <view style="text-align: right;">
                <button catchtap="retDraw" class="btn07" style="display: inline-block;width: 200rpx;">清除签名</button>
            </view>
        </view>
    </view>

2.2. js

import Handwriting from "../../component/handwriting/handwriting";

onLoad: function (options) {
   
    const that = this
	// 初始化签名区
    this.handwriting = new Handwriting(that, {
   
        lineColor: that.data.lineColor,
        slideValue: that.data.slideValue, // 0, 25, 50, 75, 100
    })
}
//提交表单
dosumbit(){
   
	// 判断签名是否为空
    if (this.handwriting.chirography.length === 0) {
   
        wx.showToast({
   
            title: '签名内容不能为空',
            icon: 'none'
        })
        return;
    }

    //生成签名图片
    wx.canvasToTempFilePath({
   
        canvasId: 'handWriting',
        fileType: 'png',
        success: function (res) {
   
            console.log(res.tempFilePath)
            
            // 小程序读取文件管理器 api 将签名图片生成base64格式
            wx.getFileSystemManager().readFile({
   
                filePath: res.tempFilePath, //选择图片返回的相对路径
                encoding: 'base64', //编码格式
                success: res => {
    //成功的回调
                    var base64 = 'data:image/png;base64,' + res.data
                    console.log(base64)
                },
                fail: function (res) {
   
                    //生成失败
                }
            })
        },
        fail: function (res) {
   
            wx.showToast({
   
                title: '获取签名服务异常，请重试',
                icon: 'none'
            })
        }
    })
}

3. handwrting组件

3.1 html

<template name="handwriting">
  <view class="handCenter">
    <canvas class="handWriting" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove" bindtouchend="uploadScaleEnd" bindtap="mouseDown" canvas-id="handWriting"></canvas>
  </view>
</template>

3.2 js

class Handwriting {
   
  // 内置数据
  canvasName = 'handWriting';
  ctx = '';
  canvasWidth = 300;
  canvasHeight = 900;
  linePrack = []; //划线轨迹 ; 生成线条的实际点
  currentLine = [];
  transparent = 1; // 透明度
  pressure = 0.5; // 默认压力
  smoothness = 100; //顺滑度，用60的距离来计算速度
  lineSize = 1.5; // 笔记倍数
  lineMin = 0.5; // 最小笔画半径
  lineMax = 2; // 最大笔画半径
  currentPoint = {
   };
  firstTouch = true; // 第一次触发
  radius = 1; //画圆的半径
  cutArea = {
   
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  }; //裁剪区域
  lastPoint = 0;
  chirography = []; //笔迹
  startY = 0;
  deltaY = 0;
  startValue = 0;
  constructor(pageContext, opts) {
   
    this.page = pageContext
    this.lineColor = opts.lineColor || '#1A1A1A' // 颜色
    this.slideValue = opts.slideValue || 50

    this.init()

    this.page.uploadScaleStart = this.uploadScaleStart.bind(this); // 笔迹开始
    this.page.uploadScaleMove = this.uploadScaleMove.bind(this); // 笔迹移动
    this.page.uploadScaleEnd = this.uploadScaleEnd.bind(this); // 笔迹结束
  }
  init() {
   
    this.ctx = wx.createCanvasContext(this.canvasName)
    var query = wx.createSelectorQuery();
    query.