Outline/src/pages/measure/components/graph/RealtimeLayer.tsx

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

export default function RealtimeLayer(props: {
    width: number;
    height: number;
    leftPadding: number;
    rightPadding: number;
    topPadding: number;
    bottomPadding: number;
}) {
    const canvasRef = useRef<HTMLCanvasElement | null>(null);
    const draw = useCallback((ctx: CanvasRenderingContext2D) => {
        // 使用context对象进行绘图
        ctx.fillStyle = "skyblue"; // 设置填充颜色
        ctx.fillRect(50, 50, 150, 100); // 绘制一个矩形
    }, []);
    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;

        const context = canvas.getContext("2d");
        if (!context) return;
        draw(context);
    }, [draw]);

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