You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.2 KiB
104 lines
3.2 KiB
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import points from "../../../../utils/measure.json";
|
|
import { createWebSocket, sharedWsUrl } from "../../../../services/socket";
|
|
const wsClient = createWebSocket(sharedWsUrl);
|
|
console.log(sharedWsUrl);
|
|
|
|
const pointArr: { x: number; y: number }[] = [];
|
|
|
|
export default function ResultLayer(props: {
|
|
width: number;
|
|
height: number;
|
|
leftPadding: number;
|
|
rightPadding: number;
|
|
topPadding: number;
|
|
bottomPadding: number;
|
|
columns: number;
|
|
rows: number;
|
|
visibility: 'hidden' | 'visible';
|
|
}) {
|
|
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 unitPx = xStepPx / 10;
|
|
const pointsPx = points.map(p => ({ x: p.x * unitPx, y: p.y * unitPx + 4 })); // 特意偏移
|
|
|
|
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
|
|
|
const [rtPoints, setRtPoints] = useState<{ x: number; y: number }[]>([]);
|
|
|
|
// const draw = useCallback(
|
|
// (ctx: CanvasRenderingContext2D) => {
|
|
// for (let idx = 0; idx < pointsPx.length; idx++) {
|
|
// if (idx === 0) {
|
|
// ctx.moveTo(pointsPx[idx].x, pointsPx[idx].y);
|
|
// } else {
|
|
// ctx.lineTo(pointsPx[idx].x, pointsPx[idx].y);
|
|
// }
|
|
// }
|
|
// ctx.stroke();
|
|
// },
|
|
// [pointsPx, xEndPx, xStartPx, yStartPx, yStepPx]
|
|
// );
|
|
|
|
useEffect(() => {
|
|
const subscription = wsClient.dataOb.subscribe(data => {
|
|
if (data.path === "/measurement-task/get-task-state") {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return;
|
|
|
|
if ('event' in data.data && data.data.event === "START_RECORD_SIG") {
|
|
// setRtPoints([]);
|
|
pointArr.length = 0;
|
|
ctx.resetTransform();
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
setTimeout(() => {
|
|
ctx.strokeStyle = "blue";
|
|
const xOffset = (xEndPx - xStartPx) / 2;
|
|
const yOffset = yStepPx * 2;
|
|
ctx.translate(xStartPx + xOffset, yStartPx + yOffset);
|
|
ctx.beginPath();
|
|
}, 0);
|
|
} else if ('event' in data.data && data.data.event === "END_RECORD_SIG") {
|
|
//
|
|
}
|
|
} else if (data.path === "/measurement-task/profile-record-ctrl-sig") {
|
|
// console.log(data.data);
|
|
// setRtPoints(rtPoints.concat([data.data]));
|
|
pointArr.push(data.data);
|
|
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return;
|
|
|
|
const pointsPx = pointArr.map(p => ({ x: p.x * unitPx, y: p.y * unitPx }));
|
|
|
|
for (let idx = 0; idx < pointsPx.length; idx++) {
|
|
if (idx === 0) {
|
|
ctx.moveTo(pointsPx[idx].x, pointsPx[idx].y+6);
|
|
} else {
|
|
ctx.lineTo(pointsPx[idx].x, pointsPx[idx].y+6);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
});
|
|
wsClient.connect();
|
|
return () => subscription.unsubscribe();
|
|
}, [rtPoints, unitPx, xEndPx, xStartPx, yStartPx, yStepPx]);
|
|
|
|
return (
|
|
<div style={{visibility: props.visibility}}>
|
|
<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
|
|
</div>
|
|
);
|
|
}
|