react-signature-canvas 实现画笔与橡皮擦功能

react-signature-canvas git 地址

代码示例

import React, { Component } from 'react'
import { createRoot } from 'react-dom/client'import SignaturePad from '../../src/index.tsx'import * as styles from './styles.module.css'class App extends Component {state = { trimmedDataURL: null }isErasing = false;sigPad = {}clear = () => {this.sigPad.clear()}trim = () => {this.setState({trimmedDataURL: this.sigPad.getTrimmedCanvas().toDataURL('image/png')})}// 恢复画笔功能bruser = ()=>{this.isErasing = false;const canvas = this.sigPad._canvas;if (!this.isErasing && canvas) {const ctx = canvas.getContext('2d');ctx.globalCompositeOperation = 'source-over';}}//橡皮擦功能handleErase  = () => {this.isErasing = !this.isErasing;const canvas = this.sigPad._canvas;// 设置橡皮擦属性及样式if (this.isErasing && canvas) {const ctx = canvas.getContext('2d');ctx.fillStyle = '#e21061';ctx.globalCompositeOperation = 'destination-out';ctx.beginPath();ctx.arc(canvas.offsetLeft, canvas.offsetTop, 10, 0, 2 * Math.PI);ctx.fill();}}render() {const { trimmedDataURL } = this.statereturn <div className={styles.container}><div className={styles.sigContainer}><SignaturePad canvasProps={{className: styles.sigPad, }}options={{minWidth: 0.5, // 最小线条宽度maxWidth: 2, // 最大线条宽度penColor: "black" // 笔的颜色}}ref={(ref) => { this.sigPad = ref }} /></div><div style={{display:'flex',alignItems:'center',justifyContent:'space-around'}}><button className={styles.buttons} onClick={this.clear}>Clear</button><button className={styles.buttons} onClick={this.trim}>Trim</button><button className={styles.buttons} onClick={this.bruser}>Bruser</button><button className={styles.buttons} onClick={this.handleErase}>Erase</button></div>{trimmedDataURL? <img className={styles.sigImage} alt='signature'src={trimmedDataURL} />: null}</div>}
}createRoot(document.getElementById('container')).render(<App />)

 画笔成果展示：

橡皮擦擦除之后的效果：