0

I have an <img> within a <div> which can be moved around using four directional buttons, for example:

enter image description here

The image is obviously larger than its container, hence the directional buttons to move it in different directions.

There is also a zoom control where you can zoom in and out. I set up the scaling method with ease, by just applying a zoom factor as a percentage to the base width and height:

scale: function(zoom)
{
    image.width = baseWidth * zoom;
    image.height = baseHeight * zoom;
}


// Zoom in 50%.
Scene.scale(1.5);

This is fine however the image scales from top-left, meaning that the image looks like it's getting sucked out towards the top left during a zoom in and spat back out when zooming out.

I'm trying to have the zoom effect apply from the centre of the container, like this:

enter image description here

But I'm finding it hard to get my head around the mathematics required to move the image after scaling applies to give this effect.

The closest I've gotten is to move the image based on the difference between the current zoom and the new zoom level, but it's still slightly off and gives a 'curved' effect when zooming.

Is there a common formula used to reposition an image so that it scales around a different origin (i.e. not top-left (0,0)).

This is what it looks like currently.

Marty
  • 39,033
  • 19
  • 93
  • 162
  • http://stackoverflow.com/questions/5189968/zoom-canvas-to-mouse-cursor may be answers here will help you – zb' Nov 01 '12 at 06:44

1 Answers1

0

You have to take your original coordinates and calculate the center of your original image, that is x_center = x_orig + width_orig / 2; Then you can calculate the new x coordinate of your scaled image: x_new = x_center - width_new / 2. The same applies for y. Then move your scaled image to these new coordinates. If you do it after each time you scale the image, it will look as though it is scaled around its center.

Ibolit
  • 9,218
  • 7
  • 52
  • 96