Question

I’ve been having issues with this for a little while now. I feel like I should know this but I can’t for the life of me remember.

How can I map the screen pixels to their respective ‘graphical’ x,y positions? The co-ordinate systems have been configured to start at the bottom left (0,0) and increase to the top-right.

I want to be able to zoom, so I know that I need to configure the zoom distance into the answer.

Screen
|\          Some Quad
| \--------|\Qx
|  \    Z  | \
|   \       \|Qy
 \  |
Sx\ |Sy
   \|

I want to know which pixels on my screen will have the quad on it. Obviously as Z decreases, the quad will occupy more of the screen, and as Z increases it will occupy less, but how exactly are these calculated?

For further clarification, I want to know how I can map these screen pixels onto the ‘graphical’ co-ordinates using the zoom factor into the equation.

Thanks for any help.

Answer 1

Use the zoom factor as a multiplier against the coordinates and/or screen size.

For example, if you have a 100×150 pixel square, when zoomed in to 150%, the size of the rectangle should be 150×225.

An equation for this is:

h = height

w = width

z = percent zoom
(100% = 1.00)

---

new width = W = wz

new height = H = hz

To map screen pixels, apply more basic mathematical principles. The relative coordinates depend entirely on the center of the zoom. This is very easy, if everything zooms in the exact center. If zooming from elsewhere (e.g. stretching the object from a corner or a non-central coordinate), you must apply an offset to your equation.

Zooming a rectangle from its center point is easy. Divide the difference in rectangle width by 2, and then add it to the left and right coordinate value (you can add a negative number). Do the same for height.

If zooming the rectangle from a coordinate that is NOT in its exact center, but is still within the bounds of the rectangle, requires an offset. Simply determine what percentage of height and width change should be applied to each side of the rectangle. Sides in closer proximity to the zoom point will receive a lower percentage of the change.

When the zoom point resides outside the rectangle, the distance from the zoom point must also be taken into account. This offset moves the entire rectangle, in addition to scaling the rectangle.

Get a large piece of paper and draw up some visualizations. That always helps. =)