@wines/hand-writing v1.5.1

@wines/hand-writing

hand writing Canvas手写板

Canvas实现用户签字功能

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Hand Wrting",
  "usingComponents": {
    "wux-button": "@wines/button",
    "wux-hand-writing": "@wines/hand-writing"
  }
}

示例

import './index.less';
import { PageData, PageCustom } from '@wines/core';
import { $wuxHandWriting } from '@wines/hand-writing';
const random = (min = 0, max = 1) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
Page<PageData, PageCustom>({
  data: {
    height: 300,
    width: 300,
    bgColor: '',
    transparent: 1,
    lineColor: '#1A1A1A',
    lineSize: 1,
    lineMin: 0.5,
    lineMax: 4,
    pressure: 1,
    smoothness: 60,
  },
  onBgColor() {
    this.setData({
      bgColor: ['#fff', '#f0f0f0'][random(0, 1)],
    });
  },
  onTransparent() {
    this.setData({
      transparent: [0.8, 1][random(0, 1)],
    });
  },
  onLineColor() {
    this.setData({
      lineColor: ['#1A1A1A', '#fc5531'][random(0, 1)],
    });
  },
  onLineSize() {
    this.setData({
      lineSize: [0.5, 1, 1.5, 2, 3][random(0, 4)],
    });
  },
  onLineMin() {
    this.setData({
      lineMin: [0.1, 0.2, 0.4, 0.5][random(0, 3)],
    });
  },
  onLineMax() {
    this.setData({
      lineMax: [1, 2, 3, 4][random(0, 3)],
    });
  },
  onPressure() {
    this.setData({
      pressure: [0.5, 1, 2][random(0, 2)],
    });
  },
  onSmoothness() {
    this.setData({
      smoothness: [30, 45, 60, 75][random(0, 3)],
    });
  },
  onReset() {
    $wuxHandWriting().reset();
  },
  onSave() {
    $wuxHandWriting()
      .saveCanvasAsImage()
      .then((filePath: string) => {
        void wx.showModal({
          title: filePath,
        });
      });
  },
});

API

Result props

method

// 重置画布到初始化状态
- $wuxHandWriting().reset()
// 保存签名到本地临时图片
- $wuxHandWriting().saveCanvasAsImage()