Advertisement Jump to content
Sign in to follow this  

scaling an image

This topic is 4882 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi all, I've created a small app to display 2d images. So far I have panning the image around the screen supported. I also have scaling the image from its center point supported too. Instead of simply scaling the image from its center point wherever it happens to lie in space, I would like to achieve the effect of scaling looking like I'm actually moving the 'camera' into the viewport. I thought I could achieve this by introducing a fudged pan offset in the x/y directions, so that when you're zooming in, the image is shifted in the x/y directions to look like you're really zooming in, not just scaling the image from its center point. Opengl does this beautifully, however I cannot use opengl, any ideas? Thanks

Share this post

Link to post
Share on other sites
Hi all, here are some screen shots to show what I mean. They are really small, like 2k each:

The first screen shot shows the 2D viewport I set up. The red cross hair is the origin of my viewport. The yellow wireframe quad is the image. Its center point is green.

first one

Now the next screen shot shows that if I scale the quad, it gets scaled about its center point, which happens to be the viewport centerpoint as well here.

second one

Now if I had first translated the quad up to the left a bit...

third one

And now I scale, you can see its just simply scaling still around the quad center point.

fourth one

I would like instead to introduce some pan offset to make it appear as if I'm not really just scaling the quad, but moving into the viewport. So in this last screen shot, the quad should have perfectly increased along the two axes instead, since the camera movement should really just be zooming into the center point of the viewport.

fifth one

Share this post

Link to post
Share on other sites
I don't know what function calls you're using to draw the image. Most image drawing libraries support drawing an image scaled, and drawing a sub-part of an image.

If you know that the center pixel of the viewport is coordinate X, then it's fairly simple to calculate what the pixel of the upper-left and lower-right part of the viewport should be, given scale Y:

upperleft = X - (ViewportSize/2)/Scale;
lowerright = X + (ViewportSize/2)/Scale;

I'm assuming Scale is 1.0 at 100% zoom, and 2.0 at 200% zoom. The just draw the part of the image from upperleft to lowerright to cover your viewport exactly (assuming you count 0,0 in the upper-left corner).

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!