|
|
@ -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; |
|
|
|