diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx
index 750ad2b..bd09e85 100644
--- a/src/pages/measure/components/MeasureAction.tsx
+++ b/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 (
-
-
+
测量步骤
diff --git a/src/pages/measure/components/graph/AreaLayer.tsx b/src/pages/measure/components/graph/AreaLayer.tsx
new file mode 100644
index 0000000..f7bcede
--- /dev/null
+++ b/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
(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 (
+
+
+
+ );
+}
diff --git a/src/pages/measure/components/SectionalView.tsx b/src/pages/measure/components/graph/GridLayer.tsx
similarity index 97%
rename from src/pages/measure/components/SectionalView.tsx
rename to src/pages/measure/components/graph/GridLayer.tsx
index eb03704..ed242e0 100644
--- a/src/pages/measure/components/SectionalView.tsx
+++ b/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 (
diff --git a/src/pages/measure/components/graph/MarkLayer.tsx b/src/pages/measure/components/graph/MarkLayer.tsx
new file mode 100644
index 0000000..28bb3d8
--- /dev/null
+++ b/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
(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 (
+
+
+
+ );
+}
diff --git a/src/pages/measure/components/graph/RealtimeLayer.tsx b/src/pages/measure/components/graph/RealtimeLayer.tsx
new file mode 100644
index 0000000..4d4c794
--- /dev/null
+++ b/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(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 (
+
+
+
+ );
+}
diff --git a/src/pages/measure/components/graph/StandardLayer.tsx b/src/pages/measure/components/graph/StandardLayer.tsx
new file mode 100644
index 0000000..f2bffeb
--- /dev/null
+++ b/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(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 (
+
+
+
+ );
+}