So I have a requirement where I have a "display-div", which is in SPECIFIC pixel size. Then I will have an image over which a "region-to-display" is marked as rectangular box. I need to come up with the exact pixel coordinates for top left and bottom right and a zoom in/zoom out value that are required in order to accommodate the region to display inside the "display-div" as good as possible.
for e.g. lets assume:
The display-div dimensions are: 100px(width) x 200px(height)
And I have an image that is 2000px(width) x 1000px(height)
Region-to-display is from (1000,500)px (top left of image)
to (1200,900)px (bottom right of image)
So I know that the width to display is 200px and height to display is 400px
. However the display-div is 100px x 200px
. So I need to zoom out as well.
Hence I will need to pass data points like:
top left = (1000,500)px
bottom right= (1200,900)px
zoom:0.5 (since we need to zoom out)[Firstly is 0.5 even correct??]
Now my problem is that I need to formalize this into some kind of "formula" that I can use against any data set, which provided I give the display-div and region-to-display coordinates, will provide me the zoom factor and the pixels for the top left and bottom right coordinates.
Also note that the region-to-display coordinates calculated does not necessarily need to be the same values as the ones marked. In earlier example it is same because the ratio was correct. However sometimes the zoom might be say 1.3 or similar decimal values in which case the region-to-display pixels might differ.
Any pointers on how to achieve this?