根据接口返回的角度，绘制倾斜角

src/pages/measure/components/graph/MarkLayer.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { calculatePointOnCircle, findSymmetricPoint } from "../../../../utils";
+import { AnalyzeAngle } from "../../../../services/measure/type";
 
 const marks = [
 	{ x: 9.949007022412, y: 0.1650166186941, degree: -80 },
@@ -17,7 +18,8 @@ export default function MarkLayer(props: {
 	bottomPadding: number;
 	columns: number;
 	rows: number;
-    visibility: 'hidden' | 'visible'; 
+	visibility: "hidden" | "visible";
+	angles: AnalyzeAngle[];
 }) {
 	const xStartPx = props.leftPadding;
 	const xEndPx = props.width - props.rightPadding;
@@ -29,18 +31,17 @@ export default function MarkLayer(props: {
 	const unitPx = xStepPx / 10;
 	const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
-	const calcPoints = useCallback(
-		(arr: typeof marks) => {
-			return arr.map(p => {
+	const calcPoints = useCallback(() => {
+		return props.angles
+			.map(p => ({ ...p, y: -p.y, degree: -p.degree }))
+			.map(p => {
 				const p1 = calculatePointOnCircle(p.x * unitPx, p.y * unitPx, xStepPx / 2, p.degree);
 				const p2 = findSymmetricPoint(p1.x, p1.y, p.x * unitPx, p.y * unitPx);
 				// 角度文本，向外偏移
 				const p3 = calculatePointOnCircle(p.x * unitPx, p.y * unitPx, xStepPx / 2 + 10, p.degree);
 				return [p1, p2, p3];
 			});
-		},
-		[unitPx, xStepPx]
-	);
+	}, [props.angles, unitPx, xStepPx]);
 
 	const draw = useCallback(
 		(ctx: CanvasRenderingContext2D) => {
@@ -53,7 +54,7 @@ export default function MarkLayer(props: {
 			ctx.textAlign = "center";
 			ctx.font = "normal 14px system";
 
-			const lines = calcPoints(marks);
+			const lines = calcPoints();
 			for (let idx = 0; idx < lines.length; idx++) {
 				const line = lines[idx];
 				ctx.moveTo(line[0].x, line[0].y);
@@ -62,14 +63,14 @@ export default function MarkLayer(props: {
 				ctx.save();
 				ctx.translate(line[2].x, line[2].y);
 				ctx.rotate(((marks[idx].degree + 90) * Math.PI) / 180);
-				ctx.fillText(`${-marks[idx].degree}°`, 0, 0);
+				ctx.fillText(props.angles[idx].describe, 0, 0);
 				ctx.restore();
 			}
 			ctx.stroke();
 			// ctx.fillStyle = "skyblue"; // 设置填充颜色
 			// ctx.fillRect(50, 50, 150, 100); // 绘制一个矩形
 		},
-		[calcPoints, xEndPx, xStartPx, yStartPx, yStepPx]
+		[calcPoints, props.angles, xEndPx, xStartPx, yStartPx, yStepPx]
 	);
 
 	useEffect(() => {
@@ -82,7 +83,7 @@ export default function MarkLayer(props: {
 	}, [draw]);
 
 	return (
-		<div  style={{visibility: props.visibility}}>
+		<div style={{ visibility: props.visibility }}>
 			<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
 		</div>
 	);