cornerstonejs / cornerstone

JavaScript library to display interactive medical images including but not limited to DICOM
https://docs.cornerstonejs.org/
MIT License
2.04k stars 598 forks source link

Incorrect pan behaviour for non-square image #533

Open deerawan opened 3 years ago

deerawan commented 3 years ago

Specs

Cornerstonejs 2.2.8

Description

I noticed different panning behaviour between square vs non-square image. The behaviour for non-square image seems broken to me. In my case, I have a non-square image 512 x 44. Obviously, it has different values for rowPixelSpacing and columnPixelSpacing

Image 2021-07-16 at 11 27 23

This is the illustration about the issue. The image doesn't follow the cursor position.

Image 2021-07-16 at 11 33 09

The code for producing the error above is in this codepen https://codepen.io/deerawan/pen/JjNWxBz. In that codepen, I modified some attributes in exampleImageIdLoader.js to follow my non-square image stats as seen here

Analysis

Seems the viewport heightScale calculation here when the rowPixelSpacing and columnPixelSpacing have different value contributes to this error and affects the translationY behaviour.

https://github.com/cornerstonejs/cornerstone/blob/master/src/internal/calculateTransform.js#L36

swederik commented 3 years ago

Oh Hmm that's interesting... do you also see this behaviour with cornerstoneTools or just with the example?

On Fri., Jul. 16, 2021, 3:38 a.m. Budi Irawan, @.***> wrote:

Specs

Cornerstonejs 2.2.8 Description

I noticed different panning behaviour between square vs non-square image. The behaviour for non-square image seems broken to me. In my case, I have a non-square image 512 x 44. Obviously, it has different values for rowPixelSpacing and columnPixelSpacing

[image: Image 2021-07-16 at 11 27 23] https://user-images.githubusercontent.com/1243921/125877961-1702eeff-66d3-47a1-8da0-c71c1a94a0bb.jpg

This is the illustration about the issue. The image doesn't follow the cursor position.

[image: Image 2021-07-16 at 11 33 09] https://user-images.githubusercontent.com/1243921/125878294-855a4e45-4efa-4cba-a639-1b106802d67e.gif

The code for producing the error above is in this codepen https://codepen.io/deerawan/pen/JjNWxBz. In that codepen, I modified some attributes in exampleImageIdLoader.js to follow my non-square image stats as seen here https://github.com/deerawan/cornerstone/commit/91eedd1edbf2dc16dca320d28d2e6833d3008629#diff-3f06ca055cc403ac18421f769a1df146c32aa33a767a92875043a4b0f205c8d9R38 Analysis

Seems the viewport heightScale calculation here when the rowPixelSpacing and columnPixelSpacing have different value contributes to this error and affects the translationY behaviour.

https://github.com/cornerstonejs/cornerstone/blob/master/src/internal/calculateTransform.js#L36

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cornerstonejs/cornerstone/issues/533, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEUMMLSU2YXRNF5BNWX4CTTX6ERZANCNFSM5AOUIT5Q .

deerawan commented 3 years ago

@swederik oh I haven't tried with the cornerstoneTools. I just knew about it 🤣 . Let me try and will give you an update.