fix: #1176 Pan and Zoom issue with segmentation on image with non-squ…

…are pixels (#1183)

Co-authored-by: MickeyMiao7 <[email protected]>

src/eventListeners/internals/renderSegmentationFill.js

@@ -122,10 +122,7 @@ export function renderFill(evt, labelmapCanvas, isActiveLabelMap) {
 
   transformCanvasContext(context, canvas, viewport);
 
-  const canvasViewportTranslation = {
-    x: viewport.translation.x * viewport.scale,
-    y: viewport.translation.y * viewport.scale,
-  };
+  const canvasViewportTranslation = getCanvasViewportTranslation(eventData);
 
   context.drawImage(
     labelmapCanvas,
@@ -142,3 +139,28 @@ export function renderFill(evt, labelmapCanvas, isActiveLabelMap) {
 
   resetCanvasContextTransform(context);
 }
+
+/**
+ * GetCanvasViewportTranslation - Returns translation coordinations for
+ * canvas viewport with calculation of image row/column pixel spacing.
+ *
+ * @param  {Object} eventData The data associated with the event.
+ * @returns  {Object} The coordinates of the translation.
+ */
+function getCanvasViewportTranslation(eventData) {
+  const { viewport, image } = eventData;
+
+  let widthScale = viewport.scale;
+  let heightScale = viewport.scale;
+
+  if (image.rowPixelSpacing < image.columnPixelSpacing) {
+    widthScale *= image.columnPixelSpacing / image.rowPixelSpacing;
+  } else if (image.columnPixelSpacing < image.rowPixelSpacing) {
+    heightScale *= image.rowPixelSpacing / image.columnPixelSpacing;
+  }
+
+  return {
+    x: viewport.translation.x * widthScale,
+    y: viewport.translation.y * heightScale,
+  };
+}