How to make sense of screen coordinates x,y, yMin, yMax etc

This thread is a result of the successfully answered thread here:
https://forum.unity3d.com/threads/texture2d-readpixels-correct-coordinates.473001/

To get an understanding of my issue think of how most photo viewing apps display the portrait image centred in view with correct aspect ratio mostly resulting in a blank border to the top and bottom of the photo padding out the screen and likewise when in landscape these blank borders appear to the left and right.

This is based for test purposes on a screen size of 1080 x 1920

I have in my setup three panels, top, middle and bottom all with AspectRatioFitter set to Fit In Parent.

In the editor top and bottom panels aspect ratio is set to 2.57 and the middle to 1

When the middle panel loads a portrait photo the aspect ratio is calculated to 0.75 to ensure the photo fits in the container maintaining the correct aspect. Super! And the thread above allows me to correctly snap a screenshot of just the photo area rect. Perfect.

But...

I now need to be able to recalculate the correct aspect ratio for the top and bottom panels so they mask the correct blank borders and I find in the editor if I change their aspectratio to 4.51 then they perfectly match the blank border and no longer obscure any of the photo.

I have been up all night working on this and cannot make any sense of the values I get in debug to help me figure out how to calculate the required aspect ratio.

// starts at 1
photoAspectRatioFitter.aspectRatio:1

// starts at 2.57
photoMaskOneAspectRatioFitter.aspectRatio:2.57

// starts at 2.57
photoMaskTwoAspectRatioFitter.aspectRatio:2.57

// our screen size in editor
Screen Size: 1080 1920

// rect before photo load
PhotoPanelx:540.00, y:960.00, width:519.62, height:519.62)

/*
when photo is loaded and aspect ratio is updated to 0.75 below the rect above becomes:
(x:540.00, y:960.00, width:519.62, height:692.82)
*/
// the position of the pivot (dead centre)
PhotoPanel.rect.pos.x: 540 PhotoPanel.rect.pos.y: 960

// this makes sense, kind of
PhotoPanel.rect.yMin: 960 PhotoPanel.rect.yMax: 1479.615

// rect of top panel (pivot top left)
PhotoMaskOnePanelx:0.00, y:1920.00, width:519.62, height:202.18)

// kinda makes sense
PhotoMaskOnePanel.rect.pos.x: 0 PhotoMaskOnePanel.rect.pos.y: 1920

// dont get these values
PhotoMaskOnePanel.rect.yMin: 1920 PhotoMaskOnePanel.rect.yMax: 2122.185

// rect bottom panel (pivot bottom left)
PhotoMaskTwoPanelx:0.00, y:0.00, width:519.62, height:202.18)

// mm yes makes sense
PhotoMaskTwoPanel.rect.pos.x: 0 PhotoMaskTwoPanel.rect.pos.y: 0

// dont get difference in yMax of this compared to top panel's yMax
PhotoMaskTwoPanel.rect.yMin: 0 PhotoMaskTwoPanel.rect.yMax: 202.1849

// the actual size of the photo being loaded
tex.width: 2448, tex.height: 3264

// the new aspect ratio based on loaded photo
photoAspectRatioFitter.aspectRatio:0.75

Can anyone help explain?

 

Code (csharp):

1.  
2. int num = Math.Abs( (int)rt.sizeDelta.y / 2);
3.  

then use that value to get the aspect ratio on the mask panels

 

Judging from the 6 smiley faces, I should assume that you solved this for yourself?

 

yes, took a while lol but got there. Then figure out how to apply to landscape too and jobs a goodun and like you have learned a lot thru this little exercise

 

Cool