signature-mobile-wechat

signatures for H5 and miniprogram.

Usage no npm install needed!

<script type="module">
  import signatureMobileWechat from 'https://cdn.skypack.dev/signature-mobile-wechat';
</script>

README

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

dotSize
(float or function) Radius of a single dot.
minWidth
(float) Minimum width of a line. Defaults to 0.5.
maxWidth
(float) Maximum width of a line. Defaults to 2.5.
throttle
(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
minDistance
(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
backgroundColor
(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
penColor
(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
velocityFilterWeight
(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
onBegin
(function) Callback when stroke begin.
onEnd
(function) Callback when stroke end.

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)";