diff --git a/src/components/CanvasEditor/CanvasEditor.js b/src/components/CanvasEditor/CanvasEditor.js index 539b155..6f02cc9 100644 --- a/src/components/CanvasEditor/CanvasEditor.js +++ b/src/components/CanvasEditor/CanvasEditor.js @@ -148,7 +148,7 @@ function CanvasEditor({ if (isDragging || resizeData) { e.stopPropagation(); } - + if (currentDetection && mouseDownPos) { const dx = Math.abs(currentDetection.x2 - currentDetection.x1); const dy = Math.abs(currentDetection.y2 - currentDetection.y1); @@ -161,6 +161,8 @@ function CanvasEditor({ y1: Math.min(currentDetection.y1, currentDetection.y2), x2: Math.max(currentDetection.x1, currentDetection.x2), y2: Math.max(currentDetection.y1, currentDetection.y2), + kw: width / containerRef.current.offsetWidth, + kh: height / containerRef.current.offsetHeight }; const newDetections = [...localDetections, normalizedDetection]; diff --git a/src/services/AnnotationService.js b/src/services/AnnotationService.js index dce6ed5..594205e 100644 --- a/src/services/AnnotationService.js +++ b/src/services/AnnotationService.js @@ -52,10 +52,10 @@ export const createAnnotationImage = (videoRef, detections, containerRef) => { ctx.fillStyle = bgColor; ctx.strokeStyle = borderColor; - const x = Math.max(0, detection.x1 || 0); - const y = Math.max(0, detection.y1 || 0); - const width = Math.max(1, (detection.x2 || 0) - (detection.x1 || 0)); - const height = Math.max(1, (detection.y2 || 0) - (detection.y1 || 0)); + const x = Math.max(0, detection.x1 || 0) * detection.kw; + const y = Math.max(0, detection.y1 || 0) * detection.kh; + const width = Math.max(1, (detection.x2 || 0) - (detection.x1 || 0)) * detection.kw; + const height = Math.max(1, (detection.y2 || 0) - (detection.y1 || 0)) * detection.kh; ctx.fillRect(x, y, width, height); ctx.lineWidth = 2;