得到绘画，画布的反应

Question

你好，我用反应构建了一个绘图应用程序，我想在用户从画布上移开鼠标时接收用户绘制的内容。 当用户停止绘图时，我希望它总是重复。 你对我有什么建议来解决这个问题。 感谢您的帮助，我使用了 mousechange，但我发现它在画布上不起作用。 绘图部分：

import { useEffect, useRef, useState } from "react";
import Menu from "./Menu";
import "./App.css";
import { useStateContext } from '../../contexts/ContextProvider';



const DrawingSEC = () => {

    const canvasRef = useRef(null);
    const ctxRef = useRef(null);
    const [isDrawing, setIsDrawing] = useState(false);
    const [lineWidth, setLineWidth] = useState(2);
    const [lineColor, setLineColor] = useState("black");
    const {screenSize,
      setScreenSize} = useStateContext();
  
    useEffect(() => {
      const handleResize = () => setScreenSize
        (window.innerWidth);
      window.addEventListener('resize', handleResize);
  
      handleResize();
      return () => window.removeEventListener
        ('resize', handleResize);
    });
    
    // Initialization when the component
    // mounts for the first time
    useEffect(() => {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext("2d");
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.strokeStyle = lineColor;
      ctx.lineWidth = lineWidth;
      ctxRef.current = ctx;
    }, [lineColor,  lineWidth]);
    
    // Function for starting the drawing
    const startDrawing = (e) => {
      ctxRef.current.beginPath();
      ctxRef.current.moveTo(
        e.nativeEvent.offsetX, 
        e.nativeEvent.offsetY
      );
      setIsDrawing(true);
    };
    
    // Function for ending the drawing
    const endDrawing = () => {
      ctxRef.current.closePath();
      
      setIsDrawing(false);
    };
    
    const draw = (e) => {
      if (!isDrawing) {
        return;
      }
      ctxRef.current.lineTo(
        e.nativeEvent.offsetX, 
        e.nativeEvent.offsetY
      );
        
      ctxRef.current.stroke();
    };
  return (
    <div className="App">
      <div className="draw-area">
        <Menu
          setLineColor={setLineColor}
          setLineWidth={setLineWidth}
          lineWidth={lineWidth}

        />
        <canvas
          onMouseDown={startDrawing}
          onMouseUp={endDrawing}
          onMouseMove={draw}
          ref={canvasRef}
          width={screenSize-300}
          height={`720px`}
        />
      </div>
    </div>
  )
}

export default DrawingSEC

菜单是 DrawSec ：

import React from "react";
import "./App.css";

const Menu = ({ setLineColor, setLineWidth,lineWidth }) => {
return (
    <div className="Menu">
    <label>color  </label>
    <input
        type="color"
        onChange={(e) => {
        setLineColor(e.target.value);
        }}
        style={{borderRadius:"50%"}}
    />
    <label>linewidth </label>
    <input
        type="range"
        min="3"
        max="20"
        value={lineWidth}
        onChange={(e) => {
        setLineWidth(e.target.value);
        }}
    />
    
    </div>
);
};

export default Menu;

应用程序.css：

@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

.App {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

h1 {
  font-family: "Lobster", cursive;
  font-size: 50px;
  color: #4644f0;
}

.draw-area {
  height: 720px;
  border: 2px solid #808080;
  position: relative;
  background-color: white;
}
.draw-area canvas {
  /* width: 100%; */
}

.Menu {
  width: 650px;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  border-radius: 5px;
  align-items: center;
  background-color: #a3a3a32d;
  margin: auto;
  margin-top: 10px;
  /* width: 100%; */
  /* display: flex; */
  /* flex-wrap: wrap; */
}

Answer 1

您应该将此行添加到您的 endDrawing 函数中：

      console.log(canvasRef.current.toDataURL());

这是在控制台中给你一个链接，你可以将它保存在另一个变量中。