添加层组件

src/pages/measure/components/MeasureAction.tsx

@@ -1,7 +1,8 @@
 import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent } from "antd";
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import SectionalView from "./SectionalView";
+import GridLayer from "./graph/GridLayer";
+import StandardLayer from "./graph/StandardLayer";
 
 export default function MeasureAction() {
 	const navigate = useNavigate();
@@ -18,8 +19,11 @@ export default function MeasureAction() {
 	};
 	return (
 		<div className="flex h-full ">
-			<div className="flex-none border">
-                <SectionalView width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} columns={10} rows={7} cellNum={10} />
+			<div className="flex-none border relative">
+                <GridLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} columns={10} rows={7} cellNum={10} />
+				<div className="absolute top-0">
+				<StandardLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30}  />
+				</div>
             </div>
 			<div className="w-[300px] flex-none py-6">
 				<h1 className="font-medium text-xl text-center">测量步骤</h1>

src/pages/measure/components/graph/AreaLayer.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export default function AreaLayer(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>
+    );
+}

src/pages/measure/components/SectionalView.tsx → src/pages/measure/components/graph/GridLayer.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef } from "react";
 const primaryLineColor = "rgb(203,213,245)";
 const subLineColor = "rgb(226,231,232)";
 
-export default function SectionalView(props: {
+export default function GridLayer(props: {
 	width: number;
 	height: number;
 	leftPadding: number;
@@ -63,7 +63,6 @@ export default function SectionalView(props: {
 		drawGrid(context);
 	}, [drawGrid]);
 
-    
 	return (
 		<div>
 			<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>

src/pages/measure/components/graph/MarkLayer.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export default function MarkLayer(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>
+    );
+}

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

@@ -0,0 +1,31 @@
+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>
+    );
+}

src/pages/measure/components/graph/StandardLayer.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export default function StandardLayer(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>
+	);
+}