93 lines
2.9 KiB
Plaintext
93 lines
2.9 KiB
Plaintext
import React, { useRef, useState, useEffect } from 'react';
|
||
import './SignaturePad.css';
|
||
|
||
export default function SignaturePad() {
|
||
const pad = useRef(null);
|
||
const canvas = useRef(null);
|
||
const drawing = useRef(false);
|
||
const last = useRef(null);
|
||
const strokes = useRef([]);
|
||
const cur = useRef([]);
|
||
const [hasInk, setHasInk] = useState(false);
|
||
const [saved, setSaved] = useState('');
|
||
|
||
const ctx = () => canvas.current.getContext('2d');
|
||
const fit = () => {
|
||
const r = pad.current.getBoundingClientRect();
|
||
canvas.current.width = r.width;
|
||
canvas.current.height = r.height;
|
||
redraw();
|
||
};
|
||
const pos = (e) => {
|
||
const r = canvas.current.getBoundingClientRect();
|
||
const t = e.touches && e.touches[0];
|
||
return { x: (t ? t.clientX : e.clientX) - r.left, y: (t ? t.clientY : e.clientY) - r.top };
|
||
};
|
||
const down = (e) => {
|
||
e.preventDefault();
|
||
drawing.current = true;
|
||
last.current = pos(e);
|
||
cur.current = [last.current];
|
||
strokes.current.push(cur.current);
|
||
setHasInk(true);
|
||
};
|
||
const move = (e) => {
|
||
if (!drawing.current) return;
|
||
e.preventDefault();
|
||
const p = pos(e);
|
||
ctx().lineTo(p.x, p.y);
|
||
ctx().stroke();
|
||
cur.current.push(p);
|
||
};
|
||
const up = () => { drawing.current = false; last.current = null; };
|
||
const undo = () => { strokes.current.pop(); redraw(); if (!strokes.current.length) setHasInk(false); };
|
||
const clear = () => { strokes.current = []; redraw(); setHasInk(false); setSaved(''); };
|
||
const save = () => setSaved('已导出（' + canvas.current.width + '×' + canvas.current.height + '）');
|
||
|
||
const redraw = () => {
|
||
const c = canvas.current;
|
||
const x = c.getContext('2d');
|
||
x.clearRect(0, 0, c.width, c.height);
|
||
x.strokeStyle = '#1F2329';
|
||
x.lineWidth = 2;
|
||
x.lineCap = 'round';
|
||
x.lineJoin = 'round';
|
||
strokes.current.forEach((s) => {
|
||
x.beginPath();
|
||
s.forEach((p, i) => (i ? x.lineTo(p.x, p.y) : x.moveTo(p.x, p.y)));
|
||
x.stroke();
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
fit();
|
||
window.addEventListener('resize', fit);
|
||
return () => window.removeEventListener('resize', fit);
|
||
// eslint-disable-next-line
|
||
}, []);
|
||
|
||
return (
|
||
<div className="aa-sign">
|
||
<div className="aa-sign-pad" ref={pad}>
|
||
<canvas
|
||
ref={canvas}
|
||
className="aa-sign-canvas"
|
||
onMouseDown={down}
|
||
onMouseMove={move}
|
||
onMouseUp={up}
|
||
onTouchStart={down}
|
||
onTouchMove={move}
|
||
onTouchEnd={up}
|
||
/>
|
||
{!hasInk && <div className="aa-sign-placeholder">请在此处签名</div>}
|
||
</div>
|
||
<div className="aa-sign-actions">
|
||
<button className="aa-btn" onClick={undo}>撤销</button>
|
||
<button className="aa-btn" onClick={clear}>清除</button>
|
||
<button className="aa-btn aa-btn--primary" onClick={save}>保存</button>
|
||
{saved && <span className="aa-sign-preview">{saved}</span>}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|