From 061039c1ca31340eee86d432749a19b45651f167 Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Wed, 5 Mar 2025 11:43:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B1=82=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/measure/components/MeasureAction.tsx | 10 ++- src/pages/measure/components/SectionalView.tsx | 72 ---------------------- src/pages/measure/components/graph/AreaLayer.tsx | 31 ++++++++++ src/pages/measure/components/graph/GridLayer.tsx | 71 +++++++++++++++++++++ src/pages/measure/components/graph/MarkLayer.tsx | 31 ++++++++++ .../measure/components/graph/RealtimeLayer.tsx | 31 ++++++++++ .../measure/components/graph/StandardLayer.tsx | 31 ++++++++++ 7 files changed, 202 insertions(+), 75 deletions(-) delete mode 100644 src/pages/measure/components/SectionalView.tsx create mode 100644 src/pages/measure/components/graph/AreaLayer.tsx create mode 100644 src/pages/measure/components/graph/GridLayer.tsx create mode 100644 src/pages/measure/components/graph/MarkLayer.tsx create mode 100644 src/pages/measure/components/graph/RealtimeLayer.tsx create mode 100644 src/pages/measure/components/graph/StandardLayer.tsx 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/SectionalView.tsx b/src/pages/measure/components/SectionalView.tsx deleted file mode 100644 index eb03704..0000000 --- a/src/pages/measure/components/SectionalView.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { useCallback, useEffect, useRef } from "react"; - -const primaryLineColor = "rgb(203,213,245)"; -const subLineColor = "rgb(226,231,232)"; - -export default function SectionalView(props: { - width: number; - height: number; - leftPadding: number; - rightPadding: number; - topPadding: number; - bottomPadding: number; - columns: number; - rows: number; - cellNum: number; -}) { - const xStartPx = props.leftPadding; - const xEndPx = props.width - props.rightPadding; - const xStepPx = (props.width - props.leftPadding - props.rightPadding) / props.columns; - const xUnitPx = xStepPx / props.cellNum; - const yStartPx = props.topPadding; - const yEndPx = props.height - props.bottomPadding; - const yStepPx = (props.height - props.topPadding - props.bottomPadding) / props.rows; - const yUnitPx = yStepPx / props.cellNum; - - const canvasRef = useRef(null); - const drawGrid = useCallback((ctx: CanvasRenderingContext2D) => { - ctx.beginPath(); - ctx.strokeStyle = subLineColor; - for (let i = 1; i < props.columns * props.cellNum; ++i) { - if (i % props.cellNum === 0) continue; - ctx.moveTo(xStartPx + xUnitPx * i, yStartPx); - ctx.lineTo(xStartPx + xUnitPx * i, yEndPx); - } - for (let j = 1; j < props.rows * props.cellNum; ++j) { - if (j % props.cellNum === 0) continue; - ctx.moveTo(xStartPx, yStartPx + yUnitPx * j); - ctx.lineTo(xEndPx, yStartPx + yUnitPx * j); - } - ctx.stroke(); - - ctx.beginPath(); - ctx.strokeStyle = primaryLineColor; - for (let i = 0; i <= props.columns; ++i) { - ctx.moveTo(xStartPx + xStepPx * i, yStartPx); - ctx.lineTo(xStartPx + xStepPx * i, yEndPx); - } - for (let j = 0; j <= props.rows; ++j) { - ctx.moveTo(xStartPx, yStartPx + yStepPx * j); - ctx.lineTo(xEndPx, yStartPx + yStepPx * j); - } - ctx.stroke(); - },[props.cellNum, props.columns, props.rows, xEndPx, xStartPx, xStepPx, xUnitPx, yEndPx, yStartPx, yStepPx, yUnitPx]) - - useEffect(() => { - // 获取canvas的2D绘图上下文 - const canvas = canvasRef.current; - if (!canvas) return; - - const context = canvas.getContext("2d"); - if (!context) return; - // 使用context对象进行绘图 - drawGrid(context); - }, [drawGrid]); - - - 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/graph/GridLayer.tsx b/src/pages/measure/components/graph/GridLayer.tsx new file mode 100644 index 0000000..ed242e0 --- /dev/null +++ b/src/pages/measure/components/graph/GridLayer.tsx @@ -0,0 +1,71 @@ +import { useCallback, useEffect, useRef } from "react"; + +const primaryLineColor = "rgb(203,213,245)"; +const subLineColor = "rgb(226,231,232)"; + +export default function GridLayer(props: { + width: number; + height: number; + leftPadding: number; + rightPadding: number; + topPadding: number; + bottomPadding: number; + columns: number; + rows: number; + cellNum: number; +}) { + const xStartPx = props.leftPadding; + const xEndPx = props.width - props.rightPadding; + const xStepPx = (props.width - props.leftPadding - props.rightPadding) / props.columns; + const xUnitPx = xStepPx / props.cellNum; + const yStartPx = props.topPadding; + const yEndPx = props.height - props.bottomPadding; + const yStepPx = (props.height - props.topPadding - props.bottomPadding) / props.rows; + const yUnitPx = yStepPx / props.cellNum; + + const canvasRef = useRef(null); + const drawGrid = useCallback((ctx: CanvasRenderingContext2D) => { + ctx.beginPath(); + ctx.strokeStyle = subLineColor; + for (let i = 1; i < props.columns * props.cellNum; ++i) { + if (i % props.cellNum === 0) continue; + ctx.moveTo(xStartPx + xUnitPx * i, yStartPx); + ctx.lineTo(xStartPx + xUnitPx * i, yEndPx); + } + for (let j = 1; j < props.rows * props.cellNum; ++j) { + if (j % props.cellNum === 0) continue; + ctx.moveTo(xStartPx, yStartPx + yUnitPx * j); + ctx.lineTo(xEndPx, yStartPx + yUnitPx * j); + } + ctx.stroke(); + + ctx.beginPath(); + ctx.strokeStyle = primaryLineColor; + for (let i = 0; i <= props.columns; ++i) { + ctx.moveTo(xStartPx + xStepPx * i, yStartPx); + ctx.lineTo(xStartPx + xStepPx * i, yEndPx); + } + for (let j = 0; j <= props.rows; ++j) { + ctx.moveTo(xStartPx, yStartPx + yStepPx * j); + ctx.lineTo(xEndPx, yStartPx + yStepPx * j); + } + ctx.stroke(); + },[props.cellNum, props.columns, props.rows, xEndPx, xStartPx, xStepPx, xUnitPx, yEndPx, yStartPx, yStepPx, yUnitPx]) + + useEffect(() => { + // 获取canvas的2D绘图上下文 + const canvas = canvasRef.current; + if (!canvas) return; + + const context = canvas.getContext("2d"); + if (!context) return; + // 使用context对象进行绘图 + 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 ( +
+ +
+ ); +}