diff --git a/src/eventListeners/internals/renderSegmentationFill.js b/src/eventListeners/internals/renderSegmentationFill.js index ae57151c8..f4f1f69cf 100644 --- a/src/eventListeners/internals/renderSegmentationFill.js +++ b/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, + }; +}