微信小程序怎么实现手写签名

发布时间:2022-02-18 15:51:19 作者:iii
来源:亿速云 阅读:407

本文小编为大家详细介绍“微信小程序怎么实现手写签名”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现手写签名”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

在微信小程序上实现手写签名,获取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方法

读到这里,这篇“微信小程序怎么实现手写签名”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 微信小程序如何实现滑动
  2. 微信小程序如何实现tabBar

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信小程序

上一篇:php如何将数据编码从utf-8转为gbk

下一篇:springboot pom文件加入监控依赖后没有起作用如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》