小程序手寫簽名

1.實現效果
利用canvas實現監聽畫板中的輸入軌跡繪制圖片

2.wxml

  <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback">
  </canvas>
      <view class='delbutton' bindtap="cleardraw">清除</view>
      <view class="button" bindtap="clickMe">
          確認簽名
      </view>

3.js

var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
var self = this;

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  //開始
  canvasStart: function (event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
  },
  data: {
    src: "", // 第一個簽名
    srcSecond:"", // 第二個簽名
    img: "",
    rpx: ''
  },
  onLoad: function (options) {
    var that = this
    // 使用 wx.createContext 獲取繪圖上下文 context
    context = wx.createCanvasContext('canvas');
    context.drawImage('../../static/images/f.png', 0, 0, 500, 500);
    context.beginPath()
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.draw();
  },
  //過程
  canvasMove: function (event) {
    var that = this
    if (isButtonDown) {
      arrz.push(1);
      console.log(event)
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
    };
    for (var i = 0; i < arrx.length; i++) {
      if (arrz[i] == 0) {
        context.moveTo(arrx[i], arry[i])
      } else {
        context.lineTo(arrx[i], arry[i])
      };
    };
    context.clearRect(0, 0, canvasw, canvash);
    context.drawImage('../../static/images/f.png', 0, 0, 500, 500);  // bug 此處截圖一張背景為純白的圖作為背景用於處理圖片默認底色的問題(已解決)
    context.setStrokeStyle('#000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
    context.draw(false);
  },
  // 點擊保存圖片
  clickMe: function () {
    const self = this
    // 判斷如果是兩個簽名都上傳的時候跳轉
    if(this.data.src && this.data.srcSecond){
      wx.setStorage({
        data: this.data.src,
        key: 'userSign',
      })
    } else{
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      fileType: 'jpg',
      success: function (res) {
         // 獲取到生成圖片的臨時路徑 
         // things to do
        console.log(res)
        self.setData({
          src:res.tempFilePath,
          srcSecond:res.tempFilePath
        })
        
      }
    })
  }
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },
  cleardraw: function () {
    //清除畫布
    arrx = [];
    arry = [];
    arrz = [];
    context.draw(false);
  }
})

4.tip
此處的白色背景圖添加為解決字體與畫布顏色一致的問題,只是為了解決問題而添加的白色背景圖片作為臨時的解決方案,不是很好.有更好的解決方案可以留言