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

1.效果圖

2.相關(guān)代碼

• 1.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>

• 2.js相關(guān)

  • 獲取新版2d canvas對象

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

  • 縮放設(shè)置canvas畫布大小，防止筆跡錯位，這點(diǎn)和頁面滑動沒有關(guān)系，不設(shè)置也會導(dǎo)致坐標(biāo)錯位

  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);
  /* 設(shè)置線條顏色 */
  this.canvasContext.setStrokeStyle('#2A2A2A');
  /* 設(shè)置線條粗細(xì) */
  this.canvasContext.setLineWidth(4);
  /* 設(shè)置線條的結(jié)束端點(diǎn)樣式 */
  this.canvasContext.setLineCap('round');

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

  /* 觸摸開始 */
  handleTouchStart(e) {
    this.drawStartX = e.changedTouches[0].x;
    this.drawStartY = e.changedTouches[0].y;
      this.canvasContext.beginPath();
  },
  /* 觸摸移動 */
  handleTouchMove(e) {
      /* 記錄當(dāng)前位置 */
      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;
  },
  /* 觸摸結(jié)束 */
  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節(jié)點(diǎn)和canvas context中做了區(qū)分，舊版則只有一個canvas context就可以做全部的操作，在生成圖片時，新版本是傳入wxml對象，舊版本則是傳入唯一canvasId，新版本canvas取消了draw方法

正在努力學(xué)習(xí)中，若對你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個贊咯^_^）