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 ( +
+ +
+ ); +}