微信小程序实现手写签名功能技术教程分享

大家好,今天春哥技术团队给大家分享一个技术教程,供大家学习参考,微信小程序实现手写签名功能,这是我们上一阶段给客户私人订制开发了一个微信小程序用到的功能,正好今天整理下代码分享给大家学习下。免费提交网站收录目录大全。
微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为了防止出现问题,暂时使用旧版本获取canvascontext

1.效果图

<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>实现手写签名功能技术教程分享<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>实现手写签名功能技术教程分享

2.相关代码

  • 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相关

    • 获取新版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方法
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)


来源:春哥技术博客,欢迎分享,转载请注明出处。(欢迎加春哥团队客服微信号:taike668)

本文地址:https://www.cgtblog.com/wx/4802.html
上一篇:微信小程序音频播放 InnerAudioContex      下一篇:关于小程序session_key安全问题的通知