From 8a8bded26afc0fea7f21df64a6d081cd0928d251 Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Wed, 5 Mar 2025 18:14:43 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=BD=91=E6=A0=BC=E7=BA=BF?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=8D=95=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/measure/components/MeasureAction.tsx | 4 +- src/pages/measure/components/graph/GridLayer.tsx | 77 ++++--- .../measure/components/graph/StandardLayer.tsx | 253 +++++++++++++-------- 3 files changed, 207 insertions(+), 127 deletions(-) diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx index bd09e85..03abca2 100644 --- a/src/pages/measure/components/MeasureAction.tsx +++ b/src/pages/measure/components/MeasureAction.tsx @@ -20,9 +20,9 @@ export default function MeasureAction() { return (
- +
- +
diff --git a/src/pages/measure/components/graph/GridLayer.tsx b/src/pages/measure/components/graph/GridLayer.tsx index ed242e0..fb36c71 100644 --- a/src/pages/measure/components/graph/GridLayer.tsx +++ b/src/pages/measure/components/graph/GridLayer.tsx @@ -12,45 +12,62 @@ export default function GridLayer(props: { bottomPadding: number; columns: number; rows: number; - cellNum: number; + colCellNum: number; + rowCellNum: 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 xUnitPx = xStepPx / props.colCellNum; 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 yUnitPx = yStepPx / props.rowCellNum; 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]) + const drawGrid = useCallback( + (ctx: CanvasRenderingContext2D) => { + ctx.beginPath(); + ctx.strokeStyle = subLineColor; + for (let i = 1; i < props.columns * props.colCellNum; ++i) { + if (i % props.colCellNum === 0) continue; + ctx.moveTo(xStartPx + xUnitPx * i, yStartPx); + ctx.lineTo(xStartPx + xUnitPx * i, yEndPx); + } + for (let j = 1; j < props.rows * props.rowCellNum; ++j) { + if (j % props.rowCellNum === 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.colCellNum, + props.columns, + props.rowCellNum, + props.rows, + xEndPx, + xStartPx, + xStepPx, + xUnitPx, + yEndPx, + yStartPx, + yStepPx, + yUnitPx, + ] + ); useEffect(() => { // 获取canvas的2D绘图上下文 diff --git a/src/pages/measure/components/graph/StandardLayer.tsx b/src/pages/measure/components/graph/StandardLayer.tsx index fde7c9f..d6bed8f 100644 --- a/src/pages/measure/components/graph/StandardLayer.tsx +++ b/src/pages/measure/components/graph/StandardLayer.tsx @@ -31,104 +31,167 @@ export default function StandardLayer(props: { rightPadding: number; topPadding: number; bottomPadding: number; + columns: number; + rows: number; }) { + const xStartPx = props.leftPadding; + const xEndPx = props.width - props.rightPadding; + const xStepPx = (props.width - props.leftPadding - props.rightPadding) / props.columns; + const yStartPx = props.topPadding; + const yEndPx = props.height - props.bottomPadding; + const yStepPx = (props.height - props.topPadding - props.bottomPadding) / props.rows; + const canvasRef = useRef(null); - const draw = useCallback((ctx: CanvasRenderingContext2D) => { - // 使用context对象进行绘图 - ctx.fillStyle = "blue"; - ctx.strokeStyle = "blue"; - - ctx.translate(400, 100); - ctx.moveTo(-400, 0); - ctx.lineTo(400, 0); - ctx.moveTo(0, -100); - ctx.lineTo(0, 500); - ctx.stroke(); - - ctx.beginPath(); - ctx.strokeStyle = "red"; - // ---- 右侧 - let point0 = pointsRight[0]; - let point1 = pointsRight[1]; - ctx.moveTo(point0[0], point0[1]); - let param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 300 * unitPx); - console.log(param); - ctx.arc(param.center.x, param.center.y, 300 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); - - point0 = pointsRight[1]; - point1 = pointsRight[2]; - ctx.moveTo(point0[0], point0[1]); - param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 80 * unitPx); - console.log(param); - ctx.arc(param.center.x, param.center.y, 80 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); - - point0 = pointsRight[2]; - point1 = pointsRight[3]; - ctx.moveTo(point0[0], point0[1]); - param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 13 * unitPx); - console.log(param); - ctx.arc(param.center.x, param.center.y, 13 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); - - point0 = pointsRight[3]; - point1 = pointsRight[4]; - ctx.moveTo(point0[0], point0[1]); - ctx.lineTo(point1[0], point1[1]); - - point0 = pointsRight[4]; - point1 = pointsRight[5]; - ctx.moveTo(point0[0], point0[1]); - param = calculateCircleAbove(point0[0], point0[1], point1[0], point1[1], 5 * unitPx); - console.log(param); - ctx.arc(param.center.x, param.center.y, 5 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); - - point0 = pointsRight[5]; - point1 = pointsRight[6]; - ctx.moveTo(point0[0], point0[1]); - ctx.lineTo(point1[0], point1[1]); - - // ---- 左侧 - point0 = pointsLeft[0]; - point1 = pointsLeft[1]; - ctx.moveTo(point0[0], point0[1]); - ctx.lineTo(point1[0], point1[1]); - - point0 = pointsLeft[1]; - point1 = pointsLeft[2]; - ctx.moveTo(point0[0], point0[1]); - param = calculateCircleAbove(point0[0], point0[1], point1[0], point1[1], 5 * unitPx); - console.log(param); - ctx.arc(param.center.x, param.center.y, 5 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); - - point0 = pointsLeft[2]; - point1 = pointsLeft[3]; - ctx.moveTo(point0[0], point0[1]); - ctx.lineTo(point1[0], point1[1]); - - point0 = pointsLeft[3]; - point1 = pointsLeft[4]; - ctx.moveTo(point0[0], point0[1]); - param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 13 * unitPx); - console.log(param); - ctx.arc(param.center.x, param.center.y, 13 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); - - point0 = pointsLeft[4]; - point1 = pointsLeft[5]; - ctx.moveTo(point0[0], point0[1]); - param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 80 * unitPx); - console.log(param); - ctx.arc(param.center.x, param.center.y, 80 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); - - point0 = pointsLeft[5]; - point1 = pointsLeft[6]; - ctx.moveTo(point0[0], point0[1]); - param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 300 * unitPx); - console.log(param); - ctx.arc(param.center.x, param.center.y, 300 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); - - ctx.stroke(); - // ctx.fillRect(100, 100, 150, 100); // 绘制一个矩形 - }, []); + const draw = useCallback( + (ctx: CanvasRenderingContext2D) => { + ctx.strokeStyle = "#999"; + // 偏移原点 + const xOffset = (xEndPx - xStartPx) / 2; + const yOffset = yStepPx * 2; + const yMax = yEndPx - yStartPx - yOffset; + ctx.translate(xStartPx + xOffset, yStartPx + yOffset); + // 绘制原点交叉线 + ctx.moveTo(-xOffset, 0); + ctx.lineTo(xOffset, 0); + ctx.moveTo(0, -yOffset); + ctx.lineTo(0, yMax); + ctx.stroke(); + + // 绘制x轴y轴 单位数值 + ctx.beginPath(); + ctx.fillStyle = "#333333"; + ctx.textAlign = "center"; + ctx.font = "normal 14px system"; + for (let index = -4; index < 5; index++) { + ctx.fillText((index * 10).toString(), xStepPx * index, yMax + 20); + } + for (let index = -1; index < 5; index++) { + ctx.fillText((-index * 10).toString(), -xOffset - (index > 0 ? 18 : 14), yStepPx * index + 4); + } + + // 绘制标准线 + ctx.beginPath(); + ctx.strokeStyle = "red"; + // ---- 右侧 + let point0 = pointsRight[0]; + let point1 = pointsRight[1]; + ctx.moveTo(point0[0], point0[1]); + let param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 300 * unitPx); + console.log(param); + ctx.arc( + param.center.x, + param.center.y, + 300 * unitPx, + param.anglesForCenter.startAngle, + param.anglesForCenter.endAngle + ); + + point0 = pointsRight[1]; + point1 = pointsRight[2]; + ctx.moveTo(point0[0], point0[1]); + param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 80 * unitPx); + console.log(param); + ctx.arc( + param.center.x, + param.center.y, + 80 * unitPx, + param.anglesForCenter.startAngle, + param.anglesForCenter.endAngle + ); + + point0 = pointsRight[2]; + point1 = pointsRight[3]; + ctx.moveTo(point0[0], point0[1]); + param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 13 * unitPx); + console.log(param); + ctx.arc( + param.center.x, + param.center.y, + 13 * unitPx, + param.anglesForCenter.startAngle, + param.anglesForCenter.endAngle + ); + + point0 = pointsRight[3]; + point1 = pointsRight[4]; + ctx.moveTo(point0[0], point0[1]); + ctx.lineTo(point1[0], point1[1]); + + point0 = pointsRight[4]; + point1 = pointsRight[5]; + ctx.moveTo(point0[0], point0[1]); + param = calculateCircleAbove(point0[0], point0[1], point1[0], point1[1], 5 * unitPx); + console.log(param); + ctx.arc(param.center.x, param.center.y, 5 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); + + point0 = pointsRight[5]; + point1 = pointsRight[6]; + ctx.moveTo(point0[0], point0[1]); + ctx.lineTo(point1[0], point1[1]); + + // ---- 左侧 + point0 = pointsLeft[0]; + point1 = pointsLeft[1]; + ctx.moveTo(point0[0], point0[1]); + ctx.lineTo(point1[0], point1[1]); + + point0 = pointsLeft[1]; + point1 = pointsLeft[2]; + ctx.moveTo(point0[0], point0[1]); + param = calculateCircleAbove(point0[0], point0[1], point1[0], point1[1], 5 * unitPx); + console.log(param); + ctx.arc(param.center.x, param.center.y, 5 * unitPx, param.anglesForCenter.startAngle, param.anglesForCenter.endAngle); + + point0 = pointsLeft[2]; + point1 = pointsLeft[3]; + ctx.moveTo(point0[0], point0[1]); + ctx.lineTo(point1[0], point1[1]); + + point0 = pointsLeft[3]; + point1 = pointsLeft[4]; + ctx.moveTo(point0[0], point0[1]); + param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 13 * unitPx); + console.log(param); + ctx.arc( + param.center.x, + param.center.y, + 13 * unitPx, + param.anglesForCenter.startAngle, + param.anglesForCenter.endAngle + ); + + point0 = pointsLeft[4]; + point1 = pointsLeft[5]; + ctx.moveTo(point0[0], point0[1]); + param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 80 * unitPx); + console.log(param); + ctx.arc( + param.center.x, + param.center.y, + 80 * unitPx, + param.anglesForCenter.startAngle, + param.anglesForCenter.endAngle + ); + + point0 = pointsLeft[5]; + point1 = pointsLeft[6]; + ctx.moveTo(point0[0], point0[1]); + param = calculateCircleBelow(point0[0], point0[1], point1[0], point1[1], 300 * unitPx); + console.log(param); + ctx.arc( + param.center.x, + param.center.y, + 300 * unitPx, + param.anglesForCenter.startAngle, + param.anglesForCenter.endAngle + ); + + ctx.stroke(); + // ctx.fillRect(100, 100, 150, 100); // 绘制一个矩形 + }, + [xEndPx, xStartPx, xStepPx, yEndPx, yStartPx, yStepPx] + ); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return;