记录一下小程序的手写签名组件

---

前言

由于前一段时间的电子合同功能需要合同双方的签名，在此记录一下小程序前端的手写签名组件。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、.js文件的内容

// pages/component/signature/signature.js
var cxt = null;// 使用 wx.createContext 获取绘图上下文 cxt
var arrx = [];//所有点的X轴集合
var arry = [];//所有点的Y轴集合
var canvasw = 0;//画布的宽 
var canvash = 0;//画布的高
// var canvasTop=0;
// var canvasLeft=0;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    can:Boolean,//用于显示隐藏canvas
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    src:""
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    //显示隐藏组件
    back(){
        //子组件传递给父组件一个方法canvasDis，并传递一个参数src给父组件
      this.triggerEvent("canvasDis",{src:this.data.src})
    },
    //创建canvas上下文
    createdCanvas(){
      wx.showLoading({
        title: '加载中...',
        mask: true
      })
      // 使用 wx.createContext 获取绘图上下文 cxt
      //创建 canvas 的绘图上下文,因为这里是封装成组件，所有需要加this
      cxt = wx.createCanvasContext('canvas',this);
      cxt.beginPath();
      //封装成组件，所有需要in(this),如果不加无法创建画布
      var query = wx.createSelectorQuery().in(this).select('.handCenter');
      query.boundingClientRect(rect => {
        // canvasTop = rect.top;
        // canvasLeft = rect.left;
        canvasw = rect.width/2;
        canvash = rect.height/2;
        // var ratio = 2;
        // while (canvasw > 150){// 保证宽在150以内
        //   canvasw = Math.trunc(res.width / ratio)
        //   canvash = Math.trunc(res.height / ratio)