h5 手写签名 react
时间: 2023-09-07 10:11:04 浏览: 61
您可以使用第三方库或自己编写组件来实现在 React 中手写签名的功能。
以下是一个简单的手写签名组件示例:
```jsx
import React, { useRef, useState } from "react";
const Signature = () => {
const canvasRef = useRef(null);
const [isDrawing, setIsDrawing] = useState(false);
const startDrawing = (e) => {
e.preventDefault();
setIsDrawing(true);
};
const stopDrawing = () => {
setIsDrawing(false);
};
const draw = (e) => {
if (!isDrawing) return;
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.lineWidth = 2;
ctx.lineCap = "round";
ctx.strokeStyle = "#000";
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
};
return (
<canvas
ref={canvasRef}
onMouseDown={startDrawing}
onMouseUp={stopDrawing}
onMouseMove={draw}
onTouchStart={startDrawing}
onTouchEnd={stopDrawing}
onTouchMove={draw}
/>
);
};
export default Signature;
```
此组件使用 `useRef` 来获取 canvas 元素,并使用 `useState` 来跟踪签名是否正在进行。`startDrawing`、`stopDrawing` 和 `draw` 函数用于处理用户在 canvas 上绘图的事件。最后,将这些事件附加到 canvas 元素上。
请注意,此示例中手写签名的样式、大小和位置等都需要根据您的需求进行调整。