canvas组件

src/index.tsx

@@ -43,9 +43,9 @@ const router = createBrowserRouter([
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
-	<React.StrictMode>
-		<RouterProvider router={router} />
-	</React.StrictMode>
+	// <React.StrictMode>
+	<RouterProvider router={router} />
+	// </React.StrictMode>
 );
 
 console.log(process.env.REACT_APP_WS_URL);

src/pages/measure/components/MeasureAction.tsx

@@ -1,23 +1,32 @@
 import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent } from "antd";
 import { useState } from "react";
+import { useNavigate } from "react-router";
+import SectionalView from "./SectionalView";
 
 export default function MeasureAction() {
+	const navigate = useNavigate();
 	const [sideVal, setSideVal] = useState<1 | 2>(1);
-    const onSideChange = (e: RadioChangeEvent) => {
-        setSideVal(e.target.value);
-      };
-      const onAfterSaveChange: CheckboxProps['onChange'] = (e) => {
-        console.log(`checked = ${e.target.checked}`);
-      };
+
+	const onSideChange = (e: RadioChangeEvent) => {
+		setSideVal(e.target.value);
+	};
+	const onAfterSaveChange: CheckboxProps["onChange"] = e => {
+		console.log(`checked = ${e.target.checked}`);
+	};
+	const onAnalysisBtnClick = () => {
+		navigate("../detail");
+	};
 	return (
 		<div className="flex h-full ">
-			<div className="w-[960px] flex-none border"></div>
+			<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>
 			<div className="w-[300px] flex-none py-6">
 				<h1 className="font-medium text-xl text-center">测量步骤</h1>
 				<section className="flex flex-col items-center gap-4 mt-6 border-t border-[#D8D8D8] py-4">
 					<Radio.Group
 						value={sideVal}
-                        onChange={onSideChange}
+						onChange={onSideChange}
 						options={[
 							{ value: 1, label: "测量左侧" },
 							{ value: 2, label: "测量右侧" },
@@ -26,13 +35,13 @@ export default function MeasureAction() {
 					<Button style={{ width: 200 }} size="large" type="primary">
 						开始测量
 					</Button>
-					<Button style={{ width: 200 }} size="large" type="primary">
+					<Button style={{ width: 200 }} size="large" type="primary" onClick={onAnalysisBtnClick}>
 						分析
 					</Button>
 					<Button style={{ width: 200 }} size="large" type="primary">
 						保存
 					</Button>
-                    <Checkbox onChange={onAfterSaveChange}>保存后自动开始新测量</Checkbox>
+					<Checkbox onChange={onAfterSaveChange}>保存后自动开始新测量</Checkbox>
 				</section>
 			</div>
 		</div>

src/pages/measure/components/SectionalView.tsx

@@ -0,0 +1,72 @@
+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<HTMLCanvasElement | null>(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 (
+		<div>
+			<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
+		</div>
+	);
+}