在使用React实现HTML5画布自由绘图尝试后,我希望能够在撤销和重做按钮上分别添加撤销和重做功能。非常感谢提供的任何帮助。
function App(props) {
const canvasRef = useRef(null);
const contextRef = useRef(null);
const [isDrawing, setIsDrawing] = useState(false);
useEffect(() => {
const canvas = canvasRef.current;
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = `${window.innerWidth}px`;
canvas.style.height = `${window.innerHeight}px`;
const context = canvas.getContext('2d');
context.scale(2, 2);
context.lineCap = 'round';
context.strokeStyle = 'black';
context.lineWidth = 5;
contextRef.current = context;
}, []);
const startDrawing = ({ nativeEvent }) => {
const { offsetX, offsetY } = nativeEvent;
contextRef.current.beginPath();
contextRef.current.moveTo(offsetX, offsetY);
setIsDrawing(true);
};
const finishDrawing = () => {
contextRef.current.closePath();
setIsDrawing(false);
};
const draw = ({ nativeEvent }) => {
if (!isDrawing) {
return;
}
const { offsetX, offsetY } = nativeEvent;
contextRef.current.lineTo(offsetX, offsetY);
contextRef.current.stroke();
};
return <canvas onMouseDown={startDrawing} onMouseUp={finishDrawing} onMouseMove={draw} ref={canvasRef} />;
}