signature-mobile-wechat

signature-mobile-wechat support H5 and wechat miniprogram

This is a rewrite of original signature-mobile-wechat, starting and borrowing from this fork.

Installation

# with npm
npm install signature-mobile-wechat -S
# with yarn
yarn add signature-mobile-wechat -S

Usage

1-导入包

import { SignatureMobile, SignatureMobileWechat } from 'signature-mobile-wechat';

2-在微信小程序中使用

// 1-创建初始化
wx.createSelectorQuery()
  .select(`#canvas`)
  .fields({
    node: true,
    size: true,
  })
  .exec((res: any[]) => {
    const canvas: WechatMiniprogram.Canvas = res[0].node;
    const signatureMobileWechat = new SignatureMobileWechat(canvas, {
      minWidth: 2,
      maxWidth: 5,
      penColor: 'rgb(0, 0, 0)',
    });
  });
// 2-手势注册注入
handleTouchStart: function (e) {
  // console.log(e)
  this.data.signatureMobileWechat && this.data.signatureMobileWechat.handleTouchStart(e)
},
handleTouchMove: function (e) {
  // console.log(e)
  this.data.signatureMobileWechat && this.data.signatureMobileWechat.handleTouchMove(e)
},
handleTouchEnd: function (e) {
  // console.log(e)
  this.data.signatureMobileWechat && this.data.signatureMobileWechat.handleTouchEnd(e)
},

2-正常网页使用

const canvas = document.querySelector('canvas');
const signatureMobile = new SignatureMobile(canvas, {
  minWidth: 2,
  maxWidth: 5,
  penColor: 'rgb(0, 0, 0)',
});

Options

You can set options during initialization:

var signatureMobile = new SignatureMobile(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});

or during runtime:

var signatureMobile = new SignatureMobile(canvas);
signatureMobile.minWidth = 5;
signatureMobile.maxWidth = 10;
signatureMobile.penColor = "rgb(66, 133, 244)";