微信小程序怎么實現手寫簽名

本文小編為大家詳細介紹“微信小程序怎么實現手寫簽名”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序怎么實現手寫簽名”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

在微信小程序上實現手寫簽名，獲取canvascontext新版本和舊版本有點坑，新版本在獲取canvas后如果頁面有滑動，則簽名坐標出現異常(在微信開發者工具上會出現2022-2-17)，但是在真機上即使滑動也不會出現異常，為了防止出現問題，暫時使用舊版本獲取canvascontext

1.效果圖

2.相關代碼

canvas代碼

新版2d canvas

<canvas
  id="canvas"
  class="canvas"
  canvas-id="canvas"
  type="2d"
  :disable-scroll="true"
  @touchstart="handleTouchStart"
  @touchmove="handleTouchMove"
  @touchend="handleTouchEnd"
  @touchcancel="handleTouchCancel"
></canvas>

舊版canvas

<canvas
  class="canvas"
  canvas-id="canvas"
  :disable-scroll="true"
  @touchstart="handleTouchStart"
  @touchmove="handleTouchMove"
  @touchend="handleTouchEnd"
  @touchcancel="handleTouchCancel"
></canvas>

js相關

獲取新版2d canvas對象

const query = uni.createSelectorQuery().in(this);
query.select('.canvas').node(res => {
  const {
      _width,
      _height
  } = res.node;
  
  /* 獲取canvas wxml節點 */
  this.canvas = res.node;
  this.canvasWidth = _width;
  this.canvasHeight = _height;
  /* 獲取canvas 2dcontext */
  this.canvasContext= this.canvas.getContext('2d');
  
  /* 縮放設置canvas畫布大小，防止筆跡錯位 */
  const ratio = wx.getSystemInfoSync().pixelRatio;
  this.canvas.width = this.canvasWidth * ratio;
  this.canvas.height = this.canvasHeight * ratio;
  this.canvasContext.scale(ratio, ratio);
  
  /* 設置線條顏色 */
  this.canvasContext.strokeStyle = '#2A2A2A';
  /* 設置線條粗細 */
  this.canvasContext.lineWidth = 4;
  /* 設置線條的結束端點樣式 */
  this.canvasContext.lineCap = 'round';
}).exec()

縮放設置canvas畫布大小，防止筆跡錯位，這點和頁面滑動沒有關系，不設置也會導致坐標錯位

const ratio = wx.getSystemInfoSync().pixelRatio;
this.canvas.width = this.canvasWidth * ratio;
this.canvas.height = this.canvasHeight * ratio;
this.canvasContext.scale(ratio, ratio);

舊版本獲取canvas

this.canvasContext = uni.createCanvasContext('canvas', this);
/* 設置線條顏色 */
this.canvasContext.setStrokeStyle('#2A2A2A');
/* 設置線條粗細 */
this.canvasContext.setLineWidth(4);
/* 設置線條的結束端點樣式 */
this.canvasContext.setLineCap('round');

簽名js方法，新版本和舊版本只有一個draw的區別，新版本不需要使用draw方法

/* 觸摸開始 */
handleTouchStart(e) {
  this.drawStartX = e.changedTouches[0].x;
  this.drawStartY = e.changedTouches[0].y;
    this.canvasContext.beginPath();
},
/* 觸摸移動 */
handleTouchMove(e) {
    /* 記錄當前位置 */
    const tempX = e.changedTouches[0].x;
    const tempY = e.changedTouches[0].y;

    /* 畫線 */
    this.canvasContext.moveTo(this.drawStartX, this.drawStartY);
    this.canvasContext.lineTo(tempX, tempY);
    this.canvasContext.stroke();

    /* 舊版draw方法，新版本不需要draw */
    this.canvasContext.draw(true);

    /* 重新記錄起始位置 */
    this.drawStartX = tempX;
    this.drawStartY = tempY;
},
/* 觸摸結束 */
handleTouchEnd(e) {
    this.canvasContext.save();
},
/* 觸摸取消 */
handleTouchCancel(e) {
    this.canvasContext.save();
},
/* 清空畫布 */
clearCanvas() {
    this.canvasContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
},

canvas生成本地圖片(我這里封裝了組件，需要傳入this防止this指向異常)

/* 生成簽名圖片 */
generateSignImage() {
    return new Promise((resolve, reject) => {
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          // canvas: this.canvas, // 新版
          canvasId: 'canvas', // 舊版使用id
          width: this.canvasWidth,
          height: this.canvasHeight,
          destWidth: this.canvasWidth,
          destHeight: this.canvasHeight,
          fileType: 'png',
          quality: 1,
          success: res => {
              resolve(res.tempFilePath)
          },
          fail: err => {
              reject(err);
          }
        }, this)
    })
},

新版本的canvas主要是canvas wxml節點和canvas context中做了區分，舊版則只有一個canvas context就可以做全部的操作，在生成圖片時，新版本是傳入wxml對象，舊版本則是傳入唯一canvasId，新版本canvas取消了draw方法

讀到這里，這篇“微信小程序怎么實現手寫簽名”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。