Browse Source

完善校准功能

feat_upload_server_url_0416
LiLongLong 4 months ago
parent
commit
01fd739081
  1. 1
      src/pages/measure/components/MeasureAction.tsx
  2. 64
      src/pages/measure/components/konva/MeasurementCanvas.tsx

1
src/pages/measure/components/MeasureAction.tsx

@ -190,7 +190,6 @@ export default function MeasureAction() {
useEffect(() => {
// 处理任务状态消息
const handleStateMessage = (state: MeasureState["data"]) => {};
// 处理事件消息
const handleEventMessage = (type: TaskState["data"]) => {
setStatusList(prev => {

64
src/pages/measure/components/konva/MeasurementCanvas.tsx

@ -505,7 +505,6 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
};
//校准线
const [points, setPoints] = useState<{x:number;y:number}[]>([])
const renderMeasurementCalibration = () => {
if (!measurementCalibrationData || measurementCalibrationData.length === 0) return null;
const pts = measurementCalibrationData
@ -522,72 +521,9 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
tension={1}
lineCap="round"
lineJoin="round"
ref={lineRef}
draggable
onDragStart={onHandDragStrat}
onDragEnd={onHandleDragEnd}
onDragMove={onHandleDragMove}
/>
);
}
// 拖动开始时的 X 坐标
const [dragStartX, setDragStartX] = useState(0);
// 拖动开始时的 Y 坐标
const [dragStartY, setDragStartY] = useState(0);
// 拖动偏移量 X
const [dragOffsetX, setDragOffsetX] = useState(0);
// 拖动偏移量 Y
const [dragOffsetY, setDragOffsetY] = useState(0);
// 是否正在拖动
const [isDragging, setIsDragging] = useState(false);
// 折线的引用
const lineRef = useRef<any>(null);
// 拖动开始的处理函数
const onHandDragStrat = (e:any) => {
setIsDragging(true);
if (lineRef.current) {
const pos = lineRef.current.position();
setDragStartX(pos.x);
setDragStartY(pos.y);
const offset = stageRef.current.getPointerPosition();
if (offset) {
setDragOffsetX(offset.x);
setDragOffsetY(offset.y);
}
console.log('start========', pos.x, pos.y, offset.x, offset.y)
}
};
// 拖动过程中的处理函数
const onHandleDragMove = (e:any) => {
if (isDragging && lineRef.current && (e.nativeEvent || e.evt)) {
// const pos = lineRef.current.position();
// console.log('evt.offsetX---', evt.offsetX)
// console.log('evt.offsetY---', evt.offsetY)
// if(evt.offsetX){
// const newX = pos.x + (evt.offsetX - dragOffsetX);
// const newY = pos.y + (evt.offsetY - dragOffsetY);
// lineRef.current.position({ x: newX, y: newY });
// console.log('Move========', pos.x, pos.y, newX, newY)
// }
}
};
// 拖动结束的处理函数
const onHandleDragEnd = (e:any) => {
const { x, y } = e.target.position();
console.log('---x-------------', x/10, y/10)
const newPoints = measurementCalibrationData.map(point => {
return {
x: point.x + (x/10),
y: point.y + (y/10)
}
});
console.log('拖动结束后新坐标点:', newPoints);
};
const renderMeasurementCurveRight = () => {
if (measurementDataRight.length === 0) return null;

Loading…
Cancel
Save