Small program realizes handwritten signature

Implementing handwritten signatures on the WeChat applet, getting the new version and the old version of canvascontext is a bit tricky. If the page slides after the canvas is acquired in the new version, the signature coordinates are abnormal (it will appear on the WeChat developer tool on 2022-2-17) , but there will be no exception even if you slide on the real machine. In order to prevent problems, temporarily use the old version to get canvascontext

1. Rendering

2. Relevant code

• 1.canvas code

  • New version of 2d canvas

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

  • old canvas

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

• 2.js related

  • Get the new version of the 2d canvas object

  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()

  • Zoom to set the canvas size to prevent handwriting from being misplaced. This has nothing to do with page sliding. Not setting it will also cause coordinate misalignment.

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

• Get canvas in old version

  this.canvasContext = uni.createCanvasContext('canvas', this);
  /* 设置线条颜色 */
  this.canvasContext.setStrokeStyle('#2A2A2A');
  /* 设置线条粗细 */
  this.canvasContext.setLineWidth(4);
  /* 设置线条的结束端点样式 */
  this.canvasContext.setLineCap('round');

• Signature js method, there is only one difference between the new version and the old version of draw, the new version does not need to use the draw method

  /* 触摸开始 */
  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 generates local images (I encapsulated components here, and I need to pass in this to prevent this from pointing to exceptions)

  /* 生成签名图片 */
  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)
      })
  },

  The new version of canvas mainly distinguishes between the canvas wxml node and the canvas context. In the old version, only one canvas context can do all the operations. When generating pictures, the new version passes in the wxml object, and the old version passes in the only one. canvasId, the new version of canvas cancels the draw method

I am studying hard, if it is helpful to your study, please leave your mark (like it ^_^)

• Past recommendations:

  • implements single-line and multi-line text with an ellipsis
  • Judging iOS and Android and PC
  • Use vue to develop mobile management background
  • Draw a triangle
  • WeChat applet uses the license plate number input method