小程序實現手寫簽名 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

小程序實現手寫簽名

發表時間:2022-7-26

發布人:葵宇科技

浏覽次數:42

在微信小程序上實現手寫簽名,獲取canvascontext新版本和(hé)舊版本有點坑,新版本在獲取canvas後如(rú)果頁面有滑動(dòng),則簽名坐(zuò)标出現異常(在微信開發者工具上會出現2022-2-17),但是在真機上即使滑動(dòng)也不會出現異常,為了防止出現問(wè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節點 */
      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畫布大小,防止筆迹錯位,這點和(hé)頁面滑動(dòng)沒有關(guān)系,不設置也會導緻坐(zuò)标錯位
    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方法,新版本和(hé)舊版本隻有一個(gè)draw的區别,新版本不需要使用draw方法

    /* 觸摸開始 */
    handleTouchStart(e) {
      this.drawStartX = e.changedTouches[0].x;
      this.drawStartY = e.changedTouches[0].y;
        this.canvasContext.beginPath();
    },
    /* 觸摸移動(dòng) */
    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節點和(hé)canvas context中(zhōng)做了區分,舊版則隻有一個(gè)canvas context就可(kě)以做全部的操作,在生成圖片時,新版本是傳入wxml對象,舊版本則是傳入唯一canvasId,新版本canvas取消了draw方法
正在努力學習中(zhōng),若對你(nǐ)的學習有幫助,留下(xià)你(nǐ)的印記呗(點個(gè)贊咯^_^)

相關(guān)案例查看更多