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?


1 Answer 1


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, 2017 at 19:56
  • \$\begingroup\$ See my updated answer \$\endgroup\$
    – otoomey
    May 18, 2017 at 20:41
  • \$\begingroup\$ Is it still not working? \$\endgroup\$
    – otoomey
    May 19, 2017 at 17:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .