2023-01-12 工作记录--React-使用react-signature-canvas实现手写签名

使用react-signature-canvas实现手写签名

一、实现效果 ⭐️

二、官网 ⭐️

https://www.npmjs.com/package/react-signature-canvas

三、实现步骤 ⭐️

1、安装react-signature-canvas

npm i react-signature-canvas

或者

yarn add react-signature-canvas

2、实现代码

jiLiFuPage.jsx

import React from "react";
import SignatureCanvas from 'react-signature-canvas'; // 引入签名组件
import './jiLiFuPage.less'; // 引入css

class JiLiFuPage extends React.Component {
  constructor(props) {
    super(props)
  }

  // 签名完成回调函数
  onSignEnd = () => {
    console.log('签名完成咯~');
  }

  // 点击「删除重来」按钮
  clear = () => {
    // 清除签名
    this.sigCanvasRef.clear();
  }

  render() {
    return (
      <div className="scrollCon">
        <div className="jiLiFuPage">
          
          {/* 设置签名范围 */}
          <div className="contanier">
            {/* 签名 */}
            <SignatureCanvas
              penColor='black' // 笔刷颜色
              minWidth={6} // 笔刷粗细
              maxWidth={8} // 笔刷粗细
              ref={(ref) => { this.sigCanvasRef = ref }} // 用于调用插件的API
              onEnd={this.onSignEnd} // 签名完成回调函数
              canvasProps={{
                className: 'sigCanvas' // 类名，设置样式
              }}
            />
          </div>

          {/* 按钮-删除重来 */}
          <span className="reset" onClick={this.clear}>删除重来</span>

        </div>
      </div>
    )
  }
}

export default JiLiFuPage;

jiLiFuPage.less

@import "../../res.less";

.scrollCon::-webkit-scrollbar {
  display: none;
}
.scrollCon {
  width: 100vw;
  height: 100vh;
  left: 0px;
  top: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
}
.jiLiFuPage {
  width: 750px;
  height: 1624px;
  left: 0px;
  top: 0px;
  position: absolute;
  background-color: pink;
  /** 签名范围 */
  .contanier{
    width: 530px;
    height: 532px;
    position: absolute;
    top: 358px;
    left: 50%;
    transform: translateX(-50%);
    /** 已封装方法-设置背景 */
    .sparkBg("jilifu/textBg.png");
    /** 签名样式 */
    .sigCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }  
  }
  /* 按钮-删除重来 */
  .reset{
    width: 100%;
    position: absolute;
    top: 930px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    text-align: center;
    color: #9b6559;
    font-weight: 700;
  }
}