From 97e6e3d65a8ad54d7abe686e9c235e25eb02f218 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Thu, 20 Mar 2025 20:20:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=95=E7=A4=BA60=E8=BD=A8=E5=9F=BA=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/konva/MeasurementCanvas.tsx | 77 +++++++++---------------------
 src/pages/Measure.tsx                      | 27 ++++++++---
 src/utils/constant.ts                      |  9 ++++
 3 files changed, 51 insertions(+), 62 deletions(-)
 create mode 100644 src/utils/constant.ts

diff --git a/src/components/konva/MeasurementCanvas.tsx b/src/components/konva/MeasurementCanvas.tsx
index 0af7451..a65b95a 100644
--- a/src/components/konva/MeasurementCanvas.tsx
+++ b/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,60 +535,27 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
         };
 
         return (
-            <div
-                style={{
-                    width,
-                    height,
-                    border: "1px solid #ccc",
-                    position: "relative",
-                    touchAction: "none",
-                }}
+            <Stage
+                ref={stageRef}
+                width={width}
+                height={height}
+                onPointerDown={handlePointerDown}
+                onPointerMove={handlePointerMove}
+                onPointerUp={handlePointerUp}
+                onPointerCancel={handlePointerCancel}
+                onWheel={handleWheel}
+                style={{ background: "#fff" }}
             >
-                <Stage
-                    ref={stageRef}
-                    width={width}
-                    height={height}
-                    onPointerDown={handlePointerDown}
-                    onPointerMove={handlePointerMove}
-                    onPointerUp={handlePointerUp}
-                    onPointerCancel={handlePointerCancel}
-                    onWheel={handleWheel}
-                    style={{ background: "#fff" }}
-                >
-                    <Layer>
-                        {showGrid && renderGridAndAxes()}
-                        {showBenchmark && renderBenchmarkShapes()}
-                        {renderMeasurementCurveLeft()}
-                        {renderMeasurementCurveRight()}
-                        {renderMeasurementCurve()}
-                        {showAnalysis && renderAnalysis()}
-                    </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>
+                <Layer>
+                    {showGrid && renderGridAndAxes()}
+                    {showBenchmark && renderBenchmarkShapes()}
+                    {renderMeasurementCurveLeft()}
+                    {renderMeasurementCurveRight()}
+                    {renderMeasurementCurve()}
+                    {showAnalysis && renderAnalysis()}
+                </Layer>
+                {showCoordinates && <Layer>{renderCoordinates()}</Layer>}
+            </Stage>
         );
     }
 );
diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx
index 59fe79b..29c0c90 100644
--- a/src/pages/Measure.tsx
+++ b/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}
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
new file mode 100644
index 0000000..62e28d8
--- /dev/null
+++ b/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\"}]"
+}
\ No newline at end of file