Representing Coordinates on a scaled image

1.3k Views Asked by At

My mathematics skill has always been terrible so apologies if I tagged this wrong.

If I have an image with an original size 1052x700 pixels in size, I scale that image down to fit a maximum size of 566x421 pixels using the following.

aspectRatio = Math.Min(566 ÷ height, 421 ÷ height)
newWidth = width * aspectRatio
newHeight = height * aspectRatio

Now here is where I am struggling, this new image should now have a size of 566x377 pixels roughly, but I need it to represent the coordinates 700:700 on that image, by that I mean when I move the mouse over the image it will give me coordinates on the x to a rough maximum of 700 and y to 700 for this image.

I have tried some very shady attempts to compute this, the coordinates will vary per image. Mouse X and Y will always give the pixel coordinate value on the image, the following gives me the closest to what I am looking for but for sure this is mathematical butchery.

coordX = (MouseX * 60) / 48
coordY = (MouseY * 60) / 32

Any help appreciated on how to tag or if it has been answered already.

2

There are 2 best solutions below

0
On BEST ANSWER

You have newHeight and newWidth to work with. I suggest that you do the following:

coordX = mouseX * 700 / newWidth;
coordY = mouseY * 700 / newHeight; 

Now when the mouse is at pixel $(0,0)$, your coordinate pair will be $(0,0)$, and when the mouse is at the diagonally opposite corner $(newWidth, newHeight)$, the coordinate pair you get will be $(700, 700)$.

0
On

Just incase anyone else comes here in the future. calculate a "scaleFactor"

scaleFactor = origWidth / newWidth

Since you are keeping the aspect ratio intact, the factor will be the same in both the x and y axis.

The just multiply any coord x and y by scaleFactor to get the corresponding pixel in the original image.

origX = mouseX * scaleFactor