用 Canvas 轻松绘制矩形（并带有撤销功能）！

2023-11-08 12:45:17

从入门到精通：轻松绘制矩形

在 React 中使用 Canvas 绘制矩形是一项非常有趣且有用的技能。它允许您在网页上创建交互式绘图应用程序，如素描板或绘图工具。

要开始使用，您需要创建一个新的 React 组件并将其命名为DrawingCanvas。在这个组件中，您将使用useRef钩子来创建 Canvas 元素的引用。

import React, { useRef } from "react";

const DrawingCanvas = () => {
  const canvasRef = useRef(null);

  return (
    <canvas
      ref={canvasRef}
      width={500}
      height={500}
    />
  );
};

export default DrawingCanvas;

接下来，您需要使用useEffect钩子来在组件挂载时获取 Canvas 元素的上下文。

import React, { useRef, useEffect } from "react";

const DrawingCanvas = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    // 在这里，您可以使用 context 对象来绘制矩形和其他形状。
  }, []);

  return (
    <canvas
      ref={canvasRef}
      width={500}
      height={500}
    />
  );
};

export default DrawingCanvas;

现在，您已经准备好在 Canvas 上绘制矩形了！您可以使用context.fillRect()方法来做到这一点。

import React, { useRef, useEffect } from "react";

const DrawingCanvas = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    // 在这里，您可以使用 context 对象来绘制矩形和其他形状。

    // 绘制一个矩形
    context.fillRect(10, 10, 100, 100);
  }, []);

  return (
    <canvas
      ref={canvasRef}
      width={500}
      height={500}
    />
  );
};

export default DrawingCanvas;

这样，您就可以在 Canvas 上绘制矩形了！

实现撤销功能：让您的绘图更加轻松

为了让您的绘图更加轻松，您可以实现一个撤销功能。这将允许您撤消您最近绘制的矩形。

要实现撤销功能，您需要创建一个数组来存储您绘制的所有矩形。当您绘制一个新的矩形时，您需要将它的坐标添加到这个数组中。当您点击撤销按钮时，您需要从数组中删除最后一个矩形并重新绘制 Canvas。

import React, { useRef, useEffect, useState } from "react";

const DrawingCanvas = () => {
  const canvasRef = useRef(null);
  const [rectangles, setRectangles] = useState([]);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    // 在这里，您可以使用 context 对象来绘制矩形和其他形状。

    // 绘制一个矩形
    context.fillRect(10, 10, 100, 100);

    // 将矩形添加到矩形数组中
    setRectangles([...rectangles, { x: 10, y: 10, width: 100, height: 100 }]);
  }, []);

  const undo = () => {
    // 从数组中删除最后一个矩形
    setRectangles(rectangles.slice(0, -1));

    // 重新绘制 Canvas
    redraw();
  };

  const redraw = () => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    // 清除 Canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 重新绘制所有矩形
    rectangles.forEach((rectangle) => {
      context.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
    });
  };

  return (
    <div>
      <canvas
        ref={canvasRef}
        width={500}
        height={500}
      />
      <button onClick={undo}>撤销</button>
    </div>
  );
};

export default DrawingCanvas;

这样，您就成功地实现了撤销功能！

将矩形的坐标发送给后台：让 AI 算法识别对象

现在，您已经学会了如何在 Canvas 上绘制矩形并实现撤销功能。接下来，您需要将矩形的坐标发送给后台，以便 AI 算法能够识别对象。

要做到这一点，您需要使用WebSocket连接。WebSocket 是一种双向通信协议，它允许您在浏览器和服务器之间发送数据。

import React, { useRef, useEffect, useState } from "react";
import SockJS from "sockjs-client";
import Stomp from "stompjs";

const DrawingCanvas = () => {
  const canvasRef = useRef(null);
  const [rectangles, setRectangles] = useState([]);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    // 在这里，您可以使用 context 对象来绘制矩形和其他形状。

    // 绘制一个矩形
    context.fillRect(10, 10, 100, 100);

    // 将矩形添加到矩形数组中
    setRectangles([...rectangles, { x: 10, y: 10, width: 100, height: 100 }]);
  }, []);

  useEffect(() => {
    // 创建 WebSocket 连接
    const socket = new SockJS("/websocket");
    const stompClient = Stomp.over(socket);

    // 连接到 WebSocket 服务器
    stompClient.connect({}, () => {
      // 订阅 /rectangles 主题
      stompClient.subscribe("/rectangles", (message) => {
        // 接收矩形坐标并将其发送给 AI 算法
        const rectangle = JSON.parse(message.body);
        sendRectangleToAI(rectangle);
      });
    });

    // 断开 WebSocket 连接
    return () => {
      stompClient.disconnect();
    };
  }, []);

  const sendRectangleToAI = (rectangle) => {
    // 在这里，您可以将矩形坐标发送给 AI 算法。
  };

  return (
    <div>
      <canvas
        ref={canvasRef}
        width={500}
        height={500}
      />
    </div>
  );
};

export default DrawingCanvas;