展示60轨基线

src/components/konva/MeasurementCanvas.tsx

@@ -95,8 +95,8 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
             logicalExtent = { minX: -100, maxX: 100, minY: -100, maxY: 100 },
             gridStep = 1,
             showGrid = true,
-            showScale = false,
-            scaleInterval = 10,
+            // showScale = false,
+            // scaleInterval = 10,
             showCoordinates = false,
             coordinateInterval = 1,
             pixelPerMm = 10,
@@ -535,15 +535,6 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
         };
 
         return (
-            <div
-                style={{
-                    width,
-                    height,
-                    border: "1px solid #ccc",
-                    position: "relative",
-                    touchAction: "none",
-                }}
-            >
             <Stage
                 ref={stageRef}
                 width={width}
@@ -565,30 +556,6 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
                 </Layer>
                 {showCoordinates && <Layer>{renderCoordinates()}</Layer>}
             </Stage>
-                {showScale && (
-                    <div
-                        style={{
-                            position: "absolute",
-                            bottom: 10,
-                            left: 10,
-                            background: "rgba(255,255,255,0.8)",
-                            padding: "2px 4px",
-                            border: "1px solid #ccc",
-                            fontSize: 12,
-                            pointerEvents: "none",
-                        }}
-                    >
-                        <div
-                            style={{
-                                width: gridStep * scaleInterval * scale,
-                                borderBottom: "2px solid black",
-                                marginBottom: 2,
-                            }}
-                        ></div>
-                        <div>{`${gridStep * scaleInterval} mm`}</div>
-                    </div>
-                )}
-            </div>
         );
     }
 );

src/pages/Measure.tsx

@@ -1,8 +1,12 @@
 import StepItem from '../components/StepItem';
 import { Link, useNavigate } from 'react-router-dom';
 import CustomNavBar from '../components/CustomNavBar';
-import MeasurementCanvas, { MeasurementCanvasRef } from '../components/konva/MeasurementCanvas';
-import { useRef } from 'react';
+import MeasurementCanvas, {
+  BenchmarkShape,
+  MeasurementCanvasRef,
+} from '../components/konva/MeasurementCanvas';
+import { useEffect, useRef } from 'react';
+import { rail6001 } from '../utils/constant';
 
 export default function Measure() {
   const navigate = useNavigate();
@@ -12,6 +16,15 @@ export default function Measure() {
   const onSaveClick = () => {
     navigate('/measure/save');
   };
+
+  useEffect(() => {
+    const benchmarkShapes = JSON.parse(rail6001.points) as BenchmarkShape[];
+    if (canvasRef.current) {
+      console.log('解析后的基础图形数据：', benchmarkShapes);
+      canvasRef.current.setBenchmarkData(benchmarkShapes);
+    }
+  }, []);
+
   return (
     <div className="relative pt-[--navBarHeight]">
       <div className="absolute top-0 w-full z-10">
@@ -19,15 +32,15 @@ export default function Measure() {
       </div>
 
       <main className="home-page-content overflow-x-hidden overflow-y-auto">
-        <div className="relative h-0 p-0 pb-[75%]">
+        <div className="relative h-0 p-0 pb-[70%]">
           <div className="absolute left-0 right-0 top-0 bottom-0 bg-title">
             <MeasurementCanvas
               width={window.innerWidth}
-              height={window.innerWidth * 0.75}
-              logicalExtent={{ minX: -50, maxX: 50, minY: -20, maxY: 60 }}
-              gridStep={1}
+              height={window.innerWidth * 0.7}
+              logicalExtent={{ minX: -45, maxX: 45, minY: -18, maxY: 52 }}
+              gridStep={3}
               origin={{ x: 0, y: 20 }}
-              pixelPerMm={window.innerWidth / 100}
+              pixelPerMm={window.innerWidth / 90}
               maxZoom={5}
               showGrid={true}
               showBenchmark={true}

src/utils/constant.ts

@@ -0,0 +1,9 @@
+export const rail6001 = {
+    id: 1,
+    createTime: "2025-03-03 12:31:25",
+    updateTime: "2025-03-03 12:31:25",
+    name: "60型标准轨",
+    code: "6001",
+    points: "[{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": -9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -9.949,\"y\": 0.165},\"end\": {\"x\": -25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -25.35,\"y\": 2.185},\"end\": {\"x\": -35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"line\",\"start\": {\"x\": -35.4,\"y\": 14.2},\"end\": {\"x\": -36.317,\"y\": 32.539},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": -36.317,\"y\": 32.539},\"end\": {\"x\": -32.904,\"y\": 37.532},\"radius\": 5,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"line\",\"start\": {\"x\": -32.904,\"y\": 37.532},\"end\": {\"x\": -20,\"y\": 41.833},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": 9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#000000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": 9.949,\"y\": 0.165},\"end\": {\"x\": 25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 25.35,\"y\": 2.185},\"end\": {\"x\": 35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"line\",\"start\": {\"x\": 35.4,\"y\": 14.2},\"end\": {\"x\": 36.317,\"y\": 32.539},\"color\":\"#000000\"},{\"type\":\"arc\",\"start\": {\"x\": 36.317,\"y\": 32.539},\"end\": {\"x\": 32.904,\"y\": 37.532},\"radius\": 5,\"color\":\"#000000\",\"side\":\"left\"},{\"type\":\"line\",\"start\": {\"x\": 32.904,\"y\": 37.532},\"end\": {\"x\": 20,\"y\": 41.833},\"color\":\"#000000\"}]",
+    calPoints: "[{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": -9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#339900\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -9.949,\"y\": 0.165},\"end\": {\"x\": -25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#336699\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": -25.35,\"y\": 2.185},\"end\": {\"x\": -35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#660000\",\"side\":\"right\"},{\"type\":\"arc\",\"start\": {\"x\": 0,\"y\": 0},\"end\": {\"x\": 9.949,\"y\": 0.165},\"radius\": 300,\"color\":\"#99CCCC\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 9.949,\"y\": 0.165},\"end\": {\"x\": 25.35,\"y\": 2.185},\"radius\": 80,\"color\":\"#CC0033\",\"side\":\"left\"},{\"type\":\"arc\",\"start\": {\"x\": 25.35,\"y\": 2.185},\"end\": {\"x\": 35.4,\"y\": 14.2},\"radius\": 13,\"color\":\"#CC6600\",\"side\":\"left\"}]"
+}