Transformation (zoom) with simple width/height and left/top positions

Question

I have a web site where I need to rotate the canvas, the canvas contains different images. I am using jquery. A very good example of it can be found at http://www.polyvore.com/cgi/app and i need to acheive the same functionality (drag an item and click on zoom)

For every quadrant it scales up the image and move it to respective location based on center of the canvas.

Can anyone help me with this?

This is the code snippet for my zoom function, it basically iterates throw each element on canvas and resize it but i don't know how to change the positions based on quadrants and what could be the formula

zoomFactor=4;

function zoomin()
{

$('.ui-resizable').each(function(){

            var currWidth=$(".ui-draggable img",$(this)).width();
            var currHeight=$(".ui-draggable img",$(this)).height();

            var index=get_current_index($(this).attr('id'));

$(".ui-draggable img",$(this)).width(currWidth+parseInt(width[index]/zoomFactor));

$(".ui-draggable img",$(this)).height(currHeight+parseInt(height[index]/zoomFactor));
            $(this).width(currWidth+parseInt(width[index]/zoomFactor));
            $(this).height(currHeight+parseInt(height[index]/zoomFactor));





        });

}

Answer 1

Start thinking with a simplified example. Lets say we have an image with center at x,y=(200,200) and image width, height=(50,50), the upper-left corner should be at 175, 175. Now after zoomin the new widht,height is 100, 100. Meaning you are adding 50 in widht and 50 in height. To keep the center still at (200,200) you need to move upper-left corner to 150,150. So what are doing is:

left = newWidth/2 - center and top = newHeight/2 -center.

Similarly to zoom out the formula should be

left = newWidth/2 + center and top = newHeight/2 + center.