zhangjiming
/
Outline
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

调整网格线，增加单位

feature/rail
zhangjiming 5 months ago
parent
40ea0a7efa
commit
8a8bded26a
3 changed files with 207 additions and 127 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/pages/measure/components/MeasureAction.tsx
  2. 77
      src/pages/measure/components/graph/GridLayer.tsx
  3. 253
      src/pages/measure/components/graph/StandardLayer.tsx

4
src/pages/measure/components/MeasureAction.tsx
View File

@ -20,9 +20,9 @@ export default function MeasureAction() {
return (
<div className="flex h-full ">
<div className="flex-none border relative">
<GridLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} columns={10} rows={7} cellNum={10} />
<GridLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} columns={10} rows={7} colCellNum={1} rowCellNum={2} />
<div className="absolute top-0">
<StandardLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} />
<StandardLayer width={840} height={600} leftPadding={30} rightPadding={10} topPadding={10} bottomPadding={30} columns={10} rows={7} />
</div>
</div>
<div className="w-[300px] flex-none py-6">

77
src/pages/measure/components/graph/GridLayer.tsx
View File

@ -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<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])
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绘图上下文

253
src/pages/measure/components/graph/StandardLayer.tsx
View File

@ -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<HTMLCanvasElement | null>(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;

Write Preview
Loading…
Cancel
Save