Pan and Zoom issue with segmentation on image with non-square pixels

[l-donnelly]

Prerequisites

• Which version are you using? (Is it latest?)
  yes.
• Are you reporting to the correct repository?
  yes.
• Did you search existing issues? (Were any related?)
  not that I could see.

Description

The semi-transparent, filled-in sections of a segmentation are not moving consistently with the solid segmentation boundary or the underlying image with non-square pixels.

Steps to Reproduce the issue

1. When I apply the brush tool using the left mouse button to create a segmentation
2. Then use the middle mouse button to pan or the left mouse button to zoom
3. The semi-transparent pixels in the segmentation do not move consistently with the segmentation boundary or the base image.

Expected behavior: The segmentation boundary and semi-transparent infill should undergo the same same translation, providing an accurate view of which pixels have been highlighted.

Actual behavior: The boundary maintains it's relative position with the underlying image correctly while the filled in pixels don't maintain there position along the axis with the greater pixel dimension.

CodeSandbox With Reproduction of Issue:

• https://codesandbox.io/s/segmentation-boundary-and-infill-not-translating-at-the-same-rate-in-images-with-non-square-pixels-obvfp?fontsize=14&hidenavigation=1&theme=dark

[dannyrb]

CC: @JamesAPetts

Thank you for the reproduction!

[MickeyMiao7]

It looks like the issue occurs when the values of rowPixelSpacing and columnPixelSpacing are different.
I spent some time trying to find out where the problem is but failed. Is there any insight about it? Is it caused by that the renderFill function calculates the coords wrongly?

[JamesAPetts]

@MickeyMiao7 Thanks for the report. It'll be this function that is causing issues:

cornerstoneTools/src/eventListeners/internals/renderSegmentationFill.js

Line 130 in 1682fa8

context.drawImage(

I.e. incorrect translation. The whole renderFill function has no mention of rowPixelSpacing and columPixelSpacing, so some correction factors may need to be introduced to fix this. I'd be happy to review a PR if you are willing to take a stab at the issue.

[MickeyMiao7]

@MickeyMiao7 Thanks for the report. It'll be this function that is causing issues:

cornerstoneTools/src/eventListeners/internals/renderSegmentationFill.js

Line 130 in 1682fa8

context.drawImage(

I.e. incorrect translation. The whole renderFill function has no mention of rowPixelSpacing and columPixelSpacing, so some correction factors may need to be introduced to fix this. I'd be happy to review a PR if you are willing to take a stab at the issue.

Thanks you for the prompt reply and insight @JamesAPetts !
I have submitted PR #1183
Plz take a look if you have time :)