The 2D library I have to work with has the following function to draw images to screen:

DrawImage(img, x, y, width, height)

Given this, I'm looking to show the entire image but then "zoom" in on a specific spot over time. I can do the over time part, but to get a zooming effect it's basically increasing the width and height, but to zoom on a specific spot on the image it seems like you have to also modify the x and y at the same time to bring that spot closer to the center of the screen. There is a relationship there that I'm not sure what it is to get the effect.

At some level it seems I should be able to write a function that zooms in on a point in the 2D image, but not sure how to go about that. Any suggestions?


If you want to zoom into the center of the image, then the formula to get the x, y, width and height for any particular zoom level is:

assert zoom_level > 0
width = original_width * zoom_level
height = original_height * zoom_level
x = (original_width - width) / 2 + original_x
y = (original_height - height) / 2 + original_y

Edit If you want to zoom into point px, py on the original image: subtract px * zoom_level from x and py * zoom_level from y after doing the previous calculations:

  • \$\begingroup\$ If someone wanted to zoom to an arbitrary point on the screen vs the center what would be different? \$\endgroup\$ – user441521 May 18 '17 at 19:56
  • \$\begingroup\$ See my updated answer \$\endgroup\$ – oscar toomey May 18 '17 at 20:41
  • \$\begingroup\$ Is it still not working? \$\endgroup\$ – oscar toomey May 19 '17 at 17:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.