Fix Object Detection box display

hans00 · Oct 31, 2023 · efc93fa · efc93fa
1 parent 103cadc
commit efc93fa
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/components/models/ObjectDetection.tsx b/components/models/ObjectDetection.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import uniqolor from 'uniqolor';
-import { Canvas, Image, useImage, Text, Rect } from '@shopify/react-native-skia';
+import { Canvas, Image, useImage, Text, Rect, Group } from '@shopify/react-native-skia';
 import SelectField from '../form/SelectField';
 import TextField from '../form/TextField';
 import Button from '../form/Button';
@@ -81,20 +81,24 @@ export function Interact({ settings: { model }, runPipe }: InteractProps): JSX.E
           const [x, y, w, h] = calcPosition(
             'contain',
             size.width, size.height,
-            img.width(), img.height(),
+            img?.width(), img?.height(),
             xmin, ymin, xmax, ymax,
           );
           return (
             <>
-              <Rect
-                key={`rect-${i}`}
-                x={x}
-                y={y}
-                width={w}
-                height={h}
-                color={color}
+              <Group
+                key={`group-${i}`}
+                style="stroke"
                 strokeWidth={2}
-              />
+                color={color}
+              >
+                <Rect
+                  x={x}
+                  y={y}
+                  width={w}
+                  height={h}
+                />
+              </Group>
               <Text
                 key={`text-${i}`}
                 x={x > 10 ? x : x + 4}

diff --git a/utils/image.ts b/utils/image.ts
@@ -35,12 +35,14 @@ export function calcPosition(
   x: number,
   y: number
 ): [number, number, number, number] {
-  const containerRatio = containerWidth / containerHeight;
-  const imageRatio = imageWidth / imageHeight;
-  const ratio = mode === 'contain' ? Math.min(containerRatio, imageRatio) : Math.max(containerRatio, imageRatio);
+  const w = Math.min(containerWidth, imageWidth);
+  const h = Math.min(containerHeight, imageHeight);
+  const ratio = mode === 'contain' ? Math.min(w / imageWidth, h / imageHeight) : Math.max(w / imageWidth, h / imageHeight);
+  const offsetX = (containerWidth - imageWidth * ratio) / 2;
+  const offsetY = (containerHeight - imageHeight * ratio) / 2;
   const newWidth = imageWidth * ratio;
   const newHeight = imageHeight * ratio;
-  const newX = (containerWidth - newWidth) * x;
-  const newY = (containerHeight - newHeight) * y;
+  const newX = (containerWidth - newWidth) * x + offsetX;
+  const newY = (containerHeight - newHeight) * y + offsetY;
   return [newX, newY, newWidth, newHeight];
 }