Resize from the area I click

Question

I'd like to know if it's possible to resize a content from the area I click instead of the top left default resize.

For example here is my code http://jsfiddle.net/2drYk/29/

var $cont = $('.container .content'),
    init_size = $cont.width()*0.1,
    ratio = $cont.width() / $cont.height(),
    c =0,
    s = [400,init_size];

$cont.height( init_size );

$cont.click(function(){   
    $(this).stop().animate({height: s[c%2], width: s[c%2] * ratio });
    c++;
});

as you can see it resize from top left to bottom right, Is it possible to set the point it start to resize depending on where I clic ?

you need to get the location of click. have a look at this http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element — btevfik, Mar 17 '13 at 04:57
Using [d3](http://d3js.org/) would be a good library for everything you want to do, and you wouldn't have to code all that behavior yourself. — Andrew Mao, Mar 17 '13 at 05:04
@btevfik I'm not very familiar with canvas, I'm guessing I should replace my figures with it ? — Oreki Houtarou, Mar 17 '13 at 05:12
to be honest i am familiar with it either. so i can't help you much. but it was the first thing that came to my mind when you said 'depending on where i click'. you might want to try what Andrew suggested. — btevfik, Mar 17 '13 at 05:14

OpherV · Accepted Answer · 2013-03-17T14:17:53.910

Yes, as you resize, move the image in the proper ratio so that point in the larger image is the same relative point as was the location of the click event. Essentially this means moving it to negative top and left according to the ratio The calculation for image placement when clicking is:

New position = Mouse click event position-New size/Old Size*Mouse click event position

Here's a jsfiddle example

This example makes use of of an equal width/height ratio, but you can easily build upon it to support whichever ratios you require

Resize from the area I click

1 Answers1